/* ============================================================================
   Daily Learning — design tokens
   Reused from syafiqiskandar30/daily-learning: src/styles.css `:root` and
   DESIGN-SYSTEM.md. Names are unchanged so existing app CSS keeps working;
   everything marked ADDED is new in this package.

   Type first, then colour, then space, then motion — in the order you need
   them while designing.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- fonts ---------------------------------------------------------- */
  /* The app's stack. Rounded first, then the platform sans. */
  --font-family-ui: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-medium: 500;   /* regular interface text */
  --font-strong: 600;   /* emphasis, action labels */

  /* ---- type roles -----------------------------------------------------
     Semantic names, never raw sizes. A component asks for the role. */
  --type-brand: 20px;
  --type-page-heading: clamp(27px, 7.4vw, 30px);
  --type-simple-heading: 28px;
  --type-section-heading: 21px;
  --type-card-title: 22px;
  --type-course-title: 17px;
  --type-profile-course-title: 19px;
  --type-question: clamp(21px, 5.8vw, 23px);
  --type-body: 15px;
  --type-lesson-description: 16px;
  --type-supporting: 14px;
  --type-course-card-description: 15px;
  --type-course-description: 13px;
  --type-action: 18px;
  --type-action-compact: 17px;
  --type-label: 13px;
  --type-metadata: 12px;
  --type-tab-label: 11px;
  --type-avatar-initial: 18px;
  --type-stat-value: 28px;

  --tracking-brand: -0.01em;
  --tracking-page-heading: -0.025em;
  --tracking-section-heading: -0.02em;
  --tracking-course-title: -0.01em;
  --tracking-lesson-title: 0.01em;
  --tracking-description: 0.01em;
  --tracking-eyebrow: 0.015em;
  --tracking-action-label: 0.01em;
  --tracking-profile-course-title: -0.015em;
  --tracking-stat-value: -0.04em;
  --tracking-body: normal;

  --leading-body: 1.45;
  --leading-heading: 1.1;
  --leading-section-heading: 1.15;
  --leading-lesson-title: 1.16;
  --leading-compact: 1.2;
  --leading-compact-copy: 1.3;
  --leading-supporting: 1.4;
  --leading-caption: 1.25;
  --leading-relaxed: 1.5;
  --leading-stat-value: 1;

  --wrap-heading: balance;
  --numeric-profile-stat: tabular-nums;

  /* ---- colour ---------------------------------------------------------
     Warm canvas, ink text, one orange accent. Illustrations get their own
     sticker palette; nothing else is tinted. */
  --color-canvas: #fffdfa;
  --color-ink: #172236;
  --color-muted: #6b7482;
  --color-muted-strong: #5f6877;
  --color-answer-text: #3f4856;

  --color-primary: #f04b28;          /* shapes, rings, active marks */
  --color-primary-hover: #da3e20;
  --color-primary-ink: #a83920;      /* orange text on pale peach */
  --color-primary-soft: #fde8df;
  --color-progress-current: #f6c9b9;

  --color-secondary: #fce8e1;
  --color-secondary-hover: #f7dcd1;

  --color-course-description: #77808f;   /* 3.93:1 on canvas — large text only */
  --color-lesson-description: #828b99;    /* 3.39:1 on canvas — large text only */

  /* ADDED: accessible descriptions.
     --color-course-description (#77808f, 3.93:1) and --color-lesson-description
     (#828b99, 3.39:1) both fail WCAG 2 AA for normal text on the canvas. The
     originals stay for large or decorative use; these two carry the same hue,
     four to eight points darker, and measure 4.52:1. */
  --color-course-description-aa: #6d7684;
  --color-lesson-description-aa: #6d7685;

  --color-lemon: #fff0c3;            /* streak + progress surfaces */
  --color-gold-ink: #a35a18;
  --color-pink: #f5c1ce;
  --color-green: #bce9c9;
  --color-sticker-blue: #55b8e8;
  --color-sticker-coral: #f2735f;
  --color-sticker-yellow: #ffd34e;

  --color-border: #f1e6de;
  --color-border-subtle: #f5eee9;
  --color-sticky-divider: #ead8cc;
  --color-surface: #fff2ec;
  --color-feedback-surface: #faf8f6;
  --color-white: #ffffff;
  --color-feedback-success: #23633c;
  --color-feedback-copy: #66707f;

  /* ADDED: the action label pair, measured.
     White on --color-primary (#f04b28) is 3.66:1 and fails WCAG 2 AA for
     normal text — the finding recorded in DESIGN-SYSTEM.md. Filled actions
     that carry a word therefore use --color-action-strong, which reaches
     4.5:1+ with white; --color-primary stays for shapes, rings and marks
     where no text sits on it. */
  --color-action-strong: #c9340f;
  --color-action-strong-hover: #b02d0c;
  --color-action-ink: #ffffff;

  /* ADDED: semantic aliases, so a component asks for a role not a hue */
  --color-focus: #a83920;
  --color-danger: #b3261e;
  --color-danger-soft: #fdeceb;
  --color-success: #23633c;
  --color-success-soft: #e7f4ec;
  --color-info: #1f4e79;
  --color-info-soft: #e9f1f8;

  /* ---- space ---------------------------------------------------------- */
  --space-copy-tight: 4px;
  --space-copy-small: 6px;
  --space-copy-helper: 7px;
  --space-copy-roomy: 9px;

  /* ADDED: the 4/8 layout scale the app uses implicitly (24px page inset,
     20px content inset, 12/16 gaps). Named so screens stop inventing numbers. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  --page-inset: 24px;
  --page-content-top-inset: max(27px, env(safe-area-inset-top, 0px));
  --course-content-inset: 20px;
  --course-card-padding: 11px;
  --size-lesson-header-control: 44px;
  --space-header-to-illustration: 12px;

  /* ---- shape ---------------------------------------------------------- */
  --radius-surface: 12px;
  --radius-card: 24px;     /* lesson cards, per DESIGN-SYSTEM.md */
  --radius-pill: 999px;

  /* ---- layout --------------------------------------------------------- */
  --app-shell-max-width: 430px;   /* phones */
  --app-shell-max-width-wide: 600px;
  --illustration-max-width: 24rem;
  --aspect-course-cover: 3 / 2;
  --tab-bar-height: 64px;

  /* ---- motion --------------------------------------------------------- */
  --motion-feedback-enter-duration: 380ms;
  --motion-feedback-enter-distance: 52px;
  --motion-feedback-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* ADDED: the rest of the scale, from transitions-dev tokens */
  --motion-press: 120ms;
  --motion-quick: 150ms;
  --motion-fast: 250ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---- ADDED: elevation ----------------------------------------------
     Layered transparent shadows; the app is mostly flat, so these are for
     menus, sheets and the sticky bars only. */
  --shadow-1: 0 1px 2px rgb(23 34 54 / 0.06), 0 2px 6px rgb(23 34 54 / 0.05);
  --shadow-2: 0 2px 4px rgb(23 34 54 / 0.07), 0 8px 20px rgb(23 34 54 / 0.07);
}

