/* ============================================================
   EPIC Technologies — Colors & Type Tokens
   ============================================================
   Brand: industrial cleantech. Carbon capture, waste treatment,
   power generation. Lime-on-black, engineering-grade, serious.
   ============================================================ */

/* --- Fonts ---
   Pattanakarn is the official EPIC Technologies display/brand face.
   Inter is kept for long-form body copy (better screen legibility at 14–16px);
   JetBrains Mono for data, telemetry, and code.
*/
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_ExtraBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_Bold_Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pattanakarn';
  src: url('../fonts/fonnts.com-Pattanakarn_Black_Italic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — BRAND
     ============================================================ */

  /* The signature: a single electric lime, sampled from the logo.
     Use sparingly — accent only. Never as a flat background fill. */
  --epic-lime:           #DBF911;
  --epic-lime-bright:    #E6FF3D;   /* hover / glow */
  --epic-lime-deep:      #B8D40A;   /* pressed / shadow */
  --epic-lime-soft:      #F0FF8C;   /* hover wash on light bg */
  --epic-lime-tint:      rgba(219, 249, 17, 0.12); /* subtle wash */
  --epic-lime-line:      rgba(219, 249, 17, 0.4);  /* lime hairline */

  /* The other half of the system: pure ink. */
  --epic-black:          #000000;
  --epic-ink:            #0A0A0A;
  --epic-ink-2:          #141414;
  --epic-ink-3:          #1F1F1F;
  --epic-ink-4:          #2A2A2A;

  /* Neutrals — cool, technical greys */
  --epic-gray-900:       #111111;
  --epic-gray-800:       #1F1F1F;
  --epic-gray-700:       #2E2E2E;
  --epic-gray-600:       #4A4A4A;
  --epic-gray-500:       #6B6B6B;
  --epic-gray-400:       #909090;
  --epic-gray-300:       #B8B8B8;
  --epic-gray-200:       #D9D9D9;
  --epic-gray-150:       #E6E6E6;
  --epic-gray-100:       #F0F0F0;
  --epic-gray-50:        #F7F7F5;
  --epic-off-white:      #FAFAF7;
  --epic-white:          #FFFFFF;

  /* ============================================================
     COLOR — SEMANTIC (Dark theme is canonical)
     ============================================================ */

  /* Foreground on dark */
  --fg-1:                #FFFFFF;        /* primary text */
  --fg-2:                #B8B8B8;        /* secondary / labels */
  --fg-3:                #6B6B6B;        /* tertiary / captions */
  --fg-accent:           var(--epic-lime);
  --fg-on-lime:          var(--epic-ink); /* black sits on lime */

  /* Background on dark (canonical) */
  --bg-1:                var(--epic-black);     /* page */
  --bg-2:                var(--epic-ink);       /* surface */
  --bg-3:                var(--epic-ink-2);     /* raised card */
  --bg-4:                var(--epic-ink-3);     /* input / well */

  /* Lines, dividers, hairlines */
  --line-1:              rgba(255, 255, 255, 0.08);
  --line-2:              rgba(255, 255, 255, 0.14);
  --line-strong:         rgba(255, 255, 255, 0.28);
  --line-accent:         var(--epic-lime);

  /* States (kept lime-forward; reds/greens are technical, not Bootstrap) */
  --status-ok:           var(--epic-lime);
  --status-warn:         #FFB020;
  --status-error:        #FF5A4A;
  --status-info:         #6EC1FF;

  /* ============================================================
     LIGHT THEME OVERRIDES — use sparingly (docs, partner sites)
     ============================================================ */

  /* (Defaults are dark; for a light surface, scope to .epic-light) */

  /* ============================================================
     TYPOGRAPHY — FAMILIES
     ============================================================ */
  --font-display:        'Pattanakarn', 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-body:           'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:           'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font-wordmark:       'Pattanakarn', var(--font-display); /* the EPIC wordmark face */

  /* ============================================================
     TYPOGRAPHY — SCALE  (1280–1920px hero scale)
     ============================================================ */
  --text-display-1:      clamp(56px, 7vw, 112px);   /* hero */
  --text-display-2:      clamp(44px, 5.5vw, 80px);  /* section opener */
  --text-h1:             clamp(36px, 4vw, 56px);
  --text-h2:             clamp(28px, 3vw, 40px);
  --text-h3:             22px;
  --text-h4:             18px;
  --text-body-lg:        18px;
  --text-body:           16px;
  --text-body-sm:        14px;
  --text-caption:        12px;
  --text-eyebrow:        12px;    /* uppercase, tracked */

  /* Line heights */
  --lh-tight:            1.04;    /* display */
  --lh-snug:             1.18;    /* headings */
  --lh-normal:           1.5;     /* body */
  --lh-loose:            1.7;     /* long-form */

  /* Letter spacing */
  --tracking-tight:      -0.02em;  /* display */
  --tracking-snug:       -0.01em;
  --tracking-normal:     0;
  --tracking-wide:       0.04em;
  --tracking-wider:      0.12em;   /* eyebrows, all-caps */
  --tracking-widest:     0.22em;   /* the "TECHNOLOGIES" tagline */

  /* Weights */
  --weight-regular:      400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;

  /* ============================================================
     SPACING — 4px base
     ============================================================ */
  --space-1:             4px;
  --space-2:             8px;
  --space-3:             12px;
  --space-4:             16px;
  --space-5:             20px;
  --space-6:             24px;
  --space-8:             32px;
  --space-10:            40px;
  --space-12:            48px;
  --space-16:            64px;
  --space-20:            80px;
  --space-24:            96px;
  --space-32:            128px;
  --space-40:            160px;

  /* ============================================================
     RADII — sparing, mostly squared
     ============================================================ */
  --radius-0:            0;        /* default — most surfaces */
  --radius-1:            2px;      /* hairline rounding (chips) */
  --radius-2:            4px;      /* inputs */
  --radius-3:            8px;      /* cards */
  --radius-pill:         999px;    /* tags, status chips */

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --elev-0:              none;
  --elev-1:              0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 6px rgba(0,0,0,0.5);
  --elev-2:              0 8px 24px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  --elev-3:              0 24px 60px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.06) inset;
  --glow-lime:           0 0 0 1px var(--epic-lime), 0 0 24px rgba(219, 249, 17, 0.35);
  --glow-lime-soft:      0 0 32px rgba(219, 249, 17, 0.22);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:            cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:         cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast:            120ms;
  --dur-base:            200ms;
  --dur-slow:            400ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --max-w-narrow:        720px;
  --max-w-prose:         960px;
  --max-w-content:       1200px;
  --max-w-wide:          1440px;
  --gutter:              clamp(20px, 4vw, 64px);
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.epic-display-1 {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.epic-display-2 {
  font-family: var(--font-display);
  font-size: var(--text-display-2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.epic-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
.epic-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
}
.epic-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1.25;
}
.epic-h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: 1.3;
}
.epic-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: var(--weight-regular);
  line-height: var(--lh-loose);
  text-wrap: pretty;
}
.epic-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}
.epic-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
}
.epic-caption {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.epic-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--epic-lime);
}
.epic-tagline {
  /* "T E C H N O L O G I E S" treatment from the wordmark */
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.epic-mono {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-regular);
}
.epic-data {
  /* Big numbers — stats, gauges, KPI values */
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.02em;
}

/* ============================================================
   BASE
   ============================================================ */
.epic-base, .epic-dark {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.epic-light {
  background: var(--epic-off-white);
  color: var(--epic-ink);
  --fg-1: var(--epic-ink);
  --fg-2: var(--epic-gray-600);
  --fg-3: var(--epic-gray-500);
  --bg-1: var(--epic-off-white);
  --bg-2: #FFFFFF;
  --bg-3: var(--epic-gray-50);
  --bg-4: var(--epic-gray-100);
  --line-1: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.14);
  --line-strong: rgba(0, 0, 0, 0.28);
}