/* ============================================================
   CodersHack Design System — global entry point
   Consumers link THIS one file. It is import-only by contract.
   ============================================================ */

/* ============================================================
   CodersHack — Webfonts
   Chakra Petch (display) · Space Grotesk (body) · JetBrains Mono (mono).

   Self-hosted — no CDN. The 12 .woff2 faces + @font-face rules live in
   assets/fonts/ (all SIL OFL). No requests to fonts.googleapis.com /
   gstatic.com; the Caddyfile CSP drops those origins accordingly.
   ============================================================ */

/* ============================================================
   CodersHack — Self-hosted webfonts (no CDN)
   Chakra Petch (display) · Space Grotesk (body/UI) · JetBrains Mono (mono).
   All three are SIL Open Font License → safe to redistribute + commit.
   .woff2 files sit alongside this file; URLs are relative to it.
   Weights map to the type tokens: 400 body · 500/600 UI + card titles · 700 display.
   ============================================================ */

/* ---- Chakra Petch — display ---- */
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/chakra-petch-v13-latin-regular.7d75be85dd16.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/chakra-petch-v13-latin-500.36ad966cb653.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/chakra-petch-v13-latin-600.a5888696e9eb.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/chakra-petch-v13-latin-700.ce5095dc1cb2.woff2') format('woff2'); }

/* ---- Space Grotesk — body / UI ---- */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/space-grotesk-v22-latin-regular.65fd17fcbd2e.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/space-grotesk-v22-latin-500.1b1a8131d9ed.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/space-grotesk-v22-latin-600.685bbbf69fa6.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/space-grotesk-v22-latin-700.35f8aec56cfd.woff2') format('woff2'); }

