/* Tomodachi Plaza — design tokens.
 *
 * This is the only file in the project allowed to contain a literal colour,
 * radius, shadow, duration or font size. Everything else references a token.
 * bin/design-lint.sh enforces that.
 *
 * Contrast ratios in comments are measured against #FFF3CC — the confetti
 * tile's field colour, which is what a visitor actually sees. The tile is
 * opaque, so --bg only ever flashes during load.
 */

:root {
  /* ── Hue anchors ────────────────────────────────────────────────────────
   * Six numbers. Every colour below sits on one of them. A new colour that
   * is not a step on an existing ramp does not get added.
   */
  --h-cream: 42;
  --h-sand: 40;
  --h-gold: 46;
  --h-orange: 36;
  --h-coral: 0;
  --h-leaf: 130;

  /* ── CREAM — surfaces (h 42) ──────────────────────────────────────────
   * Every step is a saturated tint, never a grey. If R=G=B, it is wrong.
   */
  --cream-50:  #FFFDF7;
  --cream-100: #FFFBF2;  /* legacy --surface       */
  --cream-150: #FFF9EE;  /* legacy --bg            */
  --cream-200: #FFF8EB;  /* legacy --surface-warm  */
  --cream-300: #FFF4D6;  /* legacy --golden-light  */
  --cream-350: #FFF0D0;  /* legacy --border-light  */
  --cream-400: #FFF3CC;  /* confetti tile field — the real page background */
  --cream-450: #FFECBA;  /* confetti tile shapes                          */
  --cream-500: #FFE6A8;
  --cream-600: #F9DF96;
  --cream-700: #EEC963;
  --cream-800: #D9A626;

  /* ── SAND — text and structure (h 40) ─────────────────────────────────
   * The neutral spine. Chroma rises at both ends so it never goes grey.
   */
  --sand-100: #F7F0E3;
  --sand-200: #F0E6D0;  /* legacy --surface-border */
  --sand-250: #F0DCA0;  /* legacy --border         */
  --sand-300: #E4D5B4;
  --sand-400: #D1BD94;
  --sand-500: #B8A070;  /* legacy --text-muted — NON-TEXT ONLY from here on */
  --sand-600: #9E8551;
  --sand-700: #7A663D;  /* muted ink — passes on raised, page and sunken alike */
  --sand-800: #65542F;  /* 6.62:1 — secondary ink         */
  --sand-900: #493A12;
  --sand-950: #3D2C00;  /* legacy --text — 12.15:1        */

  /* ── GOLD — primary brand (h 46) ──────────────────────────────────────
   * Read step 500 carefully: it carries dark ink at 8.27:1 and white at
   * 1.63:1. This is a dark-ink colour. It always was.
   */
  --gold-100: #FFF5D6;
  --gold-200: #FFECB3;
  --gold-300: #FED976;  /* legacy --tag-bg      */
  --gold-400: #F0CA50;  /* legacy --tag-border  */
  --gold-500: #FDC200;  /* legacy --golden      */
  --gold-600: #DBA800;
  --gold-700: #C49600;  /* legacy --golden-dark */
  --gold-850: #8B6914;  /* legacy --tag-text    */
  --gold-900: #694D07;
  --gold-950: #3F2E03;  /* ink for use on gold and orange fills */

  /* ── ORANGE — action and heat (h 36, warming as it darkens) ───────────── */
  --orange-100: #FFEDD1;
  --orange-200: #FFDBA4;
  --orange-300: #FFC370;
  --orange-400: #FBA637;
  --orange-500: #FC9600;  /* legacy --orange     */
  --orange-550: #F08A18;  /* legacy --orange-hot */
  --orange-600: #D3770D;
  --orange-700: #B35909;  /* 4.67:1 — first step that carries white */
  --orange-800: #843F0B;
  --orange-900: #57290A;

  /* ── CORAL — alert, destructive, likes (h 0) ──────────────────────────── */
  --coral-100: #FFE0E0;  /* legacy --accent-light */
  --coral-200: #FFC2C2;
  --coral-300: #FF9999;
  --coral-400: #FF6B6B;  /* legacy --accent — surfaces and icons, never text */
  --coral-500: #ED454B;
  --coral-600: #DB2430;  /* 4.72:1 — destructive text */
  --coral-700: #B41D2C;
  --coral-800: #8B1828;

  /* ── LEAF — success (h 130) ───────────────────────────────────────────
   * Replaces the old --success #22C55E, which was Tailwind green-500
   * imported verbatim — the one colour in the old palette not chosen.
   */
  --leaf-100: #D7F4D8;
  --leaf-200: #B0E8B4;
  --leaf-300: #83D88B;
  --leaf-400: #4DC75D;
  --leaf-500: #2BA13F;
  --leaf-600: #228736;  /* white on it: 4.58:1 */
  --leaf-700: #196B2C;  /* 6.39:1 — success text */
  --leaf-800: #145225;

  /* ── Personality colours ──────────────────────────────────────────────
   * Ten, anchored to Nintendo's own 12-colour Mii Maker set, rendered in
   * this site's pastel band. Five are pinned byte-for-byte from the old
   * palette. --text clears AA on all ten (lowest: purple at 4.92:1), so a
   * tile can always carry a label with no per-colour special-casing.
   */
  --p-red:    #F3CFCC;  /*  7.23:1 */
  --p-peach:  #F3DECE;  /*  9.19:1  pinned */
  --p-yellow: #F3EACC;  /* 11.10:1  pinned */
  --p-lime:   #DFE9CE;  /* 10.17:1 */
  --p-green:  #D5E5CD;  /*  9.07:1  pinned */
  --p-mint:   #CCE5DA;  /*  8.93:1 */
  --p-blue:   #D0E5ED;  /*  9.08:1  pinned */
  --p-indigo: #CFD8EC;  /*  7.15:1 */
  --p-purple: #D3C5E1;  /*  4.92:1  pinned */
  --p-pink:   #EED3DE;  /*  7.54:1  pinned */

  /* ── Radii — five, and no sixth ───────────────────────────────────────── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* ── Elevation — three, warm-tinted. Never rgba(0,0,0,·) ──────────────── */
  --e-1: 0 2px 6px rgba(139, 115, 64, 0.06);
  --e-2: 0 8px 24px rgba(139, 115, 64, 0.10);
  --e-3: 0 18px 44px rgba(139, 115, 64, 0.18);
  --ring: 0 0 0 2px var(--cream-100), 0 0 0 5px var(--line-focus);

  /* The toy lip: a hard, un-blurred edge under pressable surfaces that
   * compresses on press. This is what gives the interface physical
   * thickness. Never blurred — that would make it an ordinary shadow. */
  --edge-1: 0 2px 0 0 var(--edge-color);
  --edge-2: 0 4px 0 0 var(--edge-color);
  --edge-3: 0 6px 0 0 var(--edge-color);
  --edge-press: 0 1px 0 0 var(--edge-color);
  --edge-color: var(--sand-300);

  /* ── Type ─────────────────────────────────────────────────────────────
   * Three weights total, matching the Switch UI's own two-weight discipline.
   * Fredoka ships 700 only; Nunito ships 600 (body) and 800 (emphasis).
   */
  --font-display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --font-text: "Nunito", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Eleven steps. 11px is the floor, and only for tracked uppercase labels. */
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.875rem;  /* 14 */
  --fs-md: 1rem;        /* 16 — body floor on mobile */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: 3rem;       /* 48 */
  --fs-5xl: 3.75rem;    /* 60 */

  /* Optical correction, not a size choice: monospace sets larger than Nunito
   * at the same px and shoulders its way out of the line it sits in.
   * Relative, so it holds at every step of the scale. */
  --fs-mono-adjust: 0.9em;

  /* ── Space — 4px base ─────────────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 96px;

  /* ── Motion — three durations, two easings ────────────────────────────
   * Nintendo deliberately removed the wind-up frames from Mii animation
   * because smoothing made it "stop being Mii-like". So --e-bounce is
   * reserved for reward moments; navigation snaps with --e-out.
   */
  --d-1: 120ms;
  --d-2: 220ms;
  --d-3: 420ms;
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --loop-shimmer: 1400ms;
  --loop-spin: 900ms;

  /* ── Borders and layers ───────────────────────────────────────────────── */
  --bw-1: 1.5px;
  --bw-2: 3px;
  --z-base: 0;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-toast: 300;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --page-max: 1360px;
  --gutter: clamp(16px, 4vw, 40px);
  --cell-min: clamp(148px, 15vw, 190px);
  --measure: 68ch;
}

