/* ---------------------------------------------------------------------------
   Productpinion design
   --------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
  /* Brand — design-system/productpinion.css (_variables.demo.scss) */
  --pp-primary: #f37668;
  --pp-primary-hover: #f06556;
  --pp-primary-light: #ffedeb;
  --pp-secondary: #67f9a9;
  --pp-blue: #09c5ed;
  --pp-blue-light: #bdf7ff;
  --pp-green: #67f9a9;
  --pp-pink: #ff5ccd;
  --pp-yellow: #fec883;

  /* Status, each with the app's `*-light` tint (alert-light-*, label-light-*) */
  --pp-success: #1bc5bd;
  --pp-success-light: #c9f7f5;
  --pp-info: #8950fc;
  --pp-info-light: #eee5ff;
  --pp-warning: #ffa800;
  --pp-warning-light: #fff4de;
  --pp-danger: #f64e60;
  --pp-danger-light: #ffe2e5;

  /* Neutrals */
  --pp-dark: #181c32;        /* text-dark: headings */
  --pp-gray-dark: #3f4254;   /* body text */
  --pp-gray: #7e8299;        /* secondary text */
  --pp-muted: #b5b5c3;       /* text-muted: captions, table heads */
  --pp-light: #f3f6f9;       /* bg-light, form-control-solid */
  --pp-border: #ebedf3;
  --pp-border-input: #e4e6ef;
  --pp-page-bg: #eef0f8;
  --pp-white: #ffffff;

  /* Shape — the app uses one radius everywhere */
  --pp-radius: 0.42rem;
  --pp-shadow: 0 0 30px 0 rgb(82 63 105 / 0.05);
  --pp-shadow-hover: 0 0 30px 0 rgb(82 63 105 / 0.13);

  /* Type */
  --pp-font-sans: Poppins, Helvetica, sans-serif;
  --pp-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --pp-link: var(--pp-primary);
  --pp-link-hover: #ed3621;
  --pp-gradient: linear-gradient(90deg, var(--pp-blue) 0%, var(--pp-secondary) 100%);

  --pp-text: var(--pp-gray-dark);
  --pp-surface: var(--pp-white);
  --pp-surface-muted: var(--pp-light);
}

body {
  font-family: var(--pp-font-sans);
  color: var(--pp-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--pp-font-sans);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--pp-dark);
}

/* The app's heading scale (2rem … 1.25rem). Page and section titles use
   font-weight-bolder (600) as the showcase does; smaller headings stay 500. */
h1 { font-size: 2rem; font-weight: 600; }
h2 { font-size: 1.75rem; font-weight: 600; border-color: var(--pp-border); }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.35rem; font-weight: 500; }
h5 { font-size: 1.25rem; font-weight: 500; }
h6 { font-size: 1.075rem; font-weight: 500; }

.dai-sidebar-page-active {
  background-color: var(--pp-light) !important;
  color: var(--pp-primary) !important
}