/*
  LatihSpeaking design tokens.
  Every screen and component reads these variables only; no raw hex values outside this file.
  Contrast ratios are measured against the ground they are meant for (antislop-human contrast-check.py).
*/
:root {
  /* Ground and surfaces. The page is white; grouped content sits on a cool fill, not on a border or shadow. */
  --c-ground: #ffffff;
  --c-fill: #f4f6fa;          /* grouped rows, cards, Melati's bubbles */
  --c-fill-strong: #e9edf4;   /* pressed rows, segmented track, meter track */
  --c-fill-disabled: #eef1f6;

  /* Ink. Running text is in full ink; muted ink is for secondary notes only. */
  --c-ink: #253051;           /* 12.96:1 on white */
  --c-ink-muted: #546078;     /* 6.32:1 on white, 5.84:1 on fill */
  --c-ink-faint: #5e6779;     /* disabled labels, 5.02:1 on fill-disabled */
  --c-on-dark: #ffffff;

  /* Brand blue: actions, the mic, the learner's own voice (their bubbles), selection. */
  --c-blue: #004beb;          /* white on it 6.55:1 */
  --c-blue-press: #003bb8;
  --c-blue-tint: #eef3fe;     /* blue text on it 5.89:1 */
  --c-blue-soft: #dce6fd;

  /* Jasmine: the accent from Melati's flower. Today's plan, the streak, "your turn". */
  --c-sun: #f2b705;           /* ink on it 7.13:1, fills and icons only */
  --c-sun-tint: #fff1c2;      /* ink on it 11.49:1 */
  --c-sun-ink: #7a5200;       /* warm text on sun-tint 6.13:1 */

  /* Melati's disc: the warm circle she always stands in. */
  --c-melati-disc: #fdeee4;

  /* Feedback roles. Always paired with an icon or a word, never colour alone. */
  --c-good: #2f6b0a;          /* on good-tint 5.85:1 */
  --c-good-tint: #edf6e1;
  --c-bad: #b21c1c;           /* on bad-tint 5.95:1 */
  --c-bad-tint: #fbecec;

  /* Control edge: inputs and outlined controls need 3:1 against white. */
  --c-edge: #848da0;          /* 3.33:1 on white */
  --c-scrim: rgb(28 37 65 / 0.48);
  --c-focus: #004beb;

  /* Type. Plus Jakarta Sans is the shipped app's face (google_fonts), drawn in Jakarta. */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-word: 600 44px/1.05 var(--font);      /* the vocabulary moment */
  --t-display: 800 30px/1.15 var(--font);   /* one per screen */
  --t-title: 700 20px/1.3 var(--font);
  --t-body: 400 16px/1.5 var(--font);
  --t-body-strong: 700 16px/1.5 var(--font);
  --t-small: 400 14px/1.45 var(--font);
  --t-small-strong: 700 14px/1.45 var(--font);
  --t-caption: 600 12px/1.35 var(--font);
  --track-display: -0.025em;
  --track-title: -0.012em;

  /* Space, 4px base. Screen gutter is 20px. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --gutter: 20px;

  /* Radius. Small for inner parts, medium for controls, large for cards, full for circles and chips. */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;

  /* Sizes */
  --tap: 44px;
  --btn-h: 52px;
  --mic: 72px;
  --appbar-h: 52px;
  --tabbar-h: 64px;
  --safe-top: 59px;     /* iPhone 15 status bar + Dynamic Island */
  --safe-bottom: 34px;  /* home indicator */

  /* Elevation, only for things that float above the page. */
  --shadow-float: 0 1px 2px rgb(37 48 81 / 0.08), 0 8px 24px rgb(37 48 81 / 0.12);
  --shadow-thumb: 0 1px 3px rgb(37 48 81 / 0.16);

  /* Motion. Critically damped by default; a sheet gets the iOS curve. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 100ms;
  --dur-fast: 180ms;
  --dur-sheet: 420ms;
}