/* ══ Semantic layer ═══════════════════════════════════════════════════════
 * Components reference these, never the primitives above.
 */
:root {
  --surface-page: var(--cream-400);
  --surface-raised: var(--cream-100);
  --surface-sunken: var(--cream-500);  /* must sit below the page, not above it */
  --surface-overlay: var(--cream-50);
  --surface-pressed: var(--cream-500);

  --ink-primary: var(--sand-950);      /* 12.15:1 */
  --ink-secondary: var(--sand-800);    /*  6.62:1 */
  --ink-muted: var(--sand-700);        /*  4.51:1 even on --surface-sunken */
  --ink-faint: var(--sand-500);        /*  2.28:1 — NON-TEXT ONLY */
  /* The one foreground for every filled button, without exception. There is
   * deliberately no white token: as a token, white slipped past the lint rule
   * that bans the literal, which is how 1.63:1 shipped on a CTA once already. */
  --ink-on-brand: var(--gold-950);

  --line-hairline: var(--sand-200);
  --line-default: var(--sand-250);
  --line-strong: var(--sand-600);      /* 3.43:1 — inputs need this, not sand-400 */
  --line-focus: var(--orange-700);     /* 4.67:1 */

  --action-primary: var(--gold-500);
  --action-secondary-bg: var(--cream-100);
  --action-link: var(--orange-700);

  --status-success: var(--leaf-700);
  --status-success-bg: var(--leaf-100);
  --status-danger: var(--coral-600);
  --status-danger-bg: var(--coral-100);
  --status-warn: var(--gold-900);
  --status-warn-bg: var(--gold-100);

  --confetti-field: var(--cream-400);
  --confetti-shape: var(--cream-450);
  --scrim: rgba(61, 44, 0, 0.55);
}

/* Dark mode is deliberately not shipped.
 *
 * Tomodachi Life's own palette contains no dark colours at all, and a Mii is
 * a screenshot that brings its own pale background — light is the canonical
 * design, not a starting point on the way to something else.
 *
 * It stays cheap to add: no component rule in this project knows about a
 * theme, so a night variant is a block of token overrides and nothing more.
 * A previous commit carried three of them if they are ever wanted back.
 */