/*
  Design tokens transcribed from the "Tranquility UI Chrome" design handoff
  (_extracted_ui_kit/design_handoff_tranquility_ui_chrome/README.md).
  Keep this file as the single source of truth for color/spacing/radius/shadow —
  components.css and screen files should only ever reference these variables.
*/
:root {
  /* ---- Color: dark surfaces ---- */
  --c-dark-primary: #134a4a;
  --c-dark-panel-top: #1a5c58;
  --c-dark-panel-bottom: #0f3d3d;
  --c-dark-inner-top: #1f6762;
  --c-dark-inner-bottom: #124745;
  --c-forest: #283e3b;
  --c-night-sky: #24303c;
  --c-screen-ground-top: #16414f;
  --c-screen-ground-bottom: #0a262e;

  /* ---- Color: light surfaces ---- */
  --c-light: #ecedec;
  --c-cream: #cfd7ad;
  --c-sand-deep: #e0ce8f;
  --c-cream-panel-top: #f6f3e2;
  --c-cream-panel-bottom: #e2ddbf;

  /* ---- Color: gold (primary action) ---- */
  --c-gold-light: #f7c364;
  --c-gold-base: #eab03c;
  --c-gold-edge: #b8701c;
  --c-gold-text: #54300a;

  /* ---- Color: red (destructive only) ---- */
  --c-red: #b02a0b;
  --c-red-grad-top: #c9451f;
  --c-red-grad-bottom: #a4250a;
  --c-red-edge: #7a1a06;

  /* ---- Color: aqua (secondary / focus) ---- */
  --c-aqua: #309386;
  --c-aqua-bright: #13a2af;
  --c-aqua-text-1: #8fd4c4;
  --c-aqua-text-2: #8fc5b6;
  --c-aqua-text-3: #a9c4b6;
  --c-aqua-text-4: #7ba396;

  /* ---- Color: purple (mystical only — Compass / Storms / Wild Card) ---- */
  --c-purple: #a763a6;
  --c-purple-deep: #925582;
  --c-purple-grad-top: #bd75bb;
  --c-purple-grad-bottom: #8d5283;
  --c-purple-edge: #6a3a63;
  --c-purple-panel-top: #3f2f55;
  --c-purple-panel-bottom: #221a33;
  --c-purple-text-1: #e6bde4;
  --c-purple-text-2: #d2c3e0;
  --c-purple-text-3: #cfa7cd;
  --c-purple-text-4: #b79bb6;

  /* ---- Typography ---- */
  --font-display: 'Sacramento', cursive;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* ---- Spacing (Organic 1.10x density scale) ---- */
  --sp-1: 4.4px;
  --sp-2: 8.8px;
  --sp-3: 13.2px;
  --sp-4: 17.6px;
  --sp-5: 26.4px;
  --sp-6: 35.2px;
  --screen-pad-y: 26px;
  --screen-pad-x: 30px;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-tile: 7px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 3px rgba(10, 44, 44, .4);
  --shadow-md: 0 3px 10px rgba(13, 53, 53, .24);
  --shadow-lg: 0 12px 32px rgba(13, 53, 53, .28);
  --shadow-panel: 0 12px 32px #0d353547, inset 0 1px 0 #ffffff26;
  --shadow-panel-day: 0 12px 32px #0d353526;
  --shadow-modal: 0 18px 40px #04191973;
  --shadow-modal-purple: 0 24px 60px #02060f99;
  --shadow-btn-rest: 0 5px 14px #0a2c2c4d;
  --shadow-btn-hover: 0 8px 20px #0a2c2c66;
  --shadow-btn-pressed: inset 0 2px 5px #8a520f4d;
  --shadow-card-lift: 0 5px 14px #3a230f80;

  /* ---- Borders ---- */
  --border-hairline: 1.5px solid #ffffff21;
  --border-hairline-visible: 1.5px solid #ffffff2e;
  --border-cream: 1.5px solid #cfd7ad;
  --border-cream-soft: 1.5px solid #cfd7ad80;
  --border-selected: 2px solid #f7c364;
  --halo-selected: 0 0 0 3px #f7c36436;

  /* ---- Asset paths ---- */
  --img-grain: url('../assets/ui/grain.png');
}