/* ---- JetBrains Mono — code / labels ---- */
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('assets/fonts/jetbrains-mono-v24-latin-regular.14425ba9c695.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('assets/fonts/jetbrains-mono-v24-latin-500.cb182feeed4d.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('assets/fonts/jetbrains-mono-v24-latin-600.400c6bfda18d.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('assets/fonts/jetbrains-mono-v24-latin-700.d0d4e818808f.woff2') format('woff2'); }


/* ============================================================
   CodersHack — Color tokens
   Dark HUD / classified-dossier palette.
   Base scale + semantic aliases + per-product accents.
   ============================================================ */

:root {
  /* ---- Void / surfaces (near-black, slightly blue) ---- */
  --void:        #06070b;   /* page background */
  --void-2:      #08090e;   /* raised panels: terminals, code, cards */
  --surface-1:   rgba(255,255,255,.022);  /* faint card fill (top of gradient) */
  --surface-2:   rgba(255,255,255,.004);  /* faint card fill (bottom of gradient) */
  --surface-tint:rgba(255,255,255,.012);  /* alternating section band */
  --surface-3:   rgba(255,255,255,.03);   /* inputs, inset wells */

  /* ---- Ink scale (bone-white → faint) ---- */
  --ink-0:  #ffffff;
  --ink-1:  #e8eaf0;   /* bone — primary text */
  --ink-2:  #c9cedd;   /* secondary text */
  --ink-3:  #9aa1b6;   /* body muted / paragraph */
  --ink-4:  #828aa0;   /* dim labels */
  --ink-5:  #6b7286;   /* mono captions, // prefixes */
  --ink-6:  #5b6076;   /* faint meta, fine print */
  --ink-7:  #3a4050;   /* faintest — separator dots */

  /* ---- Hairlines / borders (white on dark) ---- */
  --line-1: rgba(255,255,255,.07);   /* section dividers, nav border */
  --line-2: rgba(255,255,255,.09);   /* card / panel border */
  --line-3: rgba(255,255,255,.14);   /* input border, emphasis */
  --line-grid: rgba(255,255,255,.025); /* ambient grid lines */

  /* ============================================================
     ACCENTS — one per product surface. Each ships ac / glow / soft.
     plasma = Foundry (brand)  ·  ice = .dev  ·  radium = .ai  ·  ember = alt
     ============================================================ */
  --plasma:      #3fe0d8;
  --plasma-glow: rgba(63,224,216,.35);
  --plasma-soft: rgba(63,224,216,.08);

  --ice:         #5bb8ff;
  --ice-glow:    rgba(91,184,255,.32);
  --ice-soft:    rgba(91,184,255,.08);

  --radium:      #b6f24a;
  --radium-glow: rgba(182,242,74,.32);
  --radium-soft: rgba(182,242,74,.08);

  --ember:       #ff7a3c;
  --ember-glow:  rgba(255,122,60,.32);
  --ember-soft:  rgba(255,122,60,.08);

  --violet:      #a78bff;   /* Refine (refine.codershack.com) */
  --violet-glow: rgba(167,139,255,.32);
  --violet-soft: rgba(167,139,255,.08);

  /* ---- Live accent aliases ---- default surface is Foundry/plasma.
     Components read --ac / --ac-glow / --ac-soft. Re-map on a product
     scope to retint a whole subtree (see .ac-ice / .ac-radium below). */
  --ac:       var(--plasma);
  --ac-glow:  var(--plasma-glow);
  --ac-soft:  var(--plasma-soft);

  /* ---- Semantic status ---- */
  --success: #7bd66f;
  --success-soft: rgba(123,214,111,.12);
  --warning: #ffb454;
  --warning-soft: rgba(255,180,84,.12);
  --danger:  #ff6b4a;
  --danger-soft: rgba(255,107,74,.12);

  /* ---- HTTP method colors (used in API reference rows) ---- */
  --method-get:    var(--ice);
  --method-post:   var(--success);
  --method-delete: var(--warning);
}

/* Product accent scopes — wrap any subtree to retint --ac/glow/soft. */
.ac-plasma { --ac: var(--plasma); --ac-glow: var(--plasma-glow); --ac-soft: var(--plasma-soft); }
.ac-ice    { --ac: var(--ice);    --ac-glow: var(--ice-glow);    --ac-soft: var(--ice-soft); }
.ac-radium { --ac: var(--radium); --ac-glow: var(--radium-glow); --ac-soft: var(--radium-soft); }
.ac-ember  { --ac: var(--ember);  --ac-glow: var(--ember-glow);  --ac-soft: var(--ember-soft); }
.ac-violet { --ac: var(--violet); --ac-glow: var(--violet-glow); --ac-soft: var(--violet-soft); }

/* ============================================================
   CodersHack — Typography tokens
   Three families: Chakra Petch (display), Space Grotesk (body),
   JetBrains Mono (technical). Display is ALWAYS uppercase.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Chakra Petch', system-ui, sans-serif;   /* headings, lockups */
  --font-sans:    'Space Grotesk', system-ui, sans-serif;  /* body, UI */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* code, labels */

  /* ---- Weights ---- */
  --w-regular: 400;  /* @kind font */
  --w-medium:  500;  /* @kind font */
  --w-semibold:600;  /* @kind font */
  --w-bold:    700;  /* @kind font */

  /* ---- Display scale (Chakra Petch, uppercase, tight) ----
     Fluid clamps mirror the marketing surfaces. */
  --display-hero: clamp(40px, 6.4vw, 82px);  /* @kind font */ /* hero h1 */
  --display-xl:   clamp(28px, 4.6vw, 56px);  /* @kind font */ /* closing */
  --display-lg:   clamp(26px, 3.4vw, 42px);  /* @kind font */ /* section */
  --display-md:   clamp(24px, 3.2vw, 38px);  /* @kind font */
  --display-sm:   21px;  /* card titles  @kind font */
  --display-xs:   17px;  /* small titles @kind font */

  --display-leading: .96;     /* hero line-height  @kind other */
  --display-leading-2: 1.02;  /* section heads     @kind other */
  --display-tracking: -.005em; /* @kind other */

  /* ---- Body scale (Space Grotesk) ---- */
  --body-lg:   clamp(15px, 1.7vw, 18.5px);  /* @kind font */ /* hero para */
  --body-md:   14px;    /* @kind font */
  --body-sm:   13.5px;  /* @kind font */
  --body-xs:   13px;    /* @kind font */
  --body-leading: 1.6;  /* @kind other */

  /* ---- Mono scale (JetBrains Mono) — labels & code ---- */
  --mono-md:   14px;     /* code body */
  --mono-sm:   12.5px;   /* terminal lines */
  --mono-xs:   11.5px;   /* nav, buttons */
  --mono-2xs:  11px;     /* eyebrow labels */
  --mono-3xs:  10.5px;   /* footer meta */
  --mono-4xs:  9.5px;    /* tiny lockup tags */
  --mono-micro:8.5px;    /* logo sub-tag */

  /* ---- Letter-spacing (mono runs wide; display runs tight) ---- */
  --track-eyebrow: .16em;  /* // EYEBROW   @kind other */
  --track-label:   .12em;  /* buttons, nav @kind other */
  --track-wide:    .14em;  /* lockup       @kind other */
  --track-mono:    .1em;   /* general mono @kind other */
  --track-tag:     .34em;  /* sub-tag      @kind other */
  --track-display: .06em;  /* stacked      @kind other */
}

/* ============================================================
   CodersHack — Spacing & layout tokens
   8px base rhythm. Marketing surfaces use fluid section padding
   and a fixed 1280px content rail.
   ============================================================ */

:root {
  /* ---- Base 8px spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  14px;   /* the brand's default card gap */
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  22px;
  --space-8:  24px;
  --space-9:  28px;
  --space-10: 32px;
  --space-12: 42px;
  --space-16: 64px;

  /* ---- Layout rail ---- */
  --rail-max: 1280px;             /* max content width  @kind spacing */
  --rail-pad: clamp(20px, 5vw, 42px);  /* horizontal gutter  @kind spacing */
  --nav-pad:  clamp(16px, 4vw, 42px);  /* @kind spacing */

  /* ---- Section rhythm (vertical) ---- */
  --section-y:    clamp(48px, 7vw, 84px);   /* @kind spacing */
  --section-y-lg: clamp(56px, 8vw, 100px);  /* @kind spacing */
  --section-y-xl: clamp(60px, 9vw, 110px);  /* @kind spacing */

  /* ---- Ambient grid ---- */
  --grid-cell: 64px;  /* @kind spacing */

  /* ---- Notch sizes (clip-path corner cut depth) ----
     The signature CodersHack corner. Scale with element size. */
  --notch-xs: 8px;    /* chips, small buttons */
  --notch-sm: 9px;    /* buttons, nav CTA */
  --notch-md: 10px;   /* inputs */
  --notch-lg: 12px;   /* cards */
  --notch-xl: 14px;   /* large module cards */
  --notch-2xl: 18px;  /* hero panels, code blocks */

  /* ---- Radii (mostly squared — notches do the work) ---- */
  --radius-0: 0;
  --radius-pill: 999px;  /* status dots only */
}

/* ============================================================
   CodersHack — Effects: notches, glows, shadows, motion
   The visual signature lives here: cut-corner clip-paths,
   accent glows, the ambient grid, scanlines, CRT motion.
   ============================================================ */

:root {
  /* ---- Notch clip-paths (top-left + bottom-right corners cut) ----
     Use as `clip-path: var(--clip-card)` etc. Matches the brand's
     octagonal-cut panels. */
  --clip-xs:  polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));  /* @kind other */
  --clip-sm:  polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));  /* @kind other */
  --clip-md:  polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));  /* @kind other */
  --clip-card:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));  /* @kind other */
  --clip-lg:  polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));  /* @kind other */
  --clip-xl:  polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));  /* @kind other */

  /* ---- Glows (accent bloom under CTAs, logos, panels) ---- */
  --glow-cta:    0 0 28px var(--ac-glow);
  --glow-cta-lg: 0 0 34px var(--ac-glow);
  --glow-panel:  0 40px 100px -50px var(--ac-glow);  /* big drop under code panels */
  --glow-text:   0 0 38px var(--ac-glow);            /* text-shadow on accent words */

  /* ---- Shadows (rare — the brand prefers glow + hairline over soft shadow) ---- */
  --shadow-pop: 0 18px 50px -24px rgba(0,0,0,.7);

  /* ---- Card fill gradient (faint top-lit panel) ---- */
  --fill-card: linear-gradient(180deg, var(--surface-1), var(--surface-2));  /* @kind other */

  /* ---- Backdrop blur (glass nav) ---- */
  --blur-nav: blur(16px);  /* @kind other */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);  /* @kind other */
  --dur-fast: .14s;  /* @kind other */
  --dur-med:  .26s;  /* @kind other */
}

