/* The only source of product colors, typography, spacing and elevations. */
:root {
  color-scheme:light;
  --color-primary:#487be8; --color-primary-action:#3f70d3; --color-primary-hover:#3466ce; --color-primary-soft:#eaf1ff;
  --color-secondary:#5c6d85; --color-accent:#c78732;
  --color-background:#f3f8fc; --color-surface:#fff; --color-surface-subtle:#f5f8fc;
  --color-border:#e1e9f2; --color-border-strong:#cad7e8;
  --color-text:#23334d; --color-text-secondary:#5c6d85; --color-text-muted:#617187;
  --color-success:#248e83; --color-success-action:#207f74; --color-success-soft:#e6f5f1; --color-success-border:#c5e7df;
  --color-warning:#c78732; --color-warning-soft:#fff2dc; --color-warning-border:#ffe5b4;
  --color-error:#b86e6c; --color-error-soft:#fbedea; --color-error-border:#f0cfcc;
  --color-info:#456580; --color-info-soft:#eff4f8; --color-info-border:#dbe5ed;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei UI","Microsoft YaHei","PingFang SC",sans-serif;
  --font-mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px; --text-xl:20px;
  --text-section:24px; --text-page:32px; --text-number:36px;
  --leading-tight:1.25; --leading-normal:1.6; --leading-reading:1.8;
  --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --radius-sm:8px; --radius-control:12px; --radius-card:20px; --radius-feature:28px;
  --shadow-sm:0 4px 18px #31577d06;
  --shadow-card:0 8px 28px #31577d0a;
  --shadow-card-hover:0 12px 32px #31577d12;
  --surface-blue:linear-gradient(135deg,#fafdff,#eaf3ff);
  --surface-mint:linear-gradient(120deg,#f5fcfa,#e4f3ef);
  --surface-peach:linear-gradient(135deg,#fff8f1,#fceddf);
  --color-peach:#d28a54;
  --shadow-overlay:0 16px 48px #172b3a18,0 4px 12px #172b3a0a;
  --focus-ring:0 0 0 3px #487be81c;
  --duration-fast:150ms; --duration-normal:200ms;
  --learning-ink:#23334d; --learning-secondary:#5c6d85; --learning-muted:#7a899f;
  --learning-surface:#f2f8fc; --learning-art:#eef5fc;
  --learning-selected:#487be8; --learning-selected-soft:#eaf1ff;
  --content-width:1440px; --learning-width:1120px; --sidebar-width:216px;
  /* Compatibility names for inline progress and the existing JS templates. */
  --blue:var(--color-primary); --blue-hover:var(--color-primary-hover); --blue-dark:var(--color-primary-hover);
  --blue-soft:var(--color-primary-soft); --blue-border:var(--color-success-border);
  --pale:var(--color-surface-subtle); --navy:var(--color-text); --text:var(--color-text);
  --muted:var(--color-text-muted); --green:var(--color-success); --bg:var(--color-background);
  --line:var(--color-border); --surface:var(--color-surface); --radius:var(--radius-card); --font:var(--font-sans);
}

/* The storybook palette belongs only to authenticated child pages.
   Redeclare compatibility aliases here so they resolve in the child scope. */
body.child-mode {
  color-scheme:light;
  --color-primary:#28796e; --color-primary-action:#256e65; --color-primary-hover:#205e57; --color-primary-soft:#eaf4ed;
  --color-secondary:#5a716c; --color-accent:#b17c2d;
  --color-background:#fbf8f1; --color-surface:#fffefa; --color-surface-subtle:#f4f5ed;
  --color-border:#e4e8dc; --color-border-strong:#c9d8c9;
  --color-text:#2b4442; --color-text-secondary:#5a716c; --color-text-muted:#61746b;
  --color-success:#28796e; --color-success-action:#256e65; --color-success-soft:#eaf4ed; --color-success-border:#c8dfcc;
  --color-warning:#946b2c; --color-warning-soft:#fff3d8; --color-warning-border:#eed9a8;
  --color-error:#b86e6c; --color-error-soft:#fbedea; --color-error-border:#f0cfcc;
  --color-info:#456580; --color-info-soft:#eff4f8; --color-info-border:#dbe5ed;
  --font-sans:ui-rounded,"Microsoft YaHei UI","Microsoft YaHei","PingFang SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-lg:16px; --text-xl:20px;
  --text-section:24px; --text-page:32px; --text-number:36px;
  --leading-tight:1.25; --leading-normal:1.6; --leading-reading:1.8;
  --weight-normal:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --radius-sm:10px; --radius-control:14px; --radius-card:24px; --radius-feature:32px;
  --shadow-sm:0 3px 12px #40594007;
  --shadow-card:0 7px 24px #5b65400a,0 2px 3px #5b654004;
  --shadow-card-hover:0 12px 28px #5b654014;
  --surface-blue:linear-gradient(135deg,#f2f8f9,#e6f0f3);
  --surface-mint:linear-gradient(120deg,#f2f8ed,#e7f0df);
  --surface-peach:linear-gradient(135deg,#fff6e9,#fae8da);
  --color-peach:#bd7254;
  --shadow-overlay:0 16px 48px #172b3a18,0 4px 12px #172b3a0a;
  --focus-ring:0 0 0 3px #28796e26;
  --duration-fast:150ms; --duration-normal:200ms;
  --learning-ink:#2b4442; --learning-secondary:#5a716c; --learning-muted:#61746b;
  --learning-surface:#fbf8f1; --learning-art:#f3f5e9;
  --learning-selected:#28796e; --learning-selected-soft:#eaf4ed;
  --content-width:1440px; --learning-width:1120px; --sidebar-width:216px;
  /* Compatibility names for inline progress and the existing JS templates. */
  --blue:var(--color-primary); --blue-hover:var(--color-primary-hover); --blue-dark:var(--color-primary-hover);
  --blue-soft:var(--color-primary-soft); --blue-border:var(--color-success-border);
  --pale:var(--color-surface-subtle); --navy:var(--color-text); --text:var(--color-text);
  --muted:var(--color-text-muted); --green:var(--color-success); --bg:var(--color-background);
  --line:var(--color-border); --surface:var(--color-surface); --radius:var(--radius-card); --font:var(--font-sans);
}