/* ============================================================
   SUNNY DAYS — design tokens  (opus / HotelTonight direction)

   Ported verbatim from app/static/mockups/opus/tokens.css, which is
   the design the owner approved. Warm cream paper, deep ink text,
   warm-orange accent, generous 26px card radii, warm (never gray)
   shadows.

   The previous production theme was "moody dark backgrounds,
   premium serif display type" — rejected twice. Nothing in here is
   dark.

   FONTS: loaded from /static/fonts/fonts.css (self-hosted latin
   woff2 subsets) via a <link> in the template. Deliberately NOT a
   CSS @import: an @import here would serialise
   HTML -> CSS -> CSS -> font and destroy LCP.
   ============================================================ */

:root {
  /* ---- Base: warm paper, deep ink ---- */
  --paper:        #FFF9F0;
  --paper-raised: #FFFFFF;
  --paper-sunken: #FBF0E2;
  --ink:          #1A1A2E;
  --ink-soft:     #5A5A75;
  --ink-faint:    #9B9BB0;
  --hairline:     rgba(26, 26, 46, 0.09);

  /* ---- Warm / urgent / verified ---- */
  --sun:        #FF8A3D;
  --sun-deep:   #E8641C;
  --gold:       #FFC145;
  --gold-soft:  #FFEFCB;
  --verify:     #00B589;

  /* ---- Cool / considered (plan-ahead, predicted data) ---- */
  --indigo:      #5B5BD6;
  --indigo-soft: #E7E7FB;
  --indigo-deep: #3C3CB0;

  /* ---- Temperature ramp: encode heat as hue ---- */
  --t-mild:   #7FC8A9;   /* 70-79F */
  --t-warm:   #FFC145;   /* 80-89F */
  --t-hot:    #FF8A3D;   /* 90-99F */
  --t-scorch: #EF4444;   /* 100F+  */

  /* ---- Rain ---- */
  --rain: #5B9BD5;

  /* ---- Geometry ---- */
  --r-card:  26px;
  --r-tile:  22px;
  --r-chip:  999px;
  --r-inner: 16px;

  /* ---- Warm shadows (never gray) ---- */
  --lift-1: 0 2px 8px rgba(90, 50, 20, 0.06);
  --lift-2: 0 6px 20px rgba(90, 50, 20, 0.10);
  --lift-3: 0 14px 38px rgba(90, 50, 20, 0.16);

  --display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ---- Tier colours. These MUST stay categorically distinct:
          Jackson Hole at 8.8 has to read visibly better than
          Phoenix at 3.4, at a glance, without reading the number. */
  --tier-perfect-bg: #E4F6EC;  --tier-perfect-fg: #12693F;  --tier-perfect-bd: #A9DFC2;
  --tier-excel-bg:   #FFF1D6;  --tier-excel-fg:   #B26A00;  --tier-excel-bd:   #F5D79B;
  --tier-good-bg:    #FFF7E6;  --tier-good-fg:    #9A6A12;  --tier-good-bd:    #F0E0BA;
  --tier-mixed-bg:   #EDEFF3;  --tier-mixed-fg:   #52586B;  --tier-mixed-bd:   #D3D8E2;
  --tier-poor-bg:    #FDEBE9;  --tier-poor-fg:    #B42318;  --tier-poor-bd:    #F3C0BB;

  /* ---- Focus ring consumed by a11y.css (must stay legible on cream) ---- */
  --focus-ring: #B24700;

  /* ============================================================
     LEGACY ALIASES — do not delete.

     timeline-view.js and trip-detail.js reference these
     --color-* custom properties inline, and those files are NOT in
     this task's ownership list. Remapping the names onto the cream
     palette restyles them without editing a single line of their JS.
     ============================================================ */
  --color-perfect-50:  var(--tier-perfect-bg);
  --color-perfect-100: #D2EEDF;
  --color-perfect-400: #1F7A4C;
  --color-perfect-500: #12693F;
  --color-perfect-600: #0E5533;

  --color-good-50:  #FFF7E6;
  --color-good-100: var(--gold-soft);
  --color-good-400: #B26A00;
  --color-good-500: #9A6A12;
  --color-good-600: #7E5606;

  --color-poor-50:  #F4F5F8;
  --color-poor-100: var(--tier-mixed-bg);
  --color-poor-400: var(--ink-faint);
  --color-poor-500: var(--ink-soft);
  --color-poor-600: #45495C;

  --color-storm-50:  var(--tier-poor-bg);
  --color-storm-100: #FBD9D5;
  --color-storm-400: #C0392B;
  --color-storm-500: #B42318;
  --color-storm-600: #8F1B12;

  --color-ui-surface:        var(--paper);
  --color-ui-raised:         var(--paper-raised);
  --color-ui-sunken:         var(--paper-sunken);
  --color-ui-border:         var(--hairline);
  --color-ui-text-primary:   var(--ink);
  --color-ui-text-secondary: var(--ink-soft);
  --color-ui-text-tertiary:  var(--ink-faint);
  --color-ui-gold:           var(--sun-deep);
  --color-ui-gold-bright:    var(--gold);
}

/* Plan-ahead / predicted mode retints the accent system cool.
   Reserved for a later phase; harmless while unused. */
[data-mode="later"] {
  --sun:       var(--indigo);
  --sun-deep:  var(--indigo-deep);
  --gold:      #8B8BE8;
  --gold-soft: var(--indigo-soft);
}