/* ============================================================
   Keyframes — shared CRT / HUD motion. Available to any consumer.
   ============================================================ */
@keyframes ch-pulse { 0%,100%{opacity:.32} 50%{opacity:1} }       /* live status dot */
@keyframes ch-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }     /* terminal cursor */
@keyframes ch-drift { from{background-position:0 0} to{background-position:0 -260px} } /* scanlines */
@keyframes ch-flick { 0%,100%{opacity:1} 96.5%{opacity:1} 97%{opacity:.93} 98%{opacity:1} } /* CRT flicker */
@keyframes ch-sweep { 0%{transform:translateX(-120%)} 100%{transform:translateX(320%)} }     /* scan sweep */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ============================================================
   Reusable atmosphere helpers (optional — components inline these
   too, but consumers can drop them onto a full page).
   ============================================================ */

/* Ambient blueprint grid, masked to fade toward the top-right. */
.ch-grid {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-grid) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(120% 90% at 70% 0%, #000 0%, transparent 75%);
}
/* Phones: the elliptical mask's edge lands mid-content on a tall narrow
   viewport and reads as a broken box — fade straight down instead. */
@media (max-width: 720px) {
  .ch-grid {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 40%, transparent 72%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 40%, transparent 72%);
  }
}

/* CRT scanline overlay. */
.ch-scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: repeating-linear-gradient(180deg,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.16) 3px, rgba(0,0,0,0) 4px);
  animation: ch-drift 16s linear infinite;
  mix-blend-mode: multiply; opacity: .7;
}

