/* ============================================================
   UNIOIL DESIGN SYSTEM — Colors & Type
   ============================================================
   Unioil Petroleum Philippines, Inc.
   Tokens for the Unioil brand: 2026 refresh.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Saira:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- PRIMARY BRAND ---------- */
  --unioil-orange:       #FF6700;   /* Brand primary, droplet, wordmark */
  --unioil-orange-press: #E25500;   /* Pressed / active state */
  --unioil-orange-hover: #FF7B1F;   /* Hover state */
  --unioil-orange-dark:  #C24800;   /* Headline accent on light bg */
  --unioil-orange-tint:  #FFE6D3;   /* Soft fill, surface tint */
  --unioil-orange-tint2: #FFF3E8;   /* Lightest tint */

  /* ---------- NEUTRALS (warm-cool gray scale) ---------- */
  --ink-900: #14171C;   /* Body text, headlines on light */
  --ink-800: #1F242C;   /* Heavy text */
  --ink-700: #353B45;   /* Subheads */
  --ink-600: #555C68;   /* Secondary text */
  --ink-500: #7A828F;   /* Tertiary text, captions */
  --ink-400: #A8AEB8;   /* Disabled text */
  --ink-300: #CFD3DA;   /* Borders */
  --ink-200: #E5E8EC;   /* Subtle borders, dividers */
  --ink-100: #F1F3F5;   /* Surface tint, hover */
  --ink-050: #F8F9FA;   /* App background */
  --ink-000: #FFFFFF;   /* Surface */

  /* ---------- FUEL-GRADE ACCENTS ---------- */
  /* Used as small color codes on pump nozzles, product chips */
  --fuel-91:     #2E7D32;   /* Euro 6 Gasoline 91 — green */
  --fuel-95:     #B8362C;   /* Euro 6 Premium 95 — red */
  --fuel-97:     #1565C0;   /* Euro 6 Super 97 — blue */
  --fuel-diesel: #F5B100;   /* Euro 6 Diesel — yellow */

  /* ---------- SEMANTIC ---------- */
  --success: #1F8A4C;
  --success-tint: #E2F5EA;
  --warning: #E29900;
  --warning-tint: #FFF4D9;
  --danger:  #C8362A;
  --danger-tint: #FBE5E2;
  --info:    #1565C0;
  --info-tint: #E1ECFA;

  /* ---------- SURFACES (light) ---------- */
  --bg-app:     var(--ink-050);
  --bg-surface: var(--ink-000);
  --bg-raised:  var(--ink-000);
  --bg-inset:   var(--ink-100);
  --bg-brand:   var(--unioil-orange);

  /* ---------- TEXT ---------- */
  --fg-1: var(--ink-900);   /* Primary text */
  --fg-2: var(--ink-600);   /* Secondary text */
  --fg-3: var(--ink-500);   /* Tertiary, captions */
  --fg-4: var(--ink-400);   /* Disabled */
  --fg-brand: var(--unioil-orange);
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--unioil-orange-dark);

  /* ---------- BORDERS ---------- */
  --border-1: var(--ink-200);
  --border-2: var(--ink-300);
  --border-strong: var(--ink-700);

  /* ---------- TYPOGRAPHY — families ---------- */
  --font-display: 'Saira Condensed', 'Oswald', 'Impact', sans-serif;
  --font-sans:    'Saira', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---------- TYPOGRAPHY — sizes ---------- */
  --fs-display-xl: 88px;   /* Hero, station signage feel */
  --fs-display-l:  64px;
  --fs-display-m:  48px;
  --fs-h1:         40px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-h5:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      11px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-loose:  0.02em;
  --ls-eyebrow: 0.14em;   /* uppercase eyebrows */

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(20, 23, 28, 0.06), 0 1px 1px rgba(20, 23, 28, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 23, 28, 0.08), 0 1px 2px rgba(20, 23, 28, 0.04);
  --shadow-3: 0 12px 28px rgba(20, 23, 28, 0.12), 0 2px 6px rgba(20, 23, 28, 0.06);
  --shadow-4: 0 24px 56px rgba(20, 23, 28, 0.16), 0 4px 10px rgba(20, 23, 28, 0.06);
  --shadow-brand: 0 8px 24px rgba(255, 103, 0, 0.32);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — use these classes/elements directly
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg-app); }

.display-xl, .display-l, .display-m,
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
  text-transform: uppercase;
}

.display-xl { font-size: var(--fs-display-xl); font-weight: 900; }
.display-l  { font-size: var(--fs-display-l);  font-weight: 900; }
.display-m  { font-size: var(--fs-display-m);  font-weight: 800; }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); text-transform: none; letter-spacing: var(--ls-normal); font-weight: 700; font-family: var(--font-sans); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); text-transform: none; letter-spacing: var(--ls-normal); font-weight: 700; font-family: var(--font-sans); }

p { margin: 0 0 1em 0; }
p.lead    { font-size: var(--fs-body-lg); color: var(--fg-2); line-height: var(--lh-normal); }
p.body    { font-size: var(--fs-body); }
p.body-sm { font-size: var(--fs-body-sm); }
.caption  { font-size: var(--fs-caption); color: var(--fg-3); line-height: var(--lh-normal); }
.micro    { font-size: var(--fs-micro);   color: var(--fg-3); letter-spacing: var(--ls-loose); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-brand);
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--unioil-orange); text-decoration: underline; text-underline-offset: 3px; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.95em; background: var(--bg-inset); padding: 2px 6px; border-radius: var(--radius-xs); }