/* tokens.css — the Scenic design system, as variables.
 *
 * Source: claude.ai/design "Scenic Design System" (tokens/colors, typography, spacing, effects — read
 * 2026-09-28) plus the choices its "Web Planner" page makes for this product: a warm paper canvas, a granite
 * rail, ochre used small. Loaded before app.css; every colour in the planner's stylesheets points here.
 *
 * Rules from the brand book the values encode: Granite + White carry the brand, Ochre is an accent used
 * SMALL (buttons, badges, numbers — never large areas), radii stay tight, shadows restrained, no purple.
 */
:root {
  /* ---- Core brand ---------------------------------------------------------------------------- */
  --scenic-white:        #FFFFFF;
  --scenic-granite:      #111611;   /* near-black brand dark */
  --scenic-granite-90:   #23291F;   /* lifted granite — panels on black */
  --scenic-granite-70:   #3A413A;   /* mid granite — hairlines, secondary text */
  --scenic-ochre:        #CC8047;   /* the accent */
  --scenic-forest:       #223B22;   /* nature tone — hover borders on cards */
  --scenic-heather:      #755987;
  --scenic-yellow:       #FFC600;   /* digital-only CTA colour */
  --scenic-forest-bright:  #009600; /* app-navigation brights: map UI + status */
  --scenic-heather-bright: #9C54C2;
  --scenic-ochre-bright:   #F07D36;
  --scenic-lake-blue:      #4FA6D1;
  --scenic-off-white:    #EDEDF0;
  --scenic-cloud:        #DDDDE2;
  --scenic-ash:          #9A9C9E;
  --scenic-slate:        #6C6E70;

  /* ---- Type (tokens/typography.css) ---------------------------------------------------------- */
  --font-display: 'Archivo', 'Termina', system-ui, sans-serif;   /* headings, panel titles */
  --font-text:    'Kanit', system-ui, sans-serif;                 /* UI + body */
  --display-stretch: 112%;
  --track-label: 0.22em;   /* section labels */
  --track-caps:  0.12em;   /* uppercase UI (buttons) */
  --track-body:  0.01em;

  /* ---- Spacing / radii (tokens/spacing.css) — the brand leans angular ------------------------ */
  --radius-sm:   4px;
  --radius-md:   6px;     /* small chips */
  --radius-control: 8px;  /* buttons + inputs — what the Web Planner page uses */
  --radius-lg:   10px;    /* cards, chips on the map */
  --radius-xl:   12px;    /* panels, modals */
  --radius-pill: 999px;
  --control-h-md: 44px;

  /* ---- Effects (tokens/effects.css) ---------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(17,22,17,0.18);
  --shadow-md:  0 6px 18px rgba(17,22,17,0.16);
  --shadow-lg:  0 18px 44px rgba(17,22,17,0.24);   /* modals */
  --shadow-map: 0 4px 14px rgba(17,22,17,0.14);    /* floating map chips */
  --shadow-focus: 0 0 0 3px rgba(204,128,71,0.35); /* ochre focus ring */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;

  /* ==== Planner aliases — what the stylesheets actually use ==================================== */
  /* Surfaces (the Web Planner page's warm paper, not the DS's cooler off-white) */
  --planner-bg:  #EFEDE4;   /* page / map void */
  --panel-bg:    #F7F6F1;   /* sidebar, side panels */
  --card-bg:     #FFFFFF;   /* cards, inputs, popups */
  --inset-bg:    #EDEBE1;   /* sunken blocks, hover rows, secondary buttons */
  --rail-bg:     #161A16;   /* side ribbon, consent banner, dark insets */
  --rail-text:   #E4E1D5;
  --rail-muted:  #A8ABA4;
  --rail-line:   rgba(255,255,255,0.14);  /* dividers in the side ribbon */
  --ribbon-panel-bg:   var(--scenic-granite-90);   /* the ribbon's screens: lifted granite, the active item flares into it */
  --ribbon-card-bg:    #2B322A;                    /* cards / inputs on it: one step lighter than granite-90 */

  /* Lines */
  --line:        #E4E1D5;                 /* borders, dividers */
  --line-strong: #C9C7BC;                 /* disabled fills, scrollbars */
  --line-soft:   rgba(17,22,17,0.09);     /* hairlines inside panels */
  --line-card:   rgba(17,22,17,0.14);     /* card + input borders */
  --hover-border: var(--scenic-forest);   /* cards and rows on hover */

  /* Text on light */
  --text:        var(--scenic-granite);   /* headings, strong */
  --text-2:      var(--scenic-granite-70);/* body */
  --text-muted:  var(--scenic-slate);     /* labels, hints */
  --text-faint:  var(--scenic-ash);       /* placeholders, disabled */

  /* Accent — ochre, used small */
  --accent:       var(--scenic-ochre);
  --accent-hover: #D98E58;
  --accent-press: #B96E38;                /* also small ochre TEXT: #CC8047 on white is only 3.0:1 */
  --accent-soft:  rgba(204,128,71,0.12);  /* tinted backgrounds, focus rings */
  --on-accent:    var(--scenic-white);
  --cta:          var(--scenic-yellow);   /* BETA badge */
  --on-cta:       var(--scenic-granite);

  /* Map route — the line app.js draws (EvoMaps.Polyline color) and everything that belongs to it:
     via/shaping point markers, leg sections. Functional colour, deliberately not in the brand palette. */
  /* Behind every dialog / sheet: darkened AND blurred (app.css "Dialog backdrop") */
  --backdrop-bg:   rgba(17,22,17,0.45);
  --backdrop-blur: blur(6px);

  --route-color:      #7c3aed;
  --route-color-soft: rgba(124,58,237,0.10);

  /* Status */
  --danger:        #B4342A;
  --danger-soft:   #F6E4E2;
  --success:       var(--scenic-forest-bright);
  --success-press: #007A00;
  --success-soft:  #EEF4EA;
  --warning-soft:  #FBF1E4;
  --info:          var(--scenic-lake-blue);
  --warning:       var(--scenic-ochre-bright);
  --notice-bg:     #F5E6D8;               /* "this address belongs to a Google account" */
  --notice-text:   #7A4A22;
  --notice-border: #E9C9A8;
}