/* ============================================================
   CodersHack — Billing / spend tokens
   Foundation for the metered API surfaces:
     · Cost Estimator   (pre-flight "what will this cost")  → ICE accent
     · Spend Dashboard  (track + optimize across providers) → EMBER accent
   Reuses the accent palette so nothing new is invented — these are
   semantic aliases + a multi-series provider ramp for charts.
   ============================================================ */

:root {
  /* ---- Service accents (which surface owns which accent) ---- */
  --svc-estimator: var(--ice);     /* Cost Estimator — calm, predictive */
  --svc-refine:    var(--violet);  /* Image Refiner — converge / craft */
  --svc-spend:     var(--ember);   /* Spend Dashboard — burn / money / heat */

  /* ---- Financial semantics ---- */
  --spend:        var(--ember);                 /* actual $ burned — the headline figure */
  --spend-glow:   var(--ember-glow);
  --spend-soft:   var(--ember-soft);
  --estimate:     var(--ice);                   /* predicted / pre-flight cost */
  --estimate-soft:var(--ice-soft);
  --saving:       var(--success);               /* $ saved by optimization */
  --saving-soft:  var(--success-soft);
  --overage:      var(--danger);                /* over budget / cap breached */
  --overage-soft: var(--danger-soft);
  --budget-track: rgba(255,255,255,.06);        /* unfilled budget bar */

  /* ---- Provider series (Claude · Codex · local · etc) ----
     Distinct hues from the accent set for stacked bars / lines / legends. */
  --provider-claude: var(--ember);    /* #ff7a3c */
  --provider-codex:  var(--ice);      /* #5bb8ff */
  --provider-gemini: var(--plasma);   /* #3fe0d8 */
  --provider-local:  var(--radium);   /* #b6f24a — runs free / on-prem */
  --provider-other:  var(--ink-4);    /* neutral bucket */
}

/* Billing surface scopes — convenience wrappers that also set --ac. */
.svc-estimator { --ac: var(--ice);    --ac-glow: var(--ice-glow);    --ac-soft: var(--ice-soft); }
.svc-refine    { --ac: var(--violet); --ac-glow: var(--violet-glow); --ac-soft: var(--violet-soft); }
.svc-spend     { --ac: var(--ember);  --ac-glow: var(--ember-glow);  --ac-soft: var(--ember-soft); }

/* ============================================================
   CodersHack — Base resets & document defaults
   The page is always dark. Selection picks up the live accent.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--ink-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--ac-glow);
  color: #fff;
}

a { color: inherit; }

code, pre { font-family: var(--font-mono); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  margin: 0;
}