/* ============================================================
   Design System: Colors
   Yellow used sparingly as accent (buttons, highlights, dots),
   never as a large fill. Lots of white space; warm + trustworthy.
   ============================================================ */

:root {
  /* ---- Brand accent (yellow) ---- */
  --accent: #FFD400;          /* primary accent — "Sari" = yellow */
  --accent-deep: #F2B600;     /* hover / depth */
  --accent-soft: #FFF3C4;     /* soft tint / icon backgrounds */
  --accent-glow: 255, 212, 0; /* @kind color */ /* rgb triplet for glows: rgba(var(--accent-glow), a) */
  --on-accent: #1A1500;       /* text on yellow */

  /* ---- Ink (text) ---- */
  --ink: #111113;             /* near-black — primary text */
  --ink-2: #5B5B61;           /* secondary text */
  --ink-3: #9A9AA1;           /* tertiary / hints */

  /* ---- Surfaces & lines ---- */
  --line: #ECECEE;            /* hairlines */
  --bg: #FFFFFF;              /* page background */
  --bg-2: #F6F6F4;            /* warm light grey section */
  --card: #FFFFFF;            /* card surface */

  /* ---- Semantic aliases ---- */
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --text-on-accent: var(--on-accent);

  --surface-page: var(--bg);
  --surface-alt: var(--bg-2);
  --surface-card: var(--card);
  --surface-ink: var(--ink);

  --border-hairline: var(--line);
  --border-strong: var(--ink);
  --focus-ring: rgba(var(--accent-glow), .18);
}