/* ==========================================================================================================
   DINGO HORIZON - SATIN COPPER · design tokens v0.5 (pilot, 3/11/2026 - kit + final fidelity pass)
   The single source of truth for colour, material, type, shape and motion across Dingo apps.
   Apps COPY this file (scripts/sync-horizon.ps1) - they never import it across repos at runtime.
   Everything is a CSS custom property so an app can map its own variables onto these (see docs/ARCHITECTURE.md).
   Dark ("Horizon") is the primary look; [data-hz-tone="day"] gives the lighter configuration (Induct, daylight use).
   ========================================================================================================== */

@font-face {
  font-family: "Horizon Sans";                              /* Archivo variable (SIL OFL 1.1) - same family as Dingo Command */
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                 U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- brand palette (approved) ---- */
  --hz-charcoal:  #292221;   /* primary background */
  --hz-espresso:  #43332F;   /* dark panel surfaces */
  --hz-taupe:     #695048;   /* secondary surfaces */
  --hz-earth:     #98705B;   /* warm neutral accents */
  --hz-copper:    #D29A70;   /* primary interactive accent */
  --hz-champagne: #F1C18E;   /* highlights, selected controls */
  --hz-night:     #1D1817;   /* deepest layer: header base, wells */

  /* ---- semantic roles: dark ---- */
  --hz-bg:          var(--hz-charcoal);
  --hz-bg-deep:     var(--hz-night);
  --hz-surface:     rgba(67, 51, 47, .58);          /* espresso glass */
  --hz-surface-2:   rgba(105, 80, 72, .30);         /* taupe glass: raised rows, hover */
  --hz-surface-solid: #382B28;                      /* where blur is unavailable / dialogs */
  --hz-well:        rgba(20, 15, 14, .38);          /* recessed tracks, inputs */
  --hz-ink:         #F5ECE4;                        /* 13.9:1 on charcoal */
  --hz-ink-2:       #DCCCBF;
  --hz-muted:       #D2C4B8;                        /* >=4.5:1 even over the brightest glass glow (measured 3/11) */
  --hz-line:        rgba(241, 193, 142, .13);
  --hz-line-strong: rgba(241, 193, 142, .26);
  --hz-accent:      var(--hz-copper);
  --hz-accent-hi:   var(--hz-champagne);
  --hz-on-accent: #34221A;
  --hz-copper-fill: linear-gradient(180deg, #F2C99F 0%, #DAA174 54%, #B97C55 100%);   /* kit dh-button */

  /* operational states - meaning first, never re-tinted to match the theme */
  --hz-ok:     #63D394;  --hz-ok-fill:   #17804A;  --hz-ok-soft:   rgba(99, 211, 148, .13);   /* on site, connected, compliant */
  --hz-info:   #7DB8F5;  --hz-info-fill: #2A6FC9;  --hz-info-soft: rgba(125, 184, 245, .13);  /* ETA, in transit, informational */
  --hz-warn:   #F4BC55;  --hz-warn-fill: #F2B544;  --hz-warn-soft: rgba(244, 188, 85, .14);   /* attention needed (dark text on fill) */
  --hz-bad:    #FF8576;  --hz-bad-fill:  #C8382B;  --hz-bad-soft:  rgba(255, 133, 118, .14);  /* critical, urgent */
  --hz-on-fill: #FFFFFF; --hz-on-warn: #2A1D0E;

  /* ---- materials ---- */
  --hz-blur: 18px;
  --hz-glass:
    linear-gradient(180deg, rgba(255, 236, 214, .045) 0%, rgba(255, 236, 214, 0) 38%),
    linear-gradient(180deg, rgba(74, 57, 52, .66) 0%, rgba(54, 42, 39, .62) 100%);
  --hz-glass-edge: inset 0 1px 0 rgba(255, 236, 214, .085), inset 0 0 0 1px rgba(241, 193, 142, .05);
  --hz-shadow-1: 0 1px 2px rgba(10, 6, 5, .35);
  --hz-shadow-2: 0 1px 2px rgba(10, 6, 5, .35), 0 14px 34px -14px rgba(10, 6, 5, .65);
  --hz-shadow-3: 0 2px 6px rgba(10, 6, 5, .4), 0 28px 70px -20px rgba(10, 6, 5, .8);
  --hz-glow-copper: 0 0 0 1px rgba(241, 193, 142, .28), 0 6px 18px -6px rgba(210, 154, 112, .55);
  --hz-metal:                                         /* brushed header: fine grain over a soft vertical light */
    repeating-linear-gradient(90deg, rgba(255, 240, 225, .016) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #3A2F2C 0%, #2C2321 52%, #231C1B 100%);
  --hz-atmosphere:                                     /* kit dh-atmosphere, calibrated: dark floor, light pooling under the panels */
    radial-gradient(62% 34% at 77% 9%, rgba(232, 163, 112, .26), rgba(232, 163, 112, 0) 72%),
    radial-gradient(70% 9% at 55% 13%, rgba(236, 176, 124, .20), rgba(236, 176, 124, 0) 100%),
    radial-gradient(12% 5% at 12% 96%, rgba(255, 196, 140, .2), rgba(255, 196, 140, 0) 100%),
    radial-gradient(13% 5% at 88% 96%, rgba(255, 196, 140, .18), rgba(255, 196, 140, 0) 100%),
    radial-gradient(45% 40% at 48% 52%, rgba(226, 164, 122, .15), rgba(226, 164, 122, 0) 72%),
    radial-gradient(48% 34% at 13% 60%, rgba(126, 84, 68, .12), rgba(126, 84, 68, 0) 76%),
    linear-gradient(155deg, #1D1715 0%, #342922 50%, #1C1614 100%);
  --hz-sunrise:                                       /* page backdrop: a low warm horizon, nothing illustrative */
    radial-gradient(120% 60% at 50% 112%, rgba(210, 154, 112, .16) 0%, rgba(210, 154, 112, 0) 60%),
    radial-gradient(70% 40% at 12% -8%, rgba(241, 193, 142, .07) 0%, rgba(241, 193, 142, 0) 70%),
    linear-gradient(180deg, #2B2322 0%, #241D1C 55%, #2A201E 100%);

  /* ---- material system v0.3 (3/11 fidelity brief) ---- */
  --hz-panel-fill: linear-gradient(170deg, rgba(150, 122, 100, .17) 0%, rgba(98, 78, 64, .14) 30%, rgba(50, 40, 32, .30) 100%);   /* kit glass, calibrated */
  --hz-panel-fill-quiet: linear-gradient(176deg, rgba(232, 168, 122, .38) 0%, rgba(176, 130, 100, .30) 11%, rgba(128, 102, 86, .30) 30%, rgba(102, 82, 70, .32) 100%);   /* conversation: sunlit header, lit open glass */
  --hz-panel-fill-lit: linear-gradient(170deg, rgba(170, 142, 124, .28) 0%, rgba(112, 92, 80, .30) 60%, rgba(92, 74, 64, .32) 100%);   /* utility rows: lighter satin glass */
  --hz-panel-fill-raised: linear-gradient(170deg, rgba(160, 138, 124, .20) 0%, rgba(96, 82, 74, .24) 40%, rgba(62, 52, 48, .32) 100%);   /* forecast: neutral smoky taupe */
  --hz-panel-edge: rgba(255, 228, 200, .32);   /* lit champagne rim */
  --hz-panel-shadow: 0 18px 38px rgba(13, 9, 8, .34), 0 3px 10px rgba(13, 9, 8, .16),
                     inset 0 1px 0 rgba(255, 244, 228, .46), inset 0 2px 2px -1px rgba(255, 236, 210, .22), inset 0 -1px 0 rgba(255, 206, 160, .16),
                     inset 0 0 26px rgba(255, 214, 176, .04);   /* lit top rim, lit lower edge, soft inner glow */
  --hz-panel-glow: linear-gradient(90deg, rgba(255, 236, 209, .1) 0%, rgba(255, 238, 214, .8) 42%, rgba(255, 236, 209, .45) 78%, rgba(255, 236, 209, .1) 100%) top / 100% 1px no-repeat;
  --hz-glass-filter: blur(15px) saturate(118%);   /* kit */
  --hz-panel-sheen: linear-gradient(180deg, rgba(255, 237, 218, .12), rgba(255, 237, 218, 0) 18%),
                    radial-gradient(98% 43% at 66% -10%, rgba(255, 213, 173, .12), rgba(255, 213, 173, 0) 85%);
  --hz-tile-fill: linear-gradient(160deg, rgba(250, 220, 196, .10) 0%, rgba(150, 118, 102, .08) 40%, rgba(26, 18, 17, .14) 100%);
  --hz-tile-edge: rgba(248, 220, 194, .24);
  --hz-tile-shadow: 0 4px 12px rgba(15, 9, 8, .14), inset 0 1px 0 rgba(255, 240, 216, .16), inset 0 -1px 0 rgba(0, 0, 0, .12);
  --hz-field-fill: rgba(31, 24, 23, .36);   /* kit dh-input */
  --hz-field-edge: rgba(239, 214, 191, .24);
  --hz-copper-edge: rgba(255, 240, 218, .40);
  --hz-copper-shadow: inset 0 1px 0 rgba(255, 250, 229, .58), inset 0 -2px 4px rgba(100, 47, 22, .18), 0 5px 15px rgba(35, 17, 12, .24);
  --hz-select-fill: linear-gradient(180deg, #F0C396 0%, #DC9F70 55%, #B77C54 100%);   /* kit selected nav */
  --hz-focus-ring: 0 0 0 2px #241D1C, 0 0 0 4px #F1C18E;

  /* ---- shape ---- */
  --hz-r-xs: 6px; --hz-r-sm: 10px; --hz-r-md: 14px; --hz-r-lg: 18px; --hz-r-xl: 24px; --hz-r-pill: 999px;
  --hz-space-1: 4px; --hz-space-2: 8px; --hz-space-3: 12px; --hz-space-4: 16px; --hz-space-5: 20px; --hz-space-6: 24px; --hz-space-8: 32px;
  --hz-control-h: 40px; --hz-control-h-lg: 48px;

  /* ---- type ---- */
  /* the approved Wacol screenshot is set in Segoe UI Variable (Windows system font: nothing to download); Archivo stays
     available as "Horizon Sans" for print/marketing */
  --hz-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --hz-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --hz-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --hz-text-xs: 11px; --hz-text-sm: 13px; --hz-text-md: 15px; --hz-text-lg: 17px; --hz-text-xl: 21px; --hz-text-2xl: 27px;
  --hz-label-stretch: 112%;    /* overlines, tab labels, status tags: slightly extended, like instrument lettering */
  --hz-label-track: .08em;

  /* ---- motion ---- */
  --hz-dur-micro:   120ms;   /* hover, press, colour shifts            (100-160) */
  --hz-dur-control: 180ms;   /* toggles, buttons, chips, tab indicator (140-220) */
  --hz-dur-panel:   240ms;   /* panels open/close, view changes        (180-300) */
  --hz-dur-layout:  360ms;   /* reorders, large layout moves           (280-420) */
  --hz-ease-out:    cubic-bezier(.22, .61, .36, 1);   /* things arriving */
  --hz-ease-in:     cubic-bezier(.4, 0, 1, 1);        /* things leaving */
  --hz-ease-move:   cubic-bezier(.65, 0, .35, 1);     /* things travelling between two places */
  /* critically-damped spring with ~2 % settle - "machined", not rubbery (CSS linear(); older browsers fall back to ease) */
  --hz-ease-spring: linear(0, .186 7.1%, .551 16.4%, .814 26.4%, .949 37.1%, 1.012 49.6%, 1.019 59.9%, 1.006 77.7%, 1);
  /* no color-scheme here: tokens.css must be inert in an app until the app opts in (.hz-root / its own skin flag) */
}
.hz-root { color-scheme: dark; }

/* ---- the lighter configuration: warm linen + copper (Induct, outdoor/daylight screens) ---- */
:root[data-hz-tone="day"] {
  --hz-bg: #F3ECE5; --hz-bg-deep: #E8DED4;
  --hz-surface: rgba(255, 251, 247, .78); --hz-surface-2: rgba(152, 112, 91, .08); --hz-surface-solid: #FFFBF7;
  --hz-well: rgba(105, 80, 72, .07);
  --hz-ink: #2A201E; --hz-ink-2: #4A3A35; --hz-muted: #6E5A51;
  --hz-line: rgba(105, 80, 72, .16); --hz-line-strong: rgba(105, 80, 72, .30);
  --hz-accent: #94582F; --hz-accent-hi: #7A4527; --hz-on-accent: #FFF8F1;   /* 5.4:1 white-on-copper, 5.1:1 as text */
  --hz-copper-fill: linear-gradient(180deg, #A3653D 0%, #94582F 50%, #7F4A28 100%);
  --hz-panel-fill: linear-gradient(155deg, rgba(255, 255, 255, .86) 0%, rgba(252, 247, 242, .9) 45%, rgba(247, 240, 233, .94) 100%);
  --hz-panel-edge: rgba(105, 80, 72, .18);
  --hz-panel-shadow: 0 14px 35px rgba(60, 40, 30, .12), 0 3px 8px rgba(60, 40, 30, .07), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(105, 80, 72, .08);
  --hz-panel-sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 30%);
  --hz-panel-glow: none;
  --hz-atmosphere: radial-gradient(60% 35% at 72% 2%, rgba(232, 170, 120, .22), rgba(232, 170, 120, 0) 55%), linear-gradient(180deg, #F6F0EA, #EFE6DD);
  --hz-tile-fill: linear-gradient(160deg, #FFFFFF, #FBF5EF); --hz-tile-edge: rgba(105, 80, 72, .18);
  --hz-tile-shadow: 0 3px 8px rgba(60, 40, 30, .08), inset 0 1px 0 #fff;
  --hz-field-fill: #FFFFFF; --hz-field-edge: rgba(105, 80, 72, .26);
  --hz-copper-edge: rgba(120, 70, 40, .35); --hz-select-fill: linear-gradient(180deg, #A3653D 0%, #94582F 50%, #7F4A28 100%);
  --hz-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #94582F;
  --hz-ok: #157A44; --hz-info: #2460AE; --hz-warn: #8A5300; --hz-bad: #B3261E;
  --hz-ok-soft: rgba(23, 128, 74, .10); --hz-info-soft: rgba(42, 111, 201, .10); --hz-warn-soft: rgba(242, 181, 68, .18); --hz-bad-soft: rgba(200, 56, 43, .10);
  --hz-glass:
    linear-gradient(180deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, rgba(255, 252, 249, .86) 0%, rgba(250, 244, 238, .82) 100%);
  --hz-glass-edge: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(152, 112, 91, .06);
  --hz-shadow-1: 0 1px 2px rgba(60, 40, 30, .08);
  --hz-shadow-2: 0 1px 2px rgba(60, 40, 30, .07), 0 14px 34px -16px rgba(60, 40, 30, .22);
  --hz-shadow-3: 0 2px 6px rgba(60, 40, 30, .1), 0 28px 70px -24px rgba(60, 40, 30, .35);
  --hz-glow-copper: 0 0 0 1px rgba(169, 104, 63, .30), 0 6px 18px -8px rgba(169, 104, 63, .45);
  --hz-sunrise:
    radial-gradient(120% 60% at 50% 115%, rgba(210, 154, 112, .22) 0%, rgba(210, 154, 112, 0) 60%),
    linear-gradient(180deg, #F6F0EA 0%, #F1E9E1 100%);
}
:root[data-hz-tone="day"] .hz-root, :root[data-hz-tone="day"].hz-root { color-scheme: light; }

/* ---- reduced motion: the OS setting, or data-hz-motion="reduce" (test switch / per-user override) ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --hz-dur-micro: 0ms; --hz-dur-control: 0ms; --hz-dur-panel: 0ms; --hz-dur-layout: 0ms; }
}
:root[data-hz-motion="reduce"] { --hz-dur-micro: 0ms; --hz-dur-control: 0ms; --hz-dur-panel: 0ms; --hz-dur-layout: 0ms; }