/* TankFuté Design System — Foundations
 * Pulled from constants/design.ts + Design.md (Editorial Precision spec).
 * iOS 26 "Liquid Glass" depth model. Stark canvas, singular blue.
 */

/* ─── Fonts ────────────────────────────────────────────────────────────────
 * NOTE: SF Pro is the canonical face (iOS-native). It is not redistributable
 * via webfont, so the web fallback substitutes Inter — the closest GS Fonts
 * match for both Display & Text optical sizes. Flagged in README.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Color: Surfaces ── */
  --canvas:           #f5f5f7;     /* App canvas — NEVER pure white */
  --surface:          #ffffff;     /* Elevated cards, sheets, modals */
  --glass-bg:         rgba(255, 255, 255, 0.40);
  --glass-border:     rgba(255, 255, 255, 0.60);
  --glass-blur:       blur(28px) saturate(200%);

  /* ── Color: Interactive (the "Blue Rule") ── */
  --accent:           #0071e3;     /* Apple Blue — primary CTA only */
  --accent-pressed:   #005bb8;
  --accent-tint-10:   rgba(0, 113, 227, 0.10);
  --accent-tint-20:   rgba(0, 113, 227, 0.20);
  --link:             #0066cc;     /* Inline text links */

  /* ── Color: Type ── */
  --fg-1:             #1d1d1f;     /* Primary text */
  --fg-2:             rgba(0, 0, 0, 0.80);   /* Secondary */
  --fg-3:             rgba(0, 0, 0, 0.48);   /* Tertiary / captions */
  --fg-inverse:       #ffffff;
  --fg-on-dark:       #ffffff;

  /* ── Color: Status — Fuel Price Indicator (Vert / Orange / Rouge) ── */
  --price-cheap:      #34c759;     /* Green — best deal */
  --price-average:    #ff9500;     /* Orange — fair */
  --price-expensive:  #ff3b30;     /* Red — avoid */
  --price-cheap-tint:     rgba(52, 199, 89, 0.10);
  --price-average-tint:   rgba(255, 149, 0, 0.10);
  --price-expensive-tint: rgba(255, 59, 48, 0.10);

  /* ── Color: Neutrals ── */
  --hairline:         rgba(0, 0, 0, 0.10);   /* Row dividers */
  --hairline-soft:    rgba(0, 0, 0, 0.06);
  --skeleton:         rgba(0, 0, 0, 0.08);

  /* ── Type: Family ── */
  --font-display: -apple-system, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
  --font-text:    -apple-system, "SF Pro Text",    "Inter", "Helvetica Neue", sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ── Type: Size scale (px) ── */
  --t-hero:        56px;
  --t-section:     40px;
  --t-page-title:  34px;
  --t-card-title:  21px;
  --t-body:        17px;
  --t-callout:     16px;
  --t-caption:     14px;
  --t-micro:       12px;

  /* ── Type: Weight ── */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ── Spacing (8pt base) ── */
  --space-1:  4px;
  --space-2:  8px;     /* base unit */
  --space-3:  12px;    /* floating-bar margin */
  --space-4:  16px;    /* screen gutter */
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --gutter:   16px;

  /* ── Radii ── */
  --r-card:    12px;
  --r-action:  8px;     /* small button */
  --r-large:   24px;    /* big sheet */
  --r-glass-top:    26px;  /* floating top bar */
  --r-glass-bottom: 29px;  /* floating tab bar */
  --r-pill:    980px;   /* full pill — primary CTA */

  /* ── Elevation ── */
  --shadow-card:  rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
  --shadow-glass: rgba(0, 0, 0, 0.10) 0px 4px 16px;
  --shadow-fab:   rgba(0, 71, 227, 0.35) 0px 4px 16px;
  --shadow-control: rgba(0, 0, 0, 0.12) 0px 2px 6px;

  /* ── Motion ── */
  --ease-ios:   cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast:     140ms;
  --d-base:     250ms;
  --d-slow:     400ms;
}

/* ─── Semantic Type Roles ────────────────────────────────────────────────── */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero); font-weight: var(--w-semibold);
  line-height: 1.07; letter-spacing: -0.28px; color: var(--fg-1);
}
.t-section {
  font-family: var(--font-display);
  font-size: var(--t-section); font-weight: var(--w-semibold);
  line-height: 1.10; letter-spacing: -0.28px; color: var(--fg-1);
}
.t-page-title {
  font-family: var(--font-display);
  font-size: var(--t-page-title); font-weight: var(--w-bold);
  line-height: 1.12; letter-spacing: 0.37px; color: var(--fg-1);
}
.t-card-title {
  font-family: var(--font-display);
  font-size: var(--t-card-title); font-weight: var(--w-bold);
  line-height: 1.19; letter-spacing: 0.231px; color: var(--fg-1);
}
.t-body {
  font-family: var(--font-text);
  font-size: var(--t-body); font-weight: var(--w-regular);
  line-height: 1.47; letter-spacing: -0.374px; color: var(--fg-1);
}
.t-caption {
  font-family: var(--font-text);
  font-size: var(--t-caption); font-weight: var(--w-regular);
  line-height: 1.43; letter-spacing: -0.224px; color: var(--fg-3);
}
.t-micro {
  font-family: var(--font-text);
  font-size: var(--t-micro); font-weight: var(--w-regular);
  line-height: 1.33; letter-spacing: -0.12px; color: var(--fg-3);
}
.t-section-header {
  font-family: var(--font-text);
  font-size: var(--t-caption); font-weight: var(--w-semibold);
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-3);
}