/* Vandok — design/tokens.css
   Visual direction: "Ora zilei" (BR-VANDOK-002, direction 2, refined).
   Two themes, designed separately — dark is NOT an inversion of light.
   Every value below was measured with the WCAG formula; the driver app floor is 7:1.
   Prefix --vd-* per ADD-VANDOK-001 §2. */

:root {
  /* Identity — the only place orange is decorative, never semantic */
  --vd-identity:            #ED6C02; /* 3px thread under the status bar, rule inside the wordmark */

  /* Type */
  --vd-font: 'Space Grotesk', 'Inter', system-ui, sans-serif; /* self-hosted, no CDN (VD-R001) */
  --vd-fs-hero:      52px;  /* client balance, the number the product exists to produce */
  --vd-fs-qty:       40px;  /* driver quantities */
  --vd-fs-h1:        27px;
  --vd-fs-h2:        22px;
  --vd-fs-body:      17px;  /* driver base */
  --vd-fs-sm:        15px;  /* absolute floor for app content; 13px only for OS chrome */
  --vd-fs-admin:     14px;
  --vd-track-tight:  -0.03em;
  --vd-track-label:   0.10em;

  /* Space, radius, touch */
  --vd-space-1: 4px;  --vd-space-2: 8px;  --vd-space-3: 12px;
  --vd-space-4: 14px; --vd-space-5: 18px; --vd-space-6: 24px;
  --vd-radius:        12px;  /* buttons, fields — rounded to sit with the 16px glass cards */
  --vd-radius-card:   4px;
  --vd-touch-min:    56px;
  --vd-touch-primary:66px;
  --vd-stepper:      58px;

  /* Motion */
  --vd-dur-press:   90ms;
  --vd-dur-count:  240ms;   /* a quantity arrives at its value, it does not appear */
  --vd-dur-dev:    420ms;   /* deviation counts slower, so it is noticed */
  --vd-dur-bar:    320ms;
  --vd-ease:       cubic-bezier(.16, 1, .3, 1);
  --vd-dur-theme:  2400s;   /* 40 real minutes between temperature steps */
}

/* ---------- DAY ---------- */
[data-theme="day"] {
  --vd-field:        #B4C4E1; /* page — deepened so the translucent glass cards clearly stand off it */
  --vd-surface:      #FFFFFF; /* client cards, panels */
  --vd-surface-2:    #FFFFFF;
  --vd-edge:         #5F6875; /* solid card border: 4.46:1 vs field, clears the 3:1 non-text min */
  --vd-edge-rule:    0 2px 0 #5F6875;
  --vd-hairline:     rgba(16,24,38,.14);
  --vd-ink:          #101826; /* 15.8:1 on surface */
  --vd-ink-soft:     #3F4A57; /* 7.4:1 on field — the only secondary value that clears the floor */
  --vd-invert-bg:    #101826; /* next-stop card: inverted value, not a bigger box */
  --vd-invert-ink:   #FFFFFF;
  --vd-invert-soft:  #C7D6EA;
  --vd-ok:           #178C55; /* marker only */
  --vd-action:       #0B5233; /* button surface, white text = 7.4:1 */
  --vd-action-ink:   #FFFFFF;
  --vd-action-press: #083D26;
  --vd-attention:    #B4741B; /* deviation rule; never carries text */
  --vd-fail:         #9E1B12; /* 7.3:1 on field */
  --vd-glass:        rgba(255,255,255,.72);
  --vd-glass-foot:   rgba(255,255,255,.78);
  --vd-glass-blur:   blur(16px);
  /* translucent glass cards (driver) — enough opacity that a number stays legible */
  --vd-glass-card:   rgba(255,255,255,.58);
  --vd-glass-card-2: rgba(255,255,255,.42);
  --vd-glass-edge:   rgba(255,255,255,.85);
  --vd-glass-hi:     rgba(255,255,255,.9);
  --vd-glass-shadow: 0 10px 30px rgba(16,24,38,.12);
  --vd-glow-a:       rgba(21,101,192,.55); /* stronger mesh so the background reads as a gradient */
  --vd-glow-b:       rgba(14,110,70,.30);
  --vd-glow-c:       rgba(99,102,180,.42);
}

/* ---------- NIGHT ---------- */
[data-theme="night"] {
  --vd-field:        #0B1220;
  --vd-surface:      #18243A; /* lighter than the field: at night light comes from the object */
  --vd-surface-2:    #141E31;
  --vd-edge:         #7E8DA6; /* 5.55:1 vs field */
  --vd-edge-rule:    none;    /* no shadows at night */
  --vd-hairline:     rgba(255,255,255,.16);
  --vd-ink:          #FFFFFF;
  --vd-ink-soft:     #C7D6EA;
  --vd-invert-bg:    #EAF1FA;
  --vd-invert-ink:   #0B1220;
  --vd-invert-soft:  #2A3A55;
  --vd-ok:           #2FB574;
  --vd-action:       #2FB574; /* black text = 7.97:1; white on this green would be 2.6:1 */
  --vd-action-ink:   #000000;
  --vd-action-press: #27A167;
  --vd-attention:    #F2A93B;
  --vd-fail:         #E5484D;
  --vd-fail-ink:     #FF9DA0;
  --vd-glass:        rgba(23,35,56,.72);
  --vd-glass-foot:   rgba(14,23,41,.82);
  --vd-glass-blur:   blur(16px);
  /* translucent glass cards (driver, night) — lighter than the field, refracts the glow behind */
  --vd-glass-card:   rgba(36,52,82,.52);
  --vd-glass-card-2: rgba(28,42,68,.44);
  --vd-glass-edge:   rgba(255,255,255,.18);
  --vd-glass-hi:     rgba(255,255,255,.12);
  --vd-glass-shadow: 0 12px 36px rgba(0,0,0,.34);
  --vd-glow-a:       rgba(37,120,220,.42);
  --vd-glow-b:       rgba(47,181,116,.22);
  --vd-glow-c:       rgba(120,110,235,.24);
}

/* Theme selection: auto follows the route clock, the user may pin either theme.
   [data-theme-mode="auto"] resolves to day between 08:00 and 16:00, night otherwise. */

/* Glass is allowed on exactly two layers — the floating header and the action bar.
   Never behind a figure. Degrade to opaque on weak hardware: */
@media (prefers-reduced-transparency: reduce) {
  :root { --vd-glass-blur: none; }
}

/* Quantities everywhere */
.vd-num { font-variant-numeric: tabular-nums; }