/*
 * NosyDoodle design tokens (Phase 0.5 draft for Jason's review)
 *
 * One source of truth for color, type, spacing, shape, and motion.
 * Every template and every future `packages/ui` component reads these
 * custom properties; nothing hard-codes a hex value.
 *
 * Brand hexes are sampled from Maizy's drafts (D-042). See
 * maizy/style-guide.md for how they were measured and design/README.md for
 * the WCAG 2.2 contrast table.
 *
 * Fonts (D-039), loaded by each page from Google Fonts:
 *   Fredoka (display, Maizy's speech)  +  Nunito Sans (everything read)
 */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------ */
  /* Color: raw palette                                                 */
  /* ------------------------------------------------------------------ */

  /* Ink: warm charcoal, never pure black. Derived from Maizy's outline
     (measured #151111), lifted so body text reads softer than #000. */
  --ink-900: #2b2421; /* body text, UI outlines, icons */
  --ink-700: #4d4440; /* secondary text */
  --ink-500: #6b6058; /* muted text, meta (min 4.5:1 on every neutral) */
  --ink-300: #8f8378; /* non-text UI marks: chart axes, disabled outlines (3:1 on white) */

  /* Maizy's own colors, as drawn. Art only, plus the cream stage. */
  --maizy-outline: #151111;
  --maizy-coat: #fdf1dc;
  --maizy-coat-shade: #f3dcbc;
  --maizy-eye: #49352b;
  --maizy-nose: #3f312a;
  --maizy-tongue: #fda39e;
  --maizy-collar: #fc8c7d;

  /* Primary: logo yellow, sampled from maizy-logo-yellow.png (#F9C519). */
  --yellow-50: #fffbeb;
  --yellow-100: #fef3c7;
  --yellow-300: #ffd84d; /* hover */
  --yellow-500: #f9c519; /* the brand yellow */
  --yellow-600: #e8b30c; /* pressed */

  /* Secondary: collar coral, sampled from maizy-hero.png (#FC8C7D). */
  --coral-50: #fff4f1;
  --coral-100: #ffe8e3;
  --coral-300: #fda597; /* hover */
  --coral-400: #fc8c7d; /* the collar */
  --coral-500: #f07463; /* pressed */
  --coral-700: #a8402f; /* coral as text, 5.9:1 on paper */

  /* Reserved alert green (D-040). ONLY when a watch fires. */
  --alert-100: #dcfbe6;
  --alert-500: #2bd86a;
  --alert-800: #0b6b34;

  /* Semantic success: quiet teal. Deliberately not the alert green. */
  --success-100: #e1f3f4;
  --success-700: #0f6e78;

  /* Semantic error: brick red. Deeper and bluer-shadowed than coral so a
     secondary button never reads as a danger state. */
  --error-100: #fdecea;
  --error-200: #f9dcd8;
  --error-700: #b42318;

  /* Warm neutrals */
  --paper: #fdfbf7; /* page canvas */
  --surface: #ffffff; /* cards, inputs, menus */
  --sand-100: #f6f1e8; /* quiet fills, table stripes */
  --sand-200: #ede8df; /* surfaces, pressed ghost */
  --sand-300: #d9d0c1; /* hairlines and dividers (decorative only) */

  /* ------------------------------------------------------------------ */
  /* Color: roles (components use these, not the raw palette)          */
  /* ------------------------------------------------------------------ */
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-surface-quiet: var(--sand-100);
  --color-stage: var(--maizy-coat); /* the cream panel Maizy stands on */
  --color-text: var(--ink-900);
  --color-text-soft: var(--ink-700);
  --color-text-muted: var(--ink-500);
  --color-line: var(--ink-900); /* the "Maizy line" on controls */
  --color-hairline: var(--sand-300);

  --color-primary: var(--yellow-500);
  --color-primary-hover: var(--yellow-300);
  --color-primary-pressed: var(--yellow-600);
  --color-primary-tint: var(--yellow-100);
  --color-on-primary: var(--ink-900);

  --color-secondary: var(--coral-400);
  --color-secondary-pressed: var(--coral-500);
  --color-secondary-tint: var(--coral-100);
  --color-secondary-text: var(--coral-700);
  --color-on-secondary: var(--ink-900);

  --color-alert: var(--alert-500);
  --color-alert-tint: var(--alert-100);
  --color-alert-text: var(--alert-800);
  --color-on-alert: var(--ink-900);

  --color-success: var(--success-700);
  --color-success-tint: var(--success-100);
  --color-error: var(--error-700);
  --color-error-tint: var(--error-100);

  --color-focus: var(--ink-900);
  --color-disabled-bg: var(--sand-200);
  --color-disabled-text: var(--ink-500);
  --color-disabled-line: var(--ink-300);

  /* ------------------------------------------------------------------ */
  /* Type                                                               */
  /* ------------------------------------------------------------------ */
  --font-display:
    "Fredoka", "Nunito Sans", ui-rounded, "Arial Rounded MT Bold", system-ui,
    sans-serif;
  --font-body:
    "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* Mobile-first fluid scale (1.25 ratio at 16px, widening on large screens) */
  --text-xs: 0.8125rem; /* 13px meta, captions */
  --text-sm: 0.875rem; /* 14px labels, helper text */
  --text-base: 1rem; /* 16px body */
  --text-md: 1.125rem; /* 18px lead body, Maizy's speech */
  --text-lg: 1.3125rem; /* 21px card titles */
  --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); /* 24-30 section titles */
  --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem); /* 30-40 page titles */
  --text-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem); /* 36-60 landing hero */
  --text-price: clamp(2.25rem, 1.9rem + 1.6vw, 3rem); /* the big number */

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --tracking-display: -0.01em;
  --tracking-caps: 0.06em;

  /* ------------------------------------------------------------------ */
  /* Space (4px base)                                                   */
  /* ------------------------------------------------------------------ */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem; /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem; /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem; /* 24 */
  --space-8: 2rem; /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem; /* 48 */
  --space-16: 4rem; /* 64 */
  --space-20: 5rem; /* 80 */
  --space-24: 6rem; /* 96 */

  --gutter: var(--space-4); /* 16 on phones */
  --content-max: 72rem; /* 1152px app and marketing container */
  --reading-max: 38rem; /* comfortable line length */

  /* ------------------------------------------------------------------ */
  /* Shape                                                              */
  /* ------------------------------------------------------------------ */
  /* Line weight: Maizy's outline is ~1.2% of her canvas, so at the
     ~160px size she appears in the UI it renders at ~2px. Controls use the
     same 2px ink line so the interface and the character are one hand. */
  --line-hair: 1px;
  --line: 2px;
  --line-bold: 3px;

  --radius-xs: 6px;
  --radius-sm: 10px; /* chips, small buttons */
  --radius-md: 14px; /* buttons, inputs */
  --radius-lg: 20px; /* cards */
  --radius-xl: 28px; /* speech bubbles, stages */
  --radius-pill: 999px;

  /* Shadows: flat and warm. The "key" shadow is a hard ink ledge under
     pressable things (a physical button feel); cards get a soft lift. */
  --shadow-key: 0 3px 0 0 var(--ink-900);
  --shadow-key-pressed: 0 1px 0 0 var(--ink-900);
  --shadow-card:
    0 1px 0 rgb(43 36 33 / 0.05), 0 10px 24px -14px rgb(43 36 33 / 0.28);
  --shadow-float:
    0 2px 0 rgb(43 36 33 / 0.06), 0 22px 44px -18px rgb(43 36 33 / 0.38);

  /* Focus ring: 3px ink ring, 2px paper gap. Always visible (>= 3:1 on
     every surface in the palette, including yellow, coral and green). */
  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--color-focus);
  --focus-width: 3px;
  --focus-offset: 2px;

  /* Controls */
  --control-h: 3rem; /* 48px: comfortable touch target */
  --control-h-sm: 2.5rem; /* 40px, still above the 24px WCAG 2.2 minimum */

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Layers */
  --z-header: 20;
  --z-menu: 30;
  --z-modal: 40;
  --z-toast: 50;
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-6); /* 24 on tablets */
  }
}

@media (min-width: 64rem) {
  :root {
    --gutter: var(--space-8); /* 32 on laptops and up */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}