/* ═══════════════════════════════════════════════════════════════════
   THEME — the vehicle app's design language (navy + green fintech).

   Dark is the identity and the default; light is the Defuse-style paper
   skin: white surfaces, a single hairline border for every division,
   near-black text, green as an accent rather than a wash. Depth is
   removed in light rather than lightened — blurred glass over white just
   reads as grey — so --glass-blur drops to 0 and cards separate by border.

   Shape (radii, spacing, type scale) is inherited by light from dark on
   purpose: the two themes are the same product, not two products.

   `html[data-theme]` is stamped by the inline script in every page head
   before first paint, so switching never flashes.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Vazirmatn';
  src: url('/vendor/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Brand ── */
  --green:      #22C55E;
  --green-dark: #16A34A;
  --green-glow: rgba(34, 197, 94, .35);
  --amber:      #F59E0B;
  --red:        #EF4444;
  --blue:       #3B82F6;

  /* ── Backgrounds ── */
  --bg:          #0A1120;
  --bg-elevated: #0D1526;
  --bg-gradient: linear-gradient(180deg, #0A1120 0%, #0D1526 45%, #0A0F1C 100%);
  --hero-start:  #0C1830;
  --hero-mid:    #0F2A28;
  --hero-end:    #0A1120;

  /* ── Glass surfaces ── */
  --surface:       rgba(255, 255, 255, .06);
  --surface-2:     rgba(255, 255, 255, .03);
  --surface-solid: #111B2E;

  /* ── Overlay fill ladder ── */
  --fill-1: rgba(255, 255, 255, .03);
  --fill-2: rgba(255, 255, 255, .05);
  --fill-3: rgba(255, 255, 255, .07);
  --fill-4: rgba(255, 255, 255, .10);
  --fill-5: rgba(255, 255, 255, .13);

  /* ── Text ── */
  --text-strong: #FFFFFF;
  --text:        rgba(240, 246, 255, .92);
  --text-2:      rgba(255, 255, 255, .72);
  --muted:       rgba(200, 215, 235, .60);
  --subtle:      rgba(200, 215, 235, .38);
  /* White on a vivid green reaches only 2.3:1 — a fail on the one control the whole
     shop turns on. Dark ink on the same green reaches 6.5:1 and keeps the brand
     colour exactly where it is, which darkening the green would not. */
  --on-accent:   #052E16;
  --green-ink:   #22C55E;   /* green as *text*, on a page background */

  /* ── Chrome ── */
  --nav-bg:    rgba(10, 17, 32, .88);
  --tabbar-bg: rgba(10, 17, 32, .90);

  /* ── Status ── */
  --status-ok:      #4ADE80;
  --status-warn:    #FBBF24;
  --status-danger:  #FB923C;
  --status-expired: #F87171;
  --status-info:    #818CF8;
  --status-neutral: #94A3B8;

  /* ── Borders ── */
  --border:        rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --green-border:  rgba(34, 197, 94, .28);

  /* ── Shadows ── */
  --shadow-glass:  0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-card:   0 20px 60px rgba(0,0,0,.45);
  --shadow-green:  0 4px 20px rgba(34,197,94,.28);
  --shadow-nav:    0 1px 0 rgba(0,0,0,.30);
  --shadow-tabbar: 0 -4px 24px rgba(0,0,0,.30);
  --shadow-sheet:  0 -16px 56px rgba(0,0,0,.55);
  --shadow-lift:   0 4px 18px rgba(0,0,0,.20);

  --on-hero: #FFFFFF;
  --glass-blur: 22px;

  /* ── Scale ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;

  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px;
  --radius-xl: 24px; --radius-2xl: 32px;

  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px;
  --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px;

  --nav-h: 56px;
  --tabbar-h: 64px;
}

:root[data-theme='light'] {
  color-scheme: light;

  --green:      #00B86B;
  --green-dark: #009957;
  --green-glow: rgba(0, 184, 107, .22);
  --amber:      #B45309;
  --red:        #D92D20;
  --blue:       #1D4ED8;

  --bg:          #FFFFFF;
  --bg-elevated: #F7F8F7;
  --bg-gradient: linear-gradient(180deg, #FFFFFF 0%, #F7F8F7 45%, #FFFFFF 100%);
  --hero-start:  #F4F7F4;
  --hero-mid:    #EAF4EE;
  --hero-end:    #FFFFFF;

  --surface:       #FFFFFF;
  --surface-2:     #F7F8F7;
  --surface-solid: #FFFFFF;

  --fill-1: rgba(0, 0, 0, .015);
  --fill-2: #F7F8F7;
  --fill-3: #F2F4F2;
  --fill-4: #ECEFEC;
  --fill-5: #E3E7E3;

  --text-strong: #000000;
  --text:        #0B0F0C;
  --text-2:      #3A403A;
  --muted:       #676E64;
  --subtle:      #6A7167;   /* 3.2:1 on paper was a fail at 12px; this is 4.7:1 */
  --on-accent:   #052E16;
  --green-ink:   #00794A;   /* the brand green is 2.6:1 on white; this is 5.5:1 */

  --nav-bg:    rgba(255, 255, 255, .92);
  --tabbar-bg: rgba(255, 255, 255, .94);

  --status-ok:      #047857;
  --status-warn:    #B45309;
  --status-danger:  #C2410C;
  --status-expired: #B91C1C;
  --status-info:    #4338CA;
  --status-neutral: #64748B;

  --border:        #D7DBD7;
  --border-strong: #B9BFB8;
  --green-border:  rgba(0, 184, 107, .38);

  --shadow-glass:  0 1px 0 rgba(0,0,0,.04);
  --shadow-card:   0 2px 12px rgba(0,0,0,.06);
  --shadow-green:  0 4px 16px rgba(0,184,107,.18);
  --shadow-nav:    0 1px 0 rgba(0,0,0,.05);
  --shadow-tabbar: 0 -2px 12px rgba(0,0,0,.05);
  --shadow-sheet:  0 -12px 40px rgba(0,0,0,.12);
  --shadow-lift:   0 2px 10px rgba(0,0,0,.06);

  --on-hero: #0B0F0C;
  --glass-blur: 0px;
}