/*
  Design tokens. Components in app.css read ONLY these variables; a theme is a block
  that overrides tokens under :root[data-theme="<id>"] (listed in app/config/theme-catalog.js).
  Display rules baked in (docs/UI-DESIGN-SYSTEM.md):
  - additive display: pure black is transparent negative space, not a surface;
  - visible surfaces stay in the dark RGB ~18–55 range, filled, no hairlines;
  - functional text ≥ 14px, body 16px, primary content/controls 20–24px+.
*/
:root {
  /* Color: text */
  --color-text: #ffffff;
  --color-text-muted: rgba(245, 250, 255, 0.9);
  --color-text-quiet: rgba(230, 243, 255, 0.76);
  --color-accent: #2388f5;
  --color-accent-soft: #86c8ff;
  --color-good: #66d8b3;
  --color-warn: #ffc76a;
  --color-bad: #ff8d9a;

  /* Color: stage */
  --color-stage: #000000;
  --color-glow-a: rgba(43, 128, 224, 0.24);
  --color-glow-b: rgba(80, 133, 218, 0.15);

  /* Surfaces (filled gradients, top → bottom) */
  --surface-panel-top: rgba(89, 133, 175, 0.46);
  --surface-panel-bottom: rgba(26, 48, 77, 0.78);
  --surface-control-top: rgba(75, 112, 151, 0.72);
  --surface-control-bottom: rgba(31, 58, 89, 0.82);
  --surface-action-top: #2d82ca;
  --surface-action-bottom: #155ca8;
  --surface-danger-top: rgba(150, 52, 70, 0.9);
  --surface-danger-bottom: rgba(92, 27, 42, 0.92);
  --surface-field-top: rgba(74, 111, 149, 0.72);
  --surface-field-bottom: rgba(27, 53, 84, 0.84);

  /* Focus: the selected state must read without color alone (border + glow + scale) */
  --focus-top: rgba(35, 107, 176, 0.94);
  --focus-bottom: rgba(18, 65, 125, 0.96);
  --focus-border: #86c8ff;
  --focus-ring: rgba(101, 181, 255, 0.42);
  --focus-scale: 1.03;

  /* Shape */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --border-width: 2px;
  --shadow-raised: 0 18px 42px rgba(5, 13, 25, 0.3);

  /* Space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Type */
  --font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
  --font-size-caption: 14px;
  --font-size-body: 16px;
  --font-size-control: 22px;
  --font-size-title: 32px;
  --font-size-display: 40px;
  --line-height-tight: 1.15;
  --line-height-body: 1.35;

  /* Motion (30 FPS target; durations are multiples of ~33ms) */
  --motion-fast: 150ms;
  --motion-base: 230ms;
  --motion-slow: 380ms;
  --motion-ease-out: cubic-bezier(0.22, 0.75, 0.3, 1);
  --motion-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-nudge-distance: 7px;

  /* Game: crops. Bright and saturated (they glow on the additive display); each crop also
     has its own silhouette, so color is never the only cue. */
  --crop-tomato: #ff5a4f;
  --crop-tomato-dark: #c42638;
  --crop-carrot: #ff9b2f;
  --crop-carrot-dark: #b8520c;
  --crop-corn: #ffd94d;
  --crop-corn-dark: #d99a12;
  --crop-lettuce: #86e45c;
  --crop-lettuce-light: #d2f8ae;
  --crop-lettuce-dark: #3c9437;
  --crop-eggplant: #b070ff;
  --crop-eggplant-dark: #6d36c2;
  --crop-berry: #5aa2ff;
  --crop-berry-dark: #23408c;
  --crop-leaf: #46c35c;
  --crop-shine: rgba(255, 255, 255, 0.62);

  /* Game: specials (gold tools with ink outlines on a violet badge, sunflower seeds) and their
     effects (rocket beam, bomb blast). Effects are one-shot, never looped. */
  --special-gold: #ffcc33;
  --special-gold-dark: #e8890c;
  --special-ivory: #fff8e1;
  --special-ink: rgb(46, 30, 18);
  --special-spark: #fff3a0;
  --special-seed: #8a5520;
  --special-badge-top: rgb(118, 66, 178);
  --special-badge-bottom: rgb(50, 24, 90);
  --special-ring: #ffd84d;
  --special-glow: rgba(255, 210, 80, 0.45);
  --beam-core: rgba(255, 246, 214, 0.95);
  --beam-glow: rgba(255, 196, 80, 0.55);
  --beam-edge: rgba(255, 196, 80, 0);
  --blast-core: rgba(255, 236, 170, 0.85);
  --blast-mid: rgba(255, 150, 60, 0.5);
  --blast-edge: rgba(255, 120, 40, 0);

  /* Game: board (soil plots, raised dark surfaces), picked crop, coins */
  --board-cell-a: rgb(54, 45, 30);
  --board-cell-b: rgb(41, 34, 23);
  --board-frame-top: rgb(110, 84, 46);
  --board-frame-bottom: rgb(72, 54, 30);
  --select-border: #ffd166;
  --select-ring: rgba(255, 209, 102, 0.45);
  --coin-top: #ffe684;
  --coin-bottom: #e39a17;
  --coin-rim: #fff4c4;

  /* Layout: MRBD stage and safe area */
  --stage-size: 600px;
  --safe-bottom: 576px; /* y=576..600 belongs to the system bar */
  --safe-inset: 32px;
}

:root[data-theme="aurora"] {
  --color-accent: #25efff;
  --color-accent-soft: #f8fdff;
  --color-text-muted: #d8e8ff;
  --color-text-quiet: #aebfdf;
  --color-good: #79f2d5;
  --color-glow-a: rgba(193, 72, 255, 0.22);
  --color-glow-b: rgba(37, 239, 255, 0.14);
  --surface-panel-top: rgba(102, 181, 255, 0.3);
  --surface-panel-bottom: rgba(15, 43, 118, 0.32);
  --surface-control-top: rgba(100, 177, 255, 0.3);
  --surface-control-bottom: rgba(37, 88, 177, 0.22);
  --surface-action-top: #20e9ef;
  --surface-action-bottom: #1268f4;
  --focus-top: rgba(47, 160, 255, 0.58);
  --focus-bottom: rgba(63, 59, 220, 0.52);
  --focus-border: #f4feff;
  --focus-ring: rgba(37, 239, 255, 0.5);
}

:root[data-theme="minimal"] {
  --color-accent: #e8eef6;
  --color-accent-soft: #ffffff;
  --color-glow-a: rgba(255, 255, 255, 0.05);
  --color-glow-b: rgba(255, 255, 255, 0.03);
  --surface-panel-top: rgba(46, 50, 56, 0.9);
  --surface-panel-bottom: rgba(28, 30, 34, 0.92);
  --surface-control-top: rgba(52, 55, 60, 0.92);
  --surface-control-bottom: rgba(34, 36, 40, 0.94);
  --surface-action-top: #5a6270;
  --surface-action-bottom: #3a4049;
  --focus-top: rgba(92, 100, 112, 0.96);
  --focus-bottom: rgba(60, 66, 76, 0.98);
  --focus-border: #ffffff;
  --focus-ring: rgba(255, 255, 255, 0.35);
}

/* Reduced motion: the system setting or the in-app preference. */
:root[data-motion="reduced"] {
  --motion-fast: 1ms;
  --motion-base: 1ms;
  --motion-slow: 1ms;
  --motion-nudge-distance: 0px;
  --focus-scale: 1;
}