/* ============================================================================
   FuelStation — Direction C: "Mint Air + Midnight Terminal" design tokens.
   Inspired by two references: a light, airy mint card UI (mobile) and a deep
   navy fintech dashboard (desktop dark). Light theme is the DEFAULT; dark is
   the paired theme — same layout, token swap only.
   Discipline: monochrome-plus-one (emerald only at the primary action / active
   nav / progress). Light theme allows SOFT mint-tinted elevation; dark theme
   separates surfaces with hairlines only. Tabular numerals wherever a number
   appears. Custom-property NAMES are kept from the previous system so every
   consumer swaps wholesale; values are Direction C exact.
   ============================================================================ */

/* ── Self-hosted Inter (variable, weights 100–900) — offline/PWA friendly ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
}

/* ── Self-hosted Space Grotesk (variable, 300–700) — display/hero numerals ── */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-var.woff2') format('woff2-variations');
}

/* ── LIGHT (default) — "Mint Air" ─────────────────────────────────────────── */
:root {
  /* Surfaces — soft mint canvas, white cards, hairline separation */
  --bg-page: #E3EEE9;                       /* mint canvas */
  --bg-surface: #FFFFFF;                    /* card */
  --bg-raised: #EFF5F1;                     /* input fills, hover rows, nested */
  --border-subtle: rgba(18, 59, 43, 0.07);  /* THE hairline */
  --border: rgba(18, 59, 43, 0.09);
  --border-strong: rgba(18, 59, 43, 0.18);

  /* Ink — deep green-black */
  --text-primary: #0F1F18;
  --text-secondary: #4E5D55;
  --text-muted: #87948D;

  /* Signal emerald — ONLY primary actions, active nav, streak, progress */
  --amber-400: #3CBD8C;
  --amber-500: #1FA975;                     /* accent */
  --amber-600: #188A61;                     /* hover darkening */
  --accent-ink: #12714D;                    /* emerald text on light */
  --amber-glow: #DDF1E7;                    /* accent-soft tint fills */
  --amber-gradient: #1FA975;                /* SOLID — no gradients */
  --on-amber: #FFFFFF;                      /* white on solid emerald */
  --amber-shadow: 0 6px 16px rgba(20, 120, 84, 0.25);  /* soft emerald lift */

  /* Semantic */
  --success: #16A34A;
  --success-tint: #E2F4E8;
  --warning: #E8930C;
  --warning-tint: #FCF0DA;
  --danger: #E04850;
  --danger-tint: #FBE9EA;
  /* Semantic as TEXT on the tint fills — darkened for AA at small sizes */
  --success-ink: #14703A;
  --warning-ink: #A86A08;
  --danger-ink: #B33239;
  --on-success: #FFFFFF;
  --info: #4C8DFF;
  --info-tint: rgba(76, 141, 239, 0.10);
  --money-in: var(--success);
  --money-out: var(--danger);

  /* Grades — dots, tints, tank fills (fixed identities) */
  --fuel-diesel: #4C8DFF;
  --fuel-petrol: #0FA3A3;                   /* teal — clear of the emerald UI accent */
  --fuel-vpower: #F0883E;
  --fuel-other: #9C8AC9;
  /* Grades as TEXT — darkened for AA on light surfaces (≥4.5:1 on #FFF) */
  --fuel-diesel-ink: #2F63C9;
  --fuel-petrol-ink: #0B7373;
  --fuel-vpower-ink: #A85415;
  --fuel-other-ink: #7C5FB8;

  /* Role accents */
  --role-superadmin: #9C8AC9;
  --role-owner: var(--amber-500);
  --role-manager: var(--success);

  /* Typography — Space Grotesk for display/hero numerals, Inter for body */
  --font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Courier New', monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 590;
  --fw-bold: 590;
  --fw-heading: 590;

  --fs-page-title: 22px;   --lh-page-title: 28px;
  --fs-section: 16px;      --lh-section: 24px;
  --fs-card-title: 14px;   --lh-card-title: 20px;
  --fs-body: 14px;         --lh-body: 22px;
  --fs-label: 12px;        --lh-label: 16px;
  --fs-caption: 11px;      --lh-caption: 16px;
  --fs-kpi: 30px;          --lh-kpi: 36px;
  --fs-kpi-unit: 11px;
  --fs-eyebrow: 12px;
  --ls-eyebrow: 0.5px;
  --ls-tight: -0.5px;

  /* Spacing — 4px grid */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --gutter: 24px;
  --card-pad: 24px;
  --section-gap: 24px;
  --row-h: 40px;

  /* Shape — softer, reference-1 roundness */
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-control: 8px;
  --radius-nav: 10px;
  --radius-pill: 9999px;

  /* Elevation — light theme allows SOFT mint-tinted lift on cards/overlays */
  --card-inset: none;
  --shadow-card: 0 1px 2px rgba(18, 59, 43, 0.05), 0 10px 28px rgba(18, 59, 43, 0.07);
  --shadow-overlay: 0 12px 40px rgba(18, 59, 43, 0.16);
  --overlay-bg: rgba(15, 31, 24, 0.42);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-hover: 100ms;
  --dur-overlay: 250ms;
  --dur-spring: 600ms;
  --dur-countup: 1000ms;
  --rise: 4px;

  /* Layout */
  --sidebar-width: 232px;
  --sidebar-rail: 64px;
  --topbar-height: 64px;
  --content-max: 1360px;
}

