@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400; src: url("fonts/WorkSans-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 500; src: url("fonts/WorkSans-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 600; src: url("fonts/WorkSans-SemiBold.woff2") format("woff2"); font-display: swap; }
/* =========================================================================
   Reflective Learning — Design Tokens
   Per CI Guidelines v01 / 2025:
     Primary colors: Insight Violet #7c3aed, Curiosity Purple #4a1fb8,
                     Foundation Beige #f5f1eb, Graphite #1c1b2f, White #ffffff
     Type: Work Sans (single family, all roles)
   Pillar palettes (Curriculum/Reading/Logic/Mindful) come from internal
   product tokens (Untitled-UI based) and are scoped to learning content.
   ========================================================================= */

/* ---- Fonts ----------------------------------------------------------- */


:root {
  /* ---- Font families ------------------------------------------------ */
  /* Per CI Guidelines: Work Sans is the single font family. */
  --font-display: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-text:    "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Color primitives — Brand pillars ----------------------------- */

  /* CI Primary palette — anchor values from official CI guide */
  --insight-violet:    #7c3aed;  /* primary brand */
  --curiosity-purple:  #4a1fb8;  /* secondary brand */
  --foundation-beige:  #f5f1eb;  /* warm neutral surface */
  --graphite:          #1c1b2f;  /* deep ink */
  --bright-white:      #ffffff;

  /* Brand scale derived from Insight Violet → Curiosity Purple */
  --brand-25:  #f9f6ff;
  --brand-50:  #f1ebfe;
  --brand-100: #e3d6fd;
  --brand-200: #c9b0fb;
  --brand-300: #ad88f6;
  --brand-400: #9462f1;
  --brand-500: #7c3aed;  /* Insight Violet — default CTA */
  --brand-600: #6a26db;  /* hover */
  --brand-700: #5821c2;
  --brand-800: #4a1fb8;  /* Curiosity Purple */
  --brand-900: #2d127a;
  --brand-950: #180647;

  /* Curriculum Blue — the "Curriculum" pillar */
  --curriculum-25:  #f8faff;
  --curriculum-50:  #eff3fb;
  --curriculum-100: #dae4f6;
  --curriculum-200: #b9ccee;
  --curriculum-300: #95b1e5;
  --curriculum-400: #7499dd;
  --curriculum-500: #4f7ed4;
  --curriculum-600: #3065c5;
  --curriculum-700: #2854a3;
  --curriculum-800: #1b396f;
  --curriculum-900: #0d1b35;
  --curriculum-950: #070f1d;

  /* Reading Red — the "Reading" pillar */
  --reading-25:  #fffbfa;
  --reading-50:  #fbeaeb;
  --reading-100: #f7d9db;
  --reading-200: #efb3b6;
  --reading-300: #e78d92;
  --reading-400: #df686d;
  --reading-500: #d74249;
  --reading-600: #c12930;
  --reading-700: #8f1e24;
  --reading-800: #611518;
  --reading-900: #2e0a0c;
  --reading-950: #190506;

  /* Logic Green — the "Logic" pillar (also doubles as Success) */
  --logic-25:  #f6fef9;
  --logic-50:  #e6f9ef;
  --logic-100: #c9f3db;
  --logic-200: #93e6b8;
  --logic-300: #5dda94;
  --logic-400: #2ec772;
  --logic-500: #229354;
  --logic-600: #1b7442;
  --logic-700: #145732;
  --logic-800: #0d3a21;
  --logic-900: #071d11;
  --logic-950: #011507;

  /* Mindful Orange — the "Mindful" pillar (also doubles as Warning) */
  --mindful-25:  #fffcf5;
  --mindful-50:  #ffefe0;
  --mindful-100: #ffdec2;
  --mindful-200: #ffbb80;
  --mindful-300: #ff9a42;
  --mindful-400: #ff7600;
  --mindful-500: #d66300;
  --mindful-600: #a84e00;
  --mindful-700: #803b00;
  --mindful-800: #572800;
  --mindful-900: #291300;
  --mindful-950: #140900;

  /* Graphite — neutrals (cool, slightly blue) */
  /* Foundation Beige scale — warm neutral surface from CI guide */
  --beige-25:  #fbf9f5;
  --beige-100: #f5f1eb;  /* CI Foundation Beige */
  --beige-200: #ebe4d8;
  --beige-300: #dccfb8;
  --beige-400: #c4b291;
  --beige-500: #a89274;

  --graphite-25:  #fcfcfd;
  --graphite-50:  #f9fafb;
  --graphite-100: #f2f4f7;
  --graphite-200: #eaecf0;
  --graphite-300: #d0d5dd;
  --graphite-400: #98a2b3;
  --graphite-500: #667085;
  --graphite-600: #475467;
  --graphite-700: #344054;
  --graphite-800: #182230;
  --graphite-900: #1c1b2f;  /* CI Graphite */
  --graphite-950: #0c111d;

  /* Semantic alias scales (Reading == Error, Mindful == Warning, Logic == Success) */
  --error-50:  var(--reading-50);
  --error-100: var(--reading-100);
  --error-300: var(--reading-300);
  --error-500: var(--reading-500);
  --error-600: var(--reading-600);
  --error-700: var(--reading-700);

  --warning-50:  var(--mindful-50);
  --warning-100: var(--mindful-100);
  --warning-400: var(--mindful-400);
  --warning-500: var(--mindful-500);
  --warning-600: var(--mindful-600);
  --warning-700: var(--mindful-700);

  --success-50:  var(--logic-50);
  --success-100: var(--logic-100);
  --success-400: var(--logic-400);
  --success-500: var(--logic-500);
  --success-600: var(--logic-600);
  --success-700: var(--logic-700);

  --base-white: #ffffff;
  --base-black: #000000;

  /* ---- Semantic tokens (light mode default) ------------------------- */

  /* Text */
  --text-primary:           #101828;
  --text-secondary:         #344054;
  --text-secondary-hover:   #182230;
  --text-tertiary:          #475467;
  --text-tertiary-hover:    #344054;
  --text-quaternary:        #667085;
  --text-disabled:          #667085;
  --text-placeholder:       #667085;
  --text-placeholder-subtle:#d0d5dd;
  --text-white:             #ffffff;
  --text-brand-primary:     #2d127a;
  --text-brand-secondary:   #6a26db;
  --text-brand-tertiary:    #7c3aed;
  --text-error-primary:     #c12930;
  --text-warning-primary:   #a84e00;
  --text-success-primary:   #1b7442;
  --text-on-brand:          #ffffff;

  /* Foreground (icons) */
  --fg-primary:        #101828;
  --fg-secondary:      #344054;
  --fg-tertiary:       #475467;
  --fg-quaternary:     #667085;
  --fg-quinary:        #98a2b3;
  --fg-senary:         #d0d5dd;
  --fg-disabled:       #98a2b3;
  --fg-disabled-subtle:#d0d5dd;
  --fg-white:          #ffffff;
  --fg-brand-primary:  #7c3aed;
  --fg-brand-secondary:#9462f1;
  --fg-error-primary:  #c12930;
  --fg-error-secondary:#d74249;
  --fg-warning-primary:#a84e00;
  --fg-warning-secondary:#d66300;
  --fg-success-primary:#1b7442;
  --fg-success-secondary:#229354;

  /* Backgrounds */
  --bg-primary:           #ffffff;
  --bg-primary-hover:     #f9fafb;
  --bg-primary-solid:     #0c111d;
  --bg-secondary:         #f9fafb;
  --bg-secondary-hover:   #f2f4f7;
  --bg-secondary-solid:   #475467;
  --bg-secondary-subtle:  #fcfcfd;
  --bg-tertiary:          #f2f4f7;
  --bg-quaternary:        #eaecf0;
  --bg-active:            #f9fafb;
  --bg-disabled:          #f2f4f7;
  --bg-disabled-subtle:   #f9fafb;
  --bg-overlay:           #0c111d;
  --bg-brand-primary:     #f1ebfe;
  --bg-brand-secondary:   #e3d6fd;
  --bg-brand-solid:       #7c3aed;
  --bg-brand-solid-hover: #6a26db;
  --bg-brand-section:     #4a1fb8;
  --bg-brand-section-subtle:#6a26db;
  --bg-error-primary:     #fbeaeb;
  --bg-error-secondary:   #f7d9db;
  --bg-error-solid:       #c12930;
  --bg-warning-primary:   #ffefe0;
  --bg-warning-secondary: #ffdec2;
  --bg-warning-solid:     #a84e00;
  --bg-success-primary:   #e6f9ef;
  --bg-success-secondary: #c9f3db;
  --bg-success-solid:     #1b7442;

  /* Borders */
  --border-primary:        #d0d5dd;
  --border-secondary:      #eaecf0;
  --border-tertiary:       #f2f4f7;
  --border-disabled:       #d0d5dd;
  --border-disabled-subtle:#eaecf0;
  --border-brand:          #ad88f6;
  --border-brand-solid:    #7c3aed;
  --border-error:          #e78d92;
  --border-error-solid:    #c12930;
  --border-success:        #5dda94;
  --border-success-solid:  #1b7442;

  /* ---- Spacing scale (px) ------------------------------------------- */
  --spacing-0:    0px;
  --spacing-xxs:  2px;
  --spacing-xs:   4px;
  --spacing-sm:   6px;
  --spacing-md:   8px;
  --spacing-lg:   12px;
  --spacing-xl:   16px;
  --spacing-2xl:  20px;
  --spacing-3xl:  24px;
  --spacing-4xl:  32px;
  --spacing-5xl:  40px;
  --spacing-6xl:  48px;
  --spacing-7xl:  64px;
  --spacing-8xl:  80px;
  --spacing-9xl:  96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;

  /* ---- Radius ------------------------------------------------------- */
  --radius-none: 0px;
  --radius-xxs:  2px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  20px;
  --radius-4xl:  24px;
  --radius-full: 9999px;

  /* ---- Widths / containers ----------------------------------------- */
  --width-xxs: 320px;
  --width-xs:  384px;
  --width-sm:  480px;
  --width-md:  560px;
  --width-lg:  640px;
  --width-xl:  768px;
  --width-2xl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --paragraph-max-width: 720px;

  --container-max-desktop: 1280px;
  --container-padding-desktop: 32px;
  --container-padding-mobile: 16px;

  /* ---- Shadows ------------------------------------------------------ */
  --shadow-xs:  0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-sm:  0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
  --shadow-md:  0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
  --shadow-lg:  0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --shadow-xl:  0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
  --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);

  /* Focus rings */
  --ring-brand: 0 0 0 4px rgba(116, 83, 237, 0.24);
  --ring-gray:  0 0 0 4px rgba(152, 162, 179, 0.14);
  --ring-error: 0 0 0 4px rgba(193, 41, 48, 0.24);

  /* ---- Type scale (raw) -------------------------------------------- */
  /* Display (Work Sans, -2% letter-spacing for ≥36px, 0% for <36px) */
  --display-2xl-size: 72px; --display-2xl-lh: 90px; --display-2xl-tracking: -0.02em;
  --display-xl-size:  60px; --display-xl-lh:  72px; --display-xl-tracking:  -0.02em;
  --display-lg-size:  48px; --display-lg-lh:  60px; --display-lg-tracking:  -0.02em;
  --display-md-size:  36px; --display-md-lh:  44px; --display-md-tracking:  -0.02em;
  --display-sm-size:  30px; --display-sm-lh:  38px; --display-sm-tracking:  0;
  --display-xs-size:  24px; --display-xs-lh:  32px; --display-xs-tracking:  0;

  /* Text (Poppins) */
  --text-xl-size: 20px; --text-xl-lh: 30px;
  --text-lg-size: 18px; --text-lg-lh: 28px;
  --text-md-size: 16px; --text-md-lh: 24px;
  --text-sm-size: 14px; --text-sm-lh: 20px;
  --text-xs-size: 12px; --text-xs-lh: 18px;
}

