/* =========================================================
   Energaia Design System — Core Tokens
   Colors, type, spacing, radii, shadows, motion.

   Usage:
     <link rel="stylesheet" href="colors_and_type.css">
     Then use vars directly (e.g. color: var(--fg-1))
     or via the semantic utility classes at the bottom.
   ========================================================= */

/* --- Fonts — Open Sans (brand-supplied). Variable + static files. --- */
/* IBM Plex Mono still loaded from Google for code/data (no mono supplied). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
}
/* Static fallbacks for renderers without variable-font support */
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/OpenSans-Light.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/OpenSans-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/OpenSans-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/OpenSans-Semibold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/OpenSans-SemiboldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/OpenSans-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/OpenSans-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/OpenSans-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 800; font-display: swap; src: url('fonts/OpenSans-ExtraBoldItalic.ttf') format('truetype'); }

:root {
  /* ---------- Core palette (Brief) ---------- */
  --graphite:        #1F2428;  /* Deep graphite — primary ink, surfaces */
  --graphite-900:    #14181B;  /* Near-black for full-bleed hero backgrounds */
  --graphite-700:    #2A3035;
  --graphite-500:    #3A4148;

  --yellow:          #F8B729;  /* Technical yellow — single accent */
  --yellow-600:      #D99A10;  /* Hover/pressed */
  --yellow-100:      #FDEAB0;  /* Tint for chips, subtle highlights */

  --slate:           #6B747C;  /* Slate grey — secondary ink, borders */
  --slate-300:       #A8AEB4;  /* Muted text on dark */
  --slate-200:       #C9CDD1;
  --slate-100:       #E4E6E8;

  --off-white:       #F5F4F0;  /* Warm off-white — primary paper */
  --off-white-pure:  #FBFAF7;  /* Cards over warm paper */

  --green:           #2F5D50;  /* Technical green — sustainability accent */
  --green-700:       #254A40;
  --green-400:       #4F8273;
  --green-100:       #DCE8E4;

  /* ---------- Semantic surfaces ---------- */
  --bg:              var(--off-white);       /* Page background (light) */
  --bg-elev:         var(--off-white-pure);  /* Cards, raised surfaces */
  --bg-inverse:      var(--graphite);        /* Dark sections, hero bgs */
  --bg-inverse-deep: var(--graphite-900);

  --border:          #E1DFD8;                /* Hairline on warm paper */
  --border-strong:   #CFCCC2;
  --border-on-dark:  rgba(255,255,255,0.10);

  /* ---------- Semantic ink (foreground) ---------- */
  --fg-1:            var(--graphite);     /* Primary text on light */
  --fg-2:            var(--slate);        /* Secondary text on light */
  --fg-3:            #8A9098;             /* Tertiary / meta */
  --fg-on-dark-1:    #FFFFFF;             /* Primary on dark */
  --fg-on-dark-2:    rgba(255,255,255,0.72);
  --fg-on-dark-3:    rgba(255,255,255,0.48);

  /* ---------- Semantic intent ---------- */
  --accent:          var(--yellow);
  --accent-ink:      var(--graphite);      /* Text placed ON yellow */
  --sustain:         var(--green);
  --sustain-ink:     #FFFFFF;

  --success:         #2F5D50;
  --warning:         #D99A10;
  --danger:          #B3261E;
  --info:            #355769;

  /* ---------- Typography ----------
     Brand font is Open Sans (supplied). One family, hierarchy via weight +
     tracking + case. ExtraBold 800 carries display; 600 semibold carries
     section titles; 400 regular is body; condensed width (~87%) is used for
     technical labels via font-stretch. */
  --font-display: 'Open Sans', ui-sans-serif, system-ui, sans-serif;  /* Headlines */
  --font-body:    'Open Sans', ui-sans-serif, system-ui, sans-serif;  /* Body */
  --font-label:   'Open Sans', ui-sans-serif, sans-serif;             /* Technical labels, tables */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.16em;  /* Eyebrow labels */

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Type scale — modular, operator-oriented (1920-ready) */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   56px;
  --text-5xl:   72px;
  --text-6xl:   96px;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- Radii (restrained — engineering feel) ---------- */
  --radius-0:    0px;     /* Default: many surfaces are sharp */
  --radius-sm:   2px;     /* Chips, inputs, buttons */
  --radius-md:   4px;     /* Cards */
  --radius-lg:   8px;     /* Modules, dialogs */
  --radius-xl:   16px;    /* Hero cards only */
  --radius-full: 999px;

  /* ---------- Shadows (soft, very restrained) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(31, 36, 40, 0.06);
  --shadow-2: 0 2px 6px rgba(31, 36, 40, 0.06), 0 1px 2px rgba(31, 36, 40, 0.04);
  --shadow-3: 0 8px 24px rgba(31, 36, 40, 0.08), 0 2px 4px rgba(31, 36, 40, 0.04);
  --shadow-4: 0 24px 48px rgba(31, 36, 40, 0.12);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick:    120ms;
  --dur-base:     200ms;
  --dur-slow:     420ms;

  /* ---------- Grid ---------- */
  --container-max: 1280px;
  --container-pad: 32px;
}

/* ---------- Base semantic styles ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: 'ss01', 'cv11';
}

/* Display / headings */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  margin: 0;
}

/* Display — oversize hero */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

/* Eyebrow / label — recurring brand motif: rule + label */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Numbered label — for process sections (01, 02…) */
.numeral {
  font-family: var(--font-label);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
}

/* Body text */
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.lede {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  max-width: 62ch;
}
.small {
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* Code / mono — tables, stats */
code, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.94em;
}

/* Stat value — big tabular numbers */
.stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Link default */
a { color: inherit; text-decoration: none; }
a.link { color: var(--fg-1); border-bottom: 1px solid var(--border-strong); transition: border-color var(--dur-base) var(--ease-out); }
a.link:hover { border-color: var(--graphite); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* Selection */
::selection { background: var(--yellow); color: var(--graphite); }