/* ── DARK (paired) — "Midnight Terminal" ──────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-page: #080C14;                       /* deep navy canvas */
  --bg-surface: #0F1522;                    /* card */
  --bg-raised: #161E2E;                     /* elevated / hover */
  --border-subtle: rgba(148, 170, 220, 0.07);
  --border: rgba(148, 170, 220, 0.09);
  --border-strong: rgba(148, 170, 220, 0.18);

  --text-primary: #EAEDF5;
  --text-secondary: #99A3B8;
  --text-muted: #5E6B82;

  /* Emerald reads brighter on navy */
  --amber-400: #43D69D;
  --amber-500: #2FC98B;
  --amber-600: #28B07A;
  --accent-ink: #4CDDA4;
  --amber-glow: rgba(47, 201, 139, 0.13);
  --amber-gradient: #2FC98B;
  --on-amber: #04120C;
  --amber-shadow: none;                     /* no colored shadows on dark */

  /* Same semantic colors, dark-appropriate tints */
  --success: #34D399;
  --success-tint: rgba(52, 211, 153, 0.13);
  --warning: #F0A23C;
  --warning-tint: rgba(240, 162, 60, 0.13);
  --danger: #F26D72;
  --danger-tint: rgba(242, 109, 114, 0.13);
  --info: #6EA8FF;
  --info-tint: rgba(110, 168, 255, 0.12);
  /* Semantic text on dark tints — lightened for AA */
  --success-ink: #4ADE9F;
  --warning-ink: #F5BC6B;
  --danger-ink: #F48A8E;

  /* Grades read fine as text on dark — inks match the fills */
  --fuel-diesel: #6EA8FF;
  --fuel-diesel-ink: var(--fuel-diesel);
  --fuel-petrol: #2DD4BF;
  --fuel-petrol-ink: var(--fuel-petrol);
  --fuel-vpower-ink: var(--fuel-vpower);
  --fuel-other-ink: var(--fuel-other);

  /* Dark separates with hairlines; only overlays get depth */
  --shadow-card: none;
  --shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.50);
  --overlay-bg: rgba(2, 5, 10, 0.60);
}

/* Respect reduced motion at the token level */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 0ms; --dur-overlay: 0ms; --dur-spring: 0ms; --dur-countup: 0ms; --rise: 0px; }
}