/* ADDED: wide screens grow the shell instead of stretching a phone column. */
@media (min-width: 768px) {
  :root { --app-shell-max-width: 600px; }
}

/* ADDED: dark scheme, tuned rather than inverted — the canvas goes warm
   charcoal, the orange lifts in lightness so it still reads on dark.
   Applied by [data-theme="dark"]; system.js sets that from the OS preference
   on load, so prefers-color-scheme still works without duplication here. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #16171b;
  --color-ink: #f4f1ec;
  --color-muted: #a8aeb9;
  --color-muted-strong: #bcc2cc;
  --color-answer-text: #d7dbe2;
  --color-primary: #ff7a5c;
  --color-primary-hover: #ff8f75;
  --color-primary-ink: #ffb9a5;
  --color-primary-soft: #33201b;
  --color-progress-current: #6b3a2c;
  --color-secondary: #2a211d;
  --color-secondary-hover: #352a24;
  --color-course-description: #a1a8b4;
  --color-lesson-description: #9aa1ad;
  --color-lemon: #3a2f18;
  --color-gold-ink: #f0c07a;
  --color-border: #2c2a27;
  --color-border-subtle: #232120;
  --color-sticky-divider: #352b25;
  --color-surface: #201b18;
  --color-feedback-surface: #1c1b1a;
  --color-white: #202022;
  --color-feedback-success: #7fd7a0;
  --color-feedback-copy: #a8aeb9;
  --color-action-strong: #ff7a5c;
  --color-action-strong-hover: #ff9377;
  --color-action-ink: #1a1210;
  --color-focus: #ffb9a5;
  --color-danger: #ff8a80;
  --color-danger-soft: #3a1f1e;
  --color-success: #7fd7a0;
  --color-success-soft: #1b2e24;
  --color-info: #9dc6f0;
  --color-info-soft: #1b2530;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.5), 0 8px 20px rgb(0 0 0 / 0.45);
}