/* ---- Dark mode --------------------------------------------------------- */
[data-theme="dark"], .dark {
  --text-primary:           #f5f5f6;
  --text-secondary:         #cecfd2;
  --text-secondary-hover:   #ececed;
  --text-tertiary:          #94969c;
  --text-tertiary-hover:    #cecfd2;
  --text-quaternary:        #94969c;
  --text-disabled:          #85888e;
  --text-placeholder:       #85888e;
  --text-placeholder-subtle:#333741;
  --text-brand-primary:     #f5f5f6;
  --text-brand-secondary:   #cecfd2;
  --text-brand-tertiary:    #94969c;
  --text-error-primary:     #df686d;
  --text-warning-primary:   #ff7600;
  --text-success-primary:   #2ec772;

  --fg-primary:        #ffffff;
  --fg-secondary:      #cecfd2;
  --fg-tertiary:       #94969c;
  --fg-quaternary:     #94969c;
  --fg-quinary:        #85888e;
  --fg-senary:         #61646c;
  --fg-disabled:       #85888e;
  --fg-disabled-subtle:#61646c;
  --fg-brand-primary:  #8a73f1;
  --fg-brand-secondary:#8a73f1;
  --fg-error-primary:  #d74249;
  --fg-warning-primary:#d66300;
  --fg-success-primary:#229354;

  --bg-primary:           #0c111d;
  --bg-primary-hover:     #1f242f;
  --bg-secondary:         #161b26;
  --bg-secondary-hover:   #1f242f;
  --bg-secondary-subtle:  #161b26;
  --bg-tertiary:          #1f242f;
  --bg-quaternary:        #333741;
  --bg-active:            #1f242f;
  --bg-disabled:          #1f242f;
  --bg-disabled-subtle:   #161b26;
  --bg-overlay:           #1f242f;
  --bg-brand-primary:     #9462f1;
  --bg-brand-secondary:   #7c3aed;
  --bg-error-primary:     #d74249;
  --bg-error-secondary:   #c12930;
  --bg-warning-primary:   #d66300;
  --bg-warning-secondary: #a84e00;
  --bg-success-primary:   #229354;
  --bg-success-secondary: #1b7442;

  --border-primary:        #333741;
  --border-secondary:      #1f242f;
  --border-tertiary:       #1f242f;
  --border-disabled:       #333741;
  --border-disabled-subtle:#1f242f;
  --border-brand:          #a090f4;
  --border-error:          #df686d;
  --border-success:        #df686d;
}

