/*! Syllabus design system 1.0.0 (2026-11-07). Tokens: every value the components read.
   Light on :root. Dark follows the visitor's system preference unless the page sets
   data-theme="light" or data-theme="dark" on <html>. Accent presets switch with
   data-accent="sky" or data-accent="forest" on <html>; they only touch the primary, accent,
   focus and progress tokens. The callout taxonomy, the highlighter and the data-viz colors
   never change with a preset, so learners always read the same signals. */

:root {
  color-scheme: light;

  /* Surfaces: soft paper page, white sheets, a desk tone for wells and alternate sections */
  --sy-paper: #f7f6f1;
  --sy-surface: #fffefa;
  --sy-desk: #eeede6;
  --sy-desk-strong: #e5e3da;

  /* Text: slate ink */
  --sy-ink: #18222b;
  --sy-body: #26323c;
  --sy-muted: #424e59;

  /* Lines: hairlines, control borders, the faint ruled lines of an exercise book */
  --sy-hair: #dedcd2;
  --sy-hair-strong: #c8c5b8;
  --sy-control: #7b8690;
  --sy-rule: #e6e8e6;

  /* Primary: deep slate-teal for actions and progress */
  --sy-primary: #1e5b5e;
  --sy-primary-hover: #164649;
  --sy-on-primary: #ffffff;
  --sy-accent: #1a5054;
  --sy-accent-soft: #e1eeeb;
  --sy-focus: #1e5b5e;
  --sy-progress: var(--sy-primary);
  --sy-track: #dedcd3;

  /* The highlighter: a marker behind text, and the exam-tip fill */
  --sy-mark: #fde668;
  --sy-mark-ink: #18222b;

  /* Progress marks: not started, in progress, done */
  --sy-pending: #7b8690;
  --sy-done: var(--sy-primary);
  --sy-done-ink: var(--sy-on-primary);

  /* Status */
  --sy-ok: #245629;
  --sy-ok-soft: #e3efe0;
  --sy-warn: #634400;
  --sy-warn-soft: #f8ecc8;
  --sy-danger: #8a2621;
  --sy-danger-soft: #f9e4e0;
  --sy-info: #24507a;
  --sy-info-soft: #e4edf6;

  /* Callout taxonomy: bar, tint and label ink for each kind */
  --sy-def-bar: #2f6593;
  --sy-def-tint: #e9f0f7;
  --sy-def-ink: #1f4b70;
  --sy-ex-bar: #3f7d3c;
  --sy-ex-tint: #e9f2e5;
  --sy-ex-ink: #2b5a29;
  --sy-tip-bar: #8f6c00;
  --sy-tip-tint: #fff1a6;
  --sy-tip-ink: #574000;
  --sy-err-bar: #b33c2d;
  --sy-err-tint: #fbe9e5;
  --sy-err-ink: #8a2a1e;
  --sy-rem-bar: #5a6b7a;
  --sy-rem-tint: #ebeef1;
  --sy-rem-ink: #33414d;

  /* Inverted: tooltips, toasts and the one slate band per page */
  --sy-invert: #1c2730;
  --sy-invert-ink: #f3f5f2;
  --sy-invert-muted: #c3ccd3;
  --sy-invert-hair: #34424d;

  /* The slate band: one closing band per page, with its own button colors */
  --sy-band: #1c2730;
  --sy-band-ink: #f3f5f2;
  --sy-band-muted: #c3ccd3;
  --sy-band-line: #6b7a86;
  --sy-band-btn: #fffefa;
  --sy-band-btn-ink: #18222b;

  /* Backdrop behind dialogs */
  --sy-scrim: rgba(17, 24, 30, 0.5);

  /* Certificate paper stays light in both themes, like the printed page */
  --sy-cert-paper: #fffdf6;
  --sy-cert-ink: #18222b;
  --sy-cert-muted: #424e59;
  --sy-cert-line: #c9bf9c;
  --sy-cert-seal: #1e5b5e;

  /* Course covers: three coded cover fills with their own label colors */
  --sy-cover-1: #1e5b5e;
  --sy-cover-1-ink: #f4f7f2;
  --sy-cover-2: #e8b84a;
  --sy-cover-2-ink: #2a1f00;
  --sy-cover-3: #9cc4ea;
  --sy-cover-3-ink: #0f2236;
  --sy-cover-line: rgba(255, 255, 255, 0.28);

  /* Avatars: initials on four quiet tints */
  --sy-avatar-1: #d6e8e5;
  --sy-avatar-1-ink: #173f42;
  --sy-avatar-2: #f6e3b4;
  --sy-avatar-2-ink: #4a3500;
  --sy-avatar-3: #dbe6f3;
  --sy-avatar-3-ink: #1d3f62;
  --sy-avatar-4: #f3ddd6;
  --sy-avatar-4-ink: #6e2618;

  /* Data viz: categorical (3:1 on paper, surface and desk; neighbors differ in lightness) */
  --sy-viz-1: #1e5b5e;
  --sy-viz-2: #a87900;
  --sy-viz-3: #3a7fc2;
  --sy-viz-4: #b4492f;
  --sy-viz-5: #5a913d;
  --sy-viz-6: #2c3640;
  /* Sequential ramp, low to high */
  --sy-seq-1: #d7ebe8;
  --sy-seq-2: #9fcac5;
  --sy-seq-3: #62a39e;
  --sy-seq-4: #2f7a77;
  --sy-seq-5: #1a4d50;
  /* Diverging ramp, brick to teal through paper */
  --sy-div-1: #b4492f;
  --sy-div-2: #e2a28d;
  --sy-div-3: #ebe9e2;
  --sy-div-4: #7fb3ae;
  --sy-div-5: #1e5b5e;

  /* Elevation: sheets lie flat on the desk; only popovers and the hero window lift */
  --sy-shadow-card: 0 1px 0 rgba(24, 34, 43, 0.04), 0 1px 3px rgba(24, 34, 43, 0.06);
  --sy-shadow-lift: 0 2px 4px rgba(24, 34, 43, 0.05), 0 16px 32px -18px rgba(24, 34, 43, 0.28);
  --sy-shadow-pop: 0 4px 10px rgba(24, 34, 43, 0.08), 0 28px 56px -20px rgba(24, 34, 43, 0.36);

  /* Type: Literata for lessons and headings, Lexend for interface */
  --sy-font-serif: "Literata", ui-serif, serif;
  --sy-font-sans: "Lexend", ui-sans-serif, system-ui, sans-serif;
  --sy-font-mono: ui-monospace, Consolas, "Liberation Mono", monospace;
  --sy-fs-display: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);   /* 40 to 68: home title */
  --sy-fs-page: clamp(2.25rem, 1.8rem + 1.9vw, 3.25rem);     /* 36 to 52: page and lesson titles */
  --sy-fs-title: clamp(1.75rem, 1.45rem + 1.25vw, 2.5rem);   /* 28 to 40: section titles */
  --sy-fs-headline: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem); /* 22 to 28: panel titles, prices */
  --sy-fs-card: 1.25rem;                                      /* 20: card and lesson-part titles */
  --sy-fs-lede: 1.1875rem;                                    /* 19: lede */
  --sy-fs-prose: 1.1875rem;                                   /* 19: lesson and article text */
  --sy-fs-body: 1.0625rem;                                    /* 17: interface body */
  --sy-fs-small: 1rem;                                        /* 16: card text, forms, dense text */
  --sy-fs-meta: 0.875rem;                                     /* 14: meta, tables, rail times */
  --sy-fs-label: 0.8125rem;                                   /* 13: badges and callout labels */
  --sy-lh-display: 1.06;
  --sy-lh-title: 1.14;
  --sy-lh-snug: 1.32;
  --sy-lh-body: 1.6;
  --sy-lh-prose: 1.72;
  --sy-track-display: -0.022em;
  --sy-track-title: -0.012em;
  --sy-track-label: 0.01em;
  --sy-weight-regular: 400;
  --sy-weight-medium: 500;
  --sy-weight-semibold: 600;

  /* Space: 4px base */
  --sy-space-1: 4px;
  --sy-space-2: 8px;
  --sy-space-3: 12px;
  --sy-space-4: 16px;
  --sy-space-5: 20px;
  --sy-space-6: 24px;
  --sy-space-7: 32px;
  --sy-space-8: 40px;
  --sy-space-9: 48px;
  --sy-space-10: 64px;
  --sy-space-11: 80px;
  --sy-space-12: 112px;

  /* Shape: 8px controls, 12px cards, 4px callout bars */
  --sy-radius-xs: 4px;
  --sy-radius-chip: 6px;
  --sy-radius-btn: 8px;
  --sy-radius-input: 8px;
  --sy-radius-card: 12px;
  --sy-radius-panel: 16px;
  --sy-radius-round: 999px;
  --sy-bar: 4px;

  /* Layout */
  --sy-content: 1200px;
  --sy-reading: 680px;
  --sy-rail-w: 312px;
  --sy-gutter: 20px;
  --sy-section: 64px;
  --sy-nav-h: 64px;
  --sy-ruled: 32px;

  /* Motion */
  --sy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sy-dur-fast: 120ms;
  --sy-dur: 200ms;
  --sy-dur-slow: 420ms;
}

