/* ============================================================
   CLOUD EXIT — Design Tokens
   Brand: Dmitri / Cloud Exit (freelance Full Stack + Cloud Optimization)
   Direction: "Engineering ledger" — paper, ink, electric-green savings,
   muted-red waste, mono-display headlines, tabular numbers.
   ============================================================ */

/* ----- Web fonts (Google Fonts substitutes; flagged in README) ----- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@400;500;600&display=swap');

:root {
  /* ===========================================================
     COLORS — Neutrals (paper & ink)
     =========================================================== */
  --paper:        #F4F1EA;   /* page background, warm off-white */
  --paper-2:      #EBE6DB;   /* card / section divider */
  --paper-3:      #DED7C5;   /* hairlines, dotted grids */
  --ink:          #11140F;   /* primary text, deep near-black green-tinted */
  --ink-2:        #2B2F26;   /* secondary text */
  --ink-3:        #5A6053;   /* tertiary / labels */
  --ink-4:        #8A9082;   /* placeholder / disabled */

  /* ===========================================================
     COLORS — Brand
     =========================================================== */
  --signal:        #00C46A;   /* savings, success, "after" — electric green */
  --signal-deep:   #0A8F4F;   /* hover / pressed */
  --signal-soft:   #D5F2DD;   /* tinted backgrounds */

  --waste:         #C2412C;   /* cloud cost, "before", warning — muted red */
  --waste-deep:    #8E2D1E;
  --waste-soft:    #F1D9D2;

  --voltage:       #FFD23F;   /* highlight / popular badge — amber */
  --voltage-soft:  #FFF1B8;

  --terminal:      #0E1A12;   /* dark sections (terminal/code blocks) */
  --terminal-2:    #16241A;
  --terminal-fg:   #E7E0CF;   /* paper-on-terminal text */
  --terminal-dim:  #8A9082;

  /* ===========================================================
     SEMANTIC
     =========================================================== */
  --bg:            var(--paper);
  --bg-elev:       #FBF9F4;   /* card surface */
  --bg-sunk:       var(--paper-2);
  --bg-inverse:    var(--terminal);

  --fg:            var(--ink);
  --fg-muted:      var(--ink-3);
  --fg-subtle:     var(--ink-4);
  --fg-inverse:    var(--terminal-fg);

  --border:        var(--paper-3);
  --border-strong: #BFB6A0;
  --border-ink:    var(--ink);

  --accent:        var(--signal);
  --accent-fg:     var(--ink);          /* text ON accent — green is bright */
  --danger:        var(--waste);
  --warn:          var(--voltage);

  /* ===========================================================
     TYPE — Family stacks
     =========================================================== */
  --font-display:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-sans:     'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif:    'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Numbers should always be tabular for prices / savings */
  --feat-tnum:     "tnum" 1, "lnum" 1;

  /* ===========================================================
     TYPE — Scale (clamp where it matters)
     =========================================================== */
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight:   -0.02em;
  --tracking-base:     0;
  --tracking-wide:     0.04em;
  --tracking-mono:    -0.01em;
  --tracking-label:    0.12em;   /* uppercase eyebrows */

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

  /* ===========================================================
     RADII — sharp, engineering
     =========================================================== */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 10px;
  --radius-pill: 999px;

  /* ===========================================================
     SHADOWS — physical, not glowing
     =========================================================== */
  --shadow-1: 0 1px 0 0 var(--border);
  --shadow-2: 0 1px 2px rgba(17,20,15,.06), 0 1px 0 var(--border);
  --shadow-3: 0 6px 16px -8px rgba(17,20,15,.18), 0 1px 0 var(--border);
  --shadow-4: 0 18px 40px -16px rgba(17,20,15,.28), 0 2px 0 var(--border-strong);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(17,20,15,.06);
  --shadow-press: inset 0 2px 0 rgba(17,20,15,.12);

  /* ===========================================================
     MOTION
     =========================================================== */
  --ease-out:   cubic-bezier(.2,.7,.2,1);
  --ease-in:    cubic-bezier(.6,0,.8,.4);
  --ease-snap:  cubic-bezier(.5,1.5,.4,1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --container:    1240px;
  --container-narrow: 880px;
  --gutter:       24px;
  --grid-gap:     24px;
}

/* ============================================================
   BASE / RESET-LITE
   ============================================================ */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ============================================================
   SEMANTIC TYPE CLASSES — usable directly or via @extend-style
   ============================================================ */

/* Eyebrow / label — uppercase mono, used to tag sections */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Display — biggest hero, mono for engineering feel */
.t-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
}

/* H1 — page title */
.t-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
}

/* H2 — section title */
.t-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}

/* H3 — subsection / card title */
.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
}

/* H4 — small heading */
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--ink);
}

/* Lead paragraph — under hero / section heads */
.t-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Body */
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Small / caption */
.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-3);
}

/* Numeric — for €, %, statistics. Tabular always. */
.t-numeric {
  font-family: var(--font-display);
  font-feature-settings: var(--feat-tnum);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
}

/* Code / inline mono */
.t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: 1px 6px;
  color: var(--ink);
}

/* Quote */
.t-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
}

/* Link */
.t-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.t-link:hover { text-decoration-color: var(--signal); }

/* ============================================================
   ELEMENT DEFAULTS (so raw HTML inherits the system)
   ============================================================ */
h1 { font: 700 clamp(36px, 4.5vw, 60px)/1.05 var(--font-display); letter-spacing: -0.03em; margin: 0 0 var(--space-4); color: var(--ink); }
h2 { font: 700 clamp(28px, 3vw, 44px)/1.08 var(--font-display); letter-spacing: -0.025em; margin: 0 0 var(--space-4); color: var(--ink); }
h3 { font: 600 var(--fs-xl)/1.2 var(--font-sans); letter-spacing: -0.01em; margin: 0 0 var(--space-3); color: var(--ink); }
h4 { font: 600 var(--fs-md)/1.25 var(--font-sans); margin: 0 0 var(--space-2); color: var(--ink); }
p  { margin: 0 0 var(--space-4); color: var(--ink-2); text-wrap: pretty; }
small { font-size: var(--fs-sm); color: var(--ink-3); }
code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

/* ============================================================
   UTILITIES
   ============================================================ */
.tabular { font-feature-settings: var(--feat-tnum); font-variant-numeric: tabular-nums lining-nums; }
.mono    { font-family: var(--font-mono); }
.serif   { font-family: var(--font-serif); }

.bg-paper { background: var(--paper); }
.bg-elev  { background: var(--bg-elev); }
.bg-sunk  { background: var(--bg-sunk); }
.bg-ink   { background: var(--terminal); color: var(--terminal-fg); }

.text-signal { color: var(--signal-deep); }
.text-waste  { color: var(--waste); }
.text-muted  { color: var(--ink-3); }

/* Ledger grid background — subtle dotted blueprint */
.bg-ledger {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--paper-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-3) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.bg-dots {
  background-color: var(--paper);
  background-image: radial-gradient(var(--paper-3) 1px, transparent 1px);
  background-size: 16px 16px;
}