/* ============================================================
   WALTRA GREEN ENERGY — Design Tokens
   Colors, Type, Spacing, Radius, Shadow
   ============================================================ */

/* -------- FONTS -------- */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Brand
     Sampled from the Waltra Green Energy logo.
     Solar orange (sun, action) + Manufacturing blue (trust, tech)
     ============================================================ */
  --waltra-orange:        #EF6D3C;  /* primary — solar, energy, CTAs */
  --waltra-orange-600:    #D85A2C;  /* hover */
  --waltra-orange-700:    #B8481E;  /* pressed */
  --waltra-orange-100:    #FCE6DA;  /* tinted bg */
  --waltra-orange-50:     #FFF4ED;  /* faintest tint */

  --waltra-blue:          #0E75BC;  /* primary — manufacturing, trust */
  --waltra-blue-600:      #0A5F99;  /* hover */
  --waltra-blue-700:      #084B79;  /* pressed */
  --waltra-blue-900:      #052E4A;  /* deep, headings, dark surfaces */
  --waltra-blue-100:      #D4E8F5;  /* tinted bg */
  --waltra-blue-50:       #EAF3FA;  /* faintest tint */

  --waltra-green:         #2BA84A;  /* "green energy" — sustainability tag */
  --waltra-green-600:     #1F8A3B;
  --waltra-green-100:     #D6F0DD;
  --waltra-green-50:      #EBF8EE;

  /* ============================================================
     COLOR — Neutrals (warm-cool balanced, slightly cool)
     ============================================================ */
  --ink-900: #0B1620;   /* near-black, primary text */
  --ink-800: #1A2733;
  --ink-700: #2D3B49;
  --ink-600: #475569;
  --ink-500: #64748B;   /* secondary text */
  --ink-400: #94A3B8;   /* tertiary / placeholder */
  --ink-300: #CBD5E1;   /* borders strong */
  --ink-200: #E2E8F0;   /* borders */
  --ink-150: #EDF2F7;
  --ink-100: #F1F5F9;   /* surface alt */
  --ink-50:  #F7FAFC;   /* surface */
  --ink-0:   #FFFFFF;   /* paper */

  /* ============================================================
     COLOR — Semantic
     ============================================================ */
  --fg-1: var(--ink-900);          /* primary text */
  --fg-2: var(--ink-600);          /* secondary text */
  --fg-3: var(--ink-400);          /* tertiary / muted */
  --fg-inverse: var(--ink-0);
  --fg-accent: var(--waltra-orange);
  --fg-link: var(--waltra-blue);

  --bg-page: var(--ink-0);
  --bg-surface: var(--ink-0);
  --bg-surface-alt: var(--ink-50);
  --bg-surface-muted: var(--ink-100);
  --bg-inverse: var(--waltra-blue-900);
  --bg-tint-orange: var(--waltra-orange-50);
  --bg-tint-blue:   var(--waltra-blue-50);
  --bg-tint-green:  var(--waltra-green-50);

  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-500);

  --state-success: var(--waltra-green);
  --state-warning: #E0A21B;
  --state-danger:  #D14545;
  --state-info:    var(--waltra-blue);

  /* ============================================================
     TYPE — Family
     Roboto is the only family in the system. We use weight
     (Black / Bold / Medium / Regular / Light) to create hierarchy.
     ============================================================ */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* TYPE — Scale (modular, 1.250 major-third on desktop) */
  --fs-display: 64px;     /* hero — Black */
  --fs-h1: 48px;          /* Black */
  --fs-h2: 36px;          /* Bold */
  --fs-h3: 28px;          /* Bold */
  --fs-h4: 22px;          /* Bold */
  --fs-h5: 18px;          /* Medium */
  --fs-lead: 20px;        /* Light intro paragraphs */
  --fs-body: 16px;        /* Regular */
  --fs-small: 14px;       /* Regular */
  --fs-caption: 12px;     /* Medium, often UPPERCASE */
  --fs-micro: 11px;

  /* TYPE — Weight */
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* TYPE — Line height */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* TYPE — Tracking */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-normal: 0;
  --ls-wide:  0.04em;
  --ls-wider: 0.12em;    /* eyebrows / UPPERCASE labels */

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;

  /* ============================================================
     RADIUS — pill-friendly. The brand logo is built from pill
     shapes, so we lean into generous, soft rounding.
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;     /* the brand shape — use for buttons, badges */

  /* ============================================================
     SHADOW — soft, technical, never moody
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(11, 22, 32, 0.06);
  --shadow-sm: 0 2px 6px rgba(11, 22, 32, 0.06), 0 1px 2px rgba(11, 22, 32, 0.04);
  --shadow-md: 0 6px 18px rgba(11, 22, 32, 0.08), 0 2px 4px rgba(11, 22, 32, 0.04);
  --shadow-lg: 0 16px 40px rgba(11, 22, 32, 0.10), 0 4px 10px rgba(11, 22, 32, 0.05);
  --shadow-orange: 0 8px 24px rgba(239, 109, 60, 0.28);
  --shadow-blue:   0 8px 24px rgba(14, 117, 188, 0.24);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(14, 117, 188, 0.35);

  /* ============================================================
     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: 360ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-narrow: 720px;
  --container: 1120px;
  --container-wide: 1280px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — apply to plain HTML
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg-1); }

.eyebrow,
.kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--waltra-orange);
}

.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--ink-900);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin: 0;
}

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

small, .small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--fg-2);
  text-transform: uppercase;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-surface-muted);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--ink-800);
}

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

/* Numerals — for stats and capacity figures */
.numeral {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
}