/* =========================================================================
   Semantic typography utilities — apply directly via class
   ========================================================================= */

/* DISPLAY (headings, hero, slide titles) — Work Sans */
.display-2xl, h1.display-2xl { font-family: var(--font-display); font-size: var(--display-2xl-size); line-height: var(--display-2xl-lh); letter-spacing: var(--display-2xl-tracking); font-weight: 600; }
.display-xl,  h1.display-xl  { font-family: var(--font-display); font-size: var(--display-xl-size);  line-height: var(--display-xl-lh);  letter-spacing: var(--display-xl-tracking);  font-weight: 600; }
.display-lg,  h1            { font-family: var(--font-display); font-size: var(--display-lg-size);  line-height: var(--display-lg-lh);  letter-spacing: var(--display-lg-tracking);  font-weight: 600; }
.display-md,  h2            { font-family: var(--font-display); font-size: var(--display-md-size);  line-height: var(--display-md-lh);  letter-spacing: var(--display-md-tracking);  font-weight: 600; }
.display-sm,  h3            { font-family: var(--font-display); font-size: var(--display-sm-size);  line-height: var(--display-sm-lh);  font-weight: 600; }
.display-xs,  h4            { font-family: var(--font-display); font-size: var(--display-xs-size);  line-height: var(--display-xs-lh);  font-weight: 600; }

/* BODY / TEXT — Poppins */
.text-xl  { font-family: var(--font-text); font-size: var(--text-xl-size); line-height: var(--text-xl-lh); }
.text-lg  { font-family: var(--font-text); font-size: var(--text-lg-size); line-height: var(--text-lg-lh); }
.text-md, p, body { font-family: var(--font-text); font-size: var(--text-md-size); line-height: var(--text-md-lh); }
.text-sm  { font-family: var(--font-text); font-size: var(--text-sm-size); line-height: var(--text-sm-lh); }
.text-xs  { font-family: var(--font-text); font-size: var(--text-xs-size); line-height: var(--text-xs-lh); }

/* Eyebrow / caps label */
.eyebrow { font-family: var(--font-text); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-brand-secondary); }

code, pre, kbd, samp { font-family: var(--font-mono); }

body { color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; }