/* VeraKid design tokens — warm, calm, professional preschool OS.
   Palette: moss green primary, amber accent, warm-hued neutrals.
   Routine colors are ONLY used inside day tiles / timeline, never for navigation. */

:root {
  color-scheme: light;
  /* grounds */
  --bg: #F8F6F1;            /* warm paper */
  --bg-elev: #FFFFFF;       /* cards */
  --bg-sunken: #EFECE5;     /* wells, inputs on cards */
  --bg-hover: #F1EEE8;
  --ink: #1E1C19;
  --ink-2: #4F4B45;
  --ink-3: #6B665F;         /* ≥4.5:1 on every ground (WCAG AA for small muted text) */
  --ink-4: #7B766E;         /* placeholders/disabled: still ≥4.5:1 on white */
  --line: #E4DFD6;
  --line-strong: #CFC8BC;

  /* brand */
  --primary: #37704F;       /* moss green, ≥4.5:1 as link text on --bg-sunken and ≥5.8:1 under white text */
  --primary-ink: #FFFFFF;
  --primary-soft: #E3EFE7;
  --primary-soft-ink: #2C5C42;
  --accent: #E8A33D;
  --accent-ink: #2B1E06;
  --accent-soft: #FBEFD9;
  --accent-soft-ink: #83602C; /* text on accent-soft */

  /* semantic */
  --success: #23744A;   --success-soft: #DDF1E4;
  --warning: #C98A0B;   --warning-soft: #FBF0D5;   --warning-ink: #83602C; /* text on warning-soft */
  --danger: #B0390A;    --danger-soft: #FBE3D8;
  --info: #1F56C4;      --info-soft: #E1EAFD;

  /* routine (day tiles / timeline only) */
  /* *-ink = text colour on the matching *-soft ground (the vivid hue alone is too light for small text) */
  --r-meal: #E07A5F;    --r-meal-soft: #FBE6E0;   --r-meal-ink: #925443;
  --r-nap: #6C7BD9;     --r-nap-soft: #E6E8F9;    --r-nap-ink: #4D558C;
  --r-toilet: #4FA3A5;  --r-toilet-soft: #DFF1F1; --r-toilet-ink: #3B6D6D;
  --r-mood: #E8A33D;    --r-mood-soft: #FBEFD9;   --r-mood-ink: #83602C;
  --r-activity: #37704F;--r-activity-soft: #E3EFE7;
  --r-health: #B0390A;  --r-health-soft: #FBE3D8;
  --r-arrival: #6B665F; --r-arrival-soft: #EEEBE5;

  /* class colors (Papatya / Gökkuşağı / Yıldız) */
  --c-papatya: #E8A33D; --c-gokkusagi: #5B6BCF; --c-yildiz: #2C7C7E; /* white initials read on the last two; papatya uses dark ink */

  /* type */
  --font-display: "Bricolage Grotesque", "Nunito Sans", system-ui, sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;

  /* shape */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(30,28,25,.06);
  --shadow-md: 0 4px 14px rgba(30,28,25,.08);
  --shadow-lg: 0 12px 32px rgba(30,28,25,.14);

  /* layout */
  --gutter: 16px;
  --touch: 44px;
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --phone-w: 390px;
  --phone-h: 844px;
}