@media (min-width: 900px) {
  :root {
    --sy-gutter: 40px;
    --sy-section: 104px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sy-paper: #11171c;
    --sy-surface: #172028;
    --sy-desk: #1d2830;
    --sy-desk-strong: #24313a;
    --sy-ink: #eef2f4;
    --sy-body: #d3dbe0;
    --sy-muted: #a9b5bd;
    --sy-hair: #2a3640;
    --sy-hair-strong: #3a4853;
    --sy-control: #6f7d88;
    --sy-rule: #19222a;
    --sy-primary: #6cc0b8;
    --sy-primary-hover: #8ad1ca;
    --sy-on-primary: #0b1a1b;
    --sy-accent: #7fcfc6;
    --sy-accent-soft: #183130;
    --sy-focus: #8ad1ca;
    --sy-track: #2c3842;
    --sy-mark: #57501a;
    --sy-mark-ink: #fff6c9;
    --sy-pending: #7d8b96;
    --sy-ok: #9ccf95;
    --sy-ok-soft: #1a2b1c;
    --sy-warn: #e9c46a;
    --sy-warn-soft: #2c2410;
    --sy-danger: #ffa59b;
    --sy-danger-soft: #3a1d1b;
    --sy-info: #9cc4ea;
    --sy-info-soft: #172839;
    --sy-def-bar: #6fa5d6;
    --sy-def-tint: #152434;
    --sy-def-ink: #a9cdf0;
    --sy-ex-bar: #7fbf74;
    --sy-ex-tint: #16271a;
    --sy-ex-ink: #b3dca9;
    --sy-tip-bar: #d9bb45;
    --sy-tip-tint: #36300f;
    --sy-tip-ink: #f4df8c;
    --sy-err-bar: #ec8a7b;
    --sy-err-tint: #331a1a;
    --sy-err-ink: #ffbcb2;
    --sy-rem-bar: #8fa0af;
    --sy-rem-tint: #1f2831;
    --sy-rem-ink: #c5d1db;
    --sy-invert: #e6ecef;
    --sy-invert-ink: #141b21;
    --sy-invert-muted: #3c4852;
    --sy-invert-hair: #c2ccd2;
    --sy-band: #0b1014;
    --sy-band-ink: #eef2f4;
    --sy-band-muted: #a9b5bd;
    --sy-band-line: #5f6d78;
    --sy-band-btn: var(--sy-primary);
    --sy-band-btn-ink: var(--sy-on-primary);
    --sy-scrim: rgba(4, 7, 9, 0.7);
    --sy-cert-paper: #f4f1e6;
    --sy-cert-ink: #18222b;
    --sy-cert-muted: #3c4852;
    --sy-cert-line: #bdb38f;
    --sy-cert-seal: #1e5b5e;
    --sy-cover-1: #215c5f;
    --sy-cover-1-ink: #f4f7f2;
    --sy-cover-2: #d9a93f;
    --sy-cover-2-ink: #221900;
    --sy-cover-3: #87b4de;
    --sy-cover-3-ink: #0c1d2e;
    --sy-cover-line: rgba(255, 255, 255, 0.22);
    --sy-avatar-1: #1f3a3a;
    --sy-avatar-1-ink: #b9e2dc;
    --sy-avatar-2: #3a3014;
    --sy-avatar-2-ink: #f2d98e;
    --sy-avatar-3: #1d2f45;
    --sy-avatar-3-ink: #b8d4f2;
    --sy-avatar-4: #3c231e;
    --sy-avatar-4-ink: #f6c3b6;
    --sy-viz-1: #4fa7a0;
    --sy-viz-2: #f0c75a;
    --sy-viz-3: #6aa6e6;
    --sy-viz-4: #e07a5f;
    --sy-viz-5: #a6d888;
    --sy-viz-6: #93a4b3;
    --sy-seq-1: #1d3433;
    --sy-seq-2: #24544f;
    --sy-seq-3: #33807a;
    --sy-seq-4: #5fb0a9;
    --sy-seq-5: #a6ded7;
    --sy-div-1: #e07a5f;
    --sy-div-2: #8f4a3b;
    --sy-div-3: #2c3842;
    --sy-div-4: #33807a;
    --sy-div-5: #6cc0b8;
    --sy-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
    --sy-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 32px -18px rgba(0, 0, 0, 0.7);
    --sy-shadow-pop: 0 4px 10px rgba(0, 0, 0, 0.35), 0 28px 56px -20px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --sy-paper: #11171c;
  --sy-surface: #172028;
  --sy-desk: #1d2830;
  --sy-desk-strong: #24313a;
  --sy-ink: #eef2f4;
  --sy-body: #d3dbe0;
  --sy-muted: #a9b5bd;
  --sy-hair: #2a3640;
  --sy-hair-strong: #3a4853;
  --sy-control: #6f7d88;
  --sy-rule: #19222a;
  --sy-primary: #6cc0b8;
  --sy-primary-hover: #8ad1ca;
  --sy-on-primary: #0b1a1b;
  --sy-accent: #7fcfc6;
  --sy-accent-soft: #183130;
  --sy-focus: #8ad1ca;
  --sy-track: #2c3842;
  --sy-mark: #57501a;
  --sy-mark-ink: #fff6c9;
  --sy-pending: #7d8b96;
  --sy-ok: #9ccf95;
  --sy-ok-soft: #1a2b1c;
  --sy-warn: #e9c46a;
  --sy-warn-soft: #2c2410;
  --sy-danger: #ffa59b;
  --sy-danger-soft: #3a1d1b;
  --sy-info: #9cc4ea;
  --sy-info-soft: #172839;
  --sy-def-bar: #6fa5d6;
  --sy-def-tint: #152434;
  --sy-def-ink: #a9cdf0;
  --sy-ex-bar: #7fbf74;
  --sy-ex-tint: #16271a;
  --sy-ex-ink: #b3dca9;
  --sy-tip-bar: #d9bb45;
  --sy-tip-tint: #36300f;
  --sy-tip-ink: #f4df8c;
  --sy-err-bar: #ec8a7b;
  --sy-err-tint: #331a1a;
  --sy-err-ink: #ffbcb2;
  --sy-rem-bar: #8fa0af;
  --sy-rem-tint: #1f2831;
  --sy-rem-ink: #c5d1db;
  --sy-invert: #e6ecef;
  --sy-invert-ink: #141b21;
  --sy-invert-muted: #3c4852;
  --sy-invert-hair: #c2ccd2;
  --sy-band: #0b1014;
  --sy-band-ink: #eef2f4;
  --sy-band-muted: #a9b5bd;
  --sy-band-line: #5f6d78;
  --sy-band-btn: var(--sy-primary);
  --sy-band-btn-ink: var(--sy-on-primary);
  --sy-scrim: rgba(4, 7, 9, 0.7);
  --sy-cert-paper: #f4f1e6;
  --sy-cert-ink: #18222b;
  --sy-cert-muted: #3c4852;
  --sy-cert-line: #bdb38f;
  --sy-cert-seal: #1e5b5e;
  --sy-cover-1: #215c5f;
  --sy-cover-1-ink: #f4f7f2;
  --sy-cover-2: #d9a93f;
  --sy-cover-2-ink: #221900;
  --sy-cover-3: #87b4de;
  --sy-cover-3-ink: #0c1d2e;
  --sy-cover-line: rgba(255, 255, 255, 0.22);
  --sy-avatar-1: #1f3a3a;
  --sy-avatar-1-ink: #b9e2dc;
  --sy-avatar-2: #3a3014;
  --sy-avatar-2-ink: #f2d98e;
  --sy-avatar-3: #1d2f45;
  --sy-avatar-3-ink: #b8d4f2;
  --sy-avatar-4: #3c231e;
  --sy-avatar-4-ink: #f6c3b6;
  --sy-viz-1: #4fa7a0;
  --sy-viz-2: #f0c75a;
  --sy-viz-3: #6aa6e6;
  --sy-viz-4: #e07a5f;
  --sy-viz-5: #a6d888;
  --sy-viz-6: #93a4b3;
  --sy-seq-1: #1d3433;
  --sy-seq-2: #24544f;
  --sy-seq-3: #33807a;
  --sy-seq-4: #5fb0a9;
  --sy-seq-5: #a6ded7;
  --sy-div-1: #e07a5f;
  --sy-div-2: #8f4a3b;
  --sy-div-3: #2c3842;
  --sy-div-4: #33807a;
  --sy-div-5: #6cc0b8;
  --sy-shadow-card: 0 1px 0 rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  --sy-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 32px -18px rgba(0, 0, 0, 0.7);
  --sy-shadow-pop: 0 4px 10px rgba(0, 0, 0, 0.35), 0 28px 56px -20px rgba(0, 0, 0, 0.8);
}

/* Accent preset: sky. A clear sky-blue primary for actions, links, focus and progress. */
:root[data-accent="sky"] {
  --sy-primary: #1f68ab;
  --sy-primary-hover: #18548b;
  --sy-on-primary: #ffffff;
  --sy-accent: #144b7f;
  --sy-accent-soft: #e2edf8;
  --sy-focus: #1f68ab;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="sky"]:not([data-theme="light"]) {
    --sy-primary: #7db6ec;
    --sy-primary-hover: #9cc8f2;
    --sy-on-primary: #0a1826;
    --sy-accent: #8fc2f2;
    --sy-accent-soft: #172a3d;
    --sy-focus: #9cc8f2;
  }
}

