/*
 * Lecture Notebook — design tokens for CV Builder ver-2.
 * Light: squared lecture notebook, blue-black ink, index tabs, red margin rule.
 * Dark: black-page notebook written in gel pens (authored, not inverted).
 * The CV sheet itself is always white paper (see engine/cv-engine.css).
 */
:root {
  color-scheme: light;
  /* surfaces */
  --paper: #fbfcfd;          /* notebook page */
  --paper-2: #f2f5f9;        /* tab well, secondary page */
  --paper-3: #e9eef5;        /* pressed / hover well */
  --desk: #dfe5ee;           /* the table under the sheet */
  --grid: rgba(62, 104, 170, 0.09);   /* squared-paper lines */
  --rule: rgba(62, 104, 170, 0.22);   /* ruled lines, hairlines on paper */
  --margin: #e0494b;         /* the red margin rule */
  --line: rgba(27, 36, 64, 0.13);
  --line-strong: rgba(27, 36, 64, 0.24);

  /* ink */
  --ink: #1b2440;
  --ink-2: #434d69;
  --ink-3: #636c88;
  --ink-inverse: #ffffff;

  /* index tabs (colour always paired with a label / line form) */
  --violet: #6019b4;   --violet-ink: #ffffff;  --violet-soft: #efe7fb;
  --teal: #50c8c6;     --teal-ink: #073433;    --teal-text: #11706e;   --teal-soft: #e3f6f5;
  --amber: #f2a93b;    --amber-ink: #3b2400;   --amber-soft: #fdf1dc;
  --coral: #ef6f5e;    --coral-ink: #3e0d06;   --coral-soft: #fde7e3;
  --blue: #2f6fcc;     --blue-ink: #ffffff;    --blue-soft: #e5eefb;  /* 4.9:1 with white labels */

  --primary: var(--violet);
  --primary-ink: var(--violet-ink);
  --primary-soft: var(--violet-soft);

  /* highlighter: marks text the AI wrote */
  --highlight: rgba(255, 224, 70, 0.78);
  --highlight-soft: rgba(255, 224, 70, 0.34);

  /* states */
  --ok: #1d7f54;   --ok-soft: #e2f4ea;
  --warn: #9a6100; --warn-soft: #fcf0d8;
  --bad: #c0343a;  --bad-soft: #fbe5e5;

  --focus: #6019b4;

  /* depth: offset + soft blur */
  --shadow-sheet: 0 1px 1px rgba(27, 36, 64, 0.06), 0 14px 34px -14px rgba(27, 36, 64, 0.32);
  --shadow-pop: 0 2px 4px rgba(27, 36, 64, 0.06), 0 18px 40px -16px rgba(27, 36, 64, 0.38);
  --shadow-tab: 0 1px 2px rgba(27, 36, 64, 0.12);

  /* type */
  --font-ui: "Rubik", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 21px;
  --fs-2xl: 27px;
  --fs-3xl: 36px;
  --lh: 1.6;

  /* shape + rhythm */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px; --gap-7: 48px;
  --grid-size: 22px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-med: 240ms;
  --t-slow: 420ms;
}

/* Dark: black-page notebook, gel-pen ink. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #16171c;
    --paper-2: #1d1f26;
    --paper-3: #262934;
    --desk: #0d0e12;
    --grid: rgba(170, 186, 255, 0.06);
    --rule: rgba(170, 186, 255, 0.16);
    --margin: #ff7272;
    --line: rgba(236, 238, 244, 0.11);
    --line-strong: rgba(236, 238, 244, 0.22);
    --ink: #eceef4;
    --ink-2: #bcc1d2;
    --ink-3: #9197ac;
    --ink-inverse: #16171c;
    --violet: #b89dff;   --violet-ink: #1a0d33;  --violet-soft: rgba(184, 157, 255, 0.14);
    --teal: #6fe0dd;     --teal-ink: #062f2e;    --teal-text: #7fe6e3;   --teal-soft: rgba(111, 224, 221, 0.13);
    --amber: #ffcb6b;    --amber-ink: #382300;   --amber-soft: rgba(255, 203, 107, 0.13);
    --coral: #ff8f80;    --coral-ink: #3a0b05;   --coral-soft: rgba(255, 143, 128, 0.13);
    --blue: #8ab8ff;     --blue-ink: #0b1f3f;    --blue-soft: rgba(138, 184, 255, 0.13);
    --highlight: rgba(245, 255, 107, 0.34);
    --highlight-soft: rgba(245, 255, 107, 0.16);
    --ok: #5fd6a0;   --ok-soft: rgba(95, 214, 160, 0.13);
    --warn: #f5c451; --warn-soft: rgba(245, 196, 81, 0.13);
    --bad: #ff8589;  --bad-soft: rgba(255, 133, 137, 0.13);
    --focus: #b89dff;
    --shadow-sheet: 0 1px 1px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
    --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.4), 0 22px 44px -18px rgba(0, 0, 0, 0.85);
    --shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #16171c;
  --paper-2: #1d1f26;
  --paper-3: #262934;
  --desk: #0d0e12;
  --grid: rgba(170, 186, 255, 0.06);
  --rule: rgba(170, 186, 255, 0.16);
  --margin: #ff7272;
  --line: rgba(236, 238, 244, 0.11);
  --line-strong: rgba(236, 238, 244, 0.22);
  --ink: #eceef4;
  --ink-2: #bcc1d2;
  --ink-3: #9197ac;
  --ink-inverse: #16171c;
  --violet: #b89dff;   --violet-ink: #1a0d33;  --violet-soft: rgba(184, 157, 255, 0.14);
  --teal: #6fe0dd;     --teal-ink: #062f2e;    --teal-text: #7fe6e3;   --teal-soft: rgba(111, 224, 221, 0.13);
  --amber: #ffcb6b;    --amber-ink: #382300;   --amber-soft: rgba(255, 203, 107, 0.13);
  --coral: #ff8f80;    --coral-ink: #3a0b05;   --coral-soft: rgba(255, 143, 128, 0.13);
  --blue: #8ab8ff;     --blue-ink: #0b1f3f;    --blue-soft: rgba(138, 184, 255, 0.13);
  --highlight: rgba(245, 255, 107, 0.34);
  --highlight-soft: rgba(245, 255, 107, 0.16);
  --ok: #5fd6a0;   --ok-soft: rgba(95, 214, 160, 0.13);
  --warn: #f5c451; --warn-soft: rgba(245, 196, 81, 0.13);
  --bad: #ff8589;  --bad-soft: rgba(255, 133, 137, 0.13);
  --focus: #b89dff;
  --shadow-sheet: 0 1px 1px rgba(0, 0, 0, 0.4), 0 18px 40px -16px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 2px 4px rgba(0, 0, 0, 0.4), 0 22px 44px -18px rgba(0, 0, 0, 0.85);
  --shadow-tab: 0 1px 2px rgba(0, 0, 0, 0.5);
}