:root[data-accent="sky"][data-theme="dark"] {
  --sy-primary: #7db6ec;
  --sy-primary-hover: #9cc8f2;
  --sy-on-primary: #0a1826;
  --sy-accent: #8fc2f2;
  --sy-accent-soft: #172a3d;
  --sy-focus: #9cc8f2;
}

/* Accent preset: forest. A schoolyard green for actions, links, focus and progress. */
:root[data-accent="forest"] {
  --sy-primary: #2d6a39;
  --sy-primary-hover: #23542d;
  --sy-on-primary: #ffffff;
  --sy-accent: #22552d;
  --sy-accent-soft: #e3eee2;
  --sy-focus: #2d6a39;
}

@media (prefers-color-scheme: dark) {
  :root[data-accent="forest"]:not([data-theme="light"]) {
    --sy-primary: #86c98f;
    --sy-primary-hover: #a1d8a8;
    --sy-on-primary: #0b1a0e;
    --sy-accent: #97d49f;
    --sy-accent-soft: #1a2e1d;
    --sy-focus: #a1d8a8;
  }
}

:root[data-accent="forest"][data-theme="dark"] {
  --sy-primary: #86c98f;
  --sy-primary-hover: #a1d8a8;
  --sy-on-primary: #0b1a0e;
  --sy-accent: #97d49f;
  --sy-accent-soft: #1a2e1d;
  --sy-focus: #a1d8a8;
}