/* ═══════════════════════════════════════════════════════════════
   BINIRU PROJECTS — DESIGN TOKENS
   To-the-Stars gradient skin (27 apr 2026 site-wide recolor).
   Soft gradients · warm-orange/cyan/pink trio · system fonts.
   Var-names retained for cascade-compatibility — semantics shifted
   from BANKJE-green → TtS-warm-trio.
   Validated mockup-v1 design language.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Color — To-the-Stars warm-trio palette ────────────── */
  --void:         #050a14;   /* deepest background */
  --void-raised:  #0c1426;   /* card / section bg */
  --void-edge:    rgba(255,255,255,0.08);   /* borders, dividers */

  /* primary accent (was phosphor-green, now warm orange) */
  --phosphor:     #ffb84d;   /* orange — primary accent / hover */
  --phosphor-dim: #c98a35;
  --accent:       #ffb84d;   /* alias */
  --accent-bright:#ffd07a;

  /* warm accent (was amber-orange, now bright orange) */
  --amber:        #ffd07a;
  --amber-dim:    #c9a456;

  /* hot accent / CTAs (was ember-orange, now pink) */
  --ember:        #ff6b9d;   /* pink — CTAs, hot accent */
  --ember-dim:    #c14e74;
  --accent-3:     #ff6b9d;   /* alias */

  /* cool accent (was ice-blue, now cyan) */
  --ice:          #4dd2ff;   /* cyan — secondary accent / links */
  --ice-dim:      #3aa5cc;
  --accent-2:     #4dd2ff;   /* alias */

  /* electric green retained as tertiary signal */
  --acid:         #00FF41;
  --acid-dim:     rgba(0, 255, 65, 0.12);

  /* text (cool off-white voor leesbaarheid op donkere bg) */
  --bone:         #f5f5fa;   /* primary text — high contrast */
  --bone-dim:     #b0b8d0;   /* secondary text — verhoogd voor leesbaarheid */
  --bone-fade:    #6a7290;   /* muted, but readable */
  --text:         #f5f5fa;
  --muted:        #b0b8d0;
  --dim:          #6a7290;

  /* card / deep variants */
  --deep:         #0a0f1c;
  --card:         #0c1426;
  --card-hover:   #131c30;
  --card-feat:    #131628;
  --border:       rgba(255,255,255,0.08);
  --line:         rgba(255,255,255,0.08);

  /* ── Typography — system-stack consistent met mockup-v1 ── */
  --font-display: -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-accent:  -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Space Mono", "Courier Prime", "Courier New", monospace;
  --font-body:    -apple-system, "Segoe UI", system-ui, "Inter", sans-serif;

  /* Sizes — golden-ratio-ish, retained */
  --fs-xs:   0.78rem;
  --fs-sm:   0.92rem;
  --fs-base: 1.05rem;
  --fs-md:   1.25rem;
  --fs-lg:   1.6rem;
  --fs-xl:   2.2rem;
  --fs-2xl:  3.4rem;
  --fs-3xl:  5.1rem;
  --fs-4xl:  7.8rem;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.6;
  --lh-loose: 1.82;

  /* ── Spacing — 1.618 scale ──────────────────────────────── */
  --sp-1:  0.382rem;
  --sp-2:  0.618rem;
  --sp-3:  1rem;
  --sp-4:  1.618rem;
  --sp-5:  2.618rem;
  --sp-6:  4.236rem;
  --sp-7:  6.854rem;
  --sp-8:  11.09rem;

  /* ── Layout ─────────────────────────────────────────────── */
  --measure:  72ch;
  --wide:     1200px;
  --narrow:   620px;

  /* ── Borders & radius ───────────────────────────────────── */
  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 18px;

  --border-hair: 1px solid var(--void-edge);
  --border-bone: 1px solid var(--bone-fade);

  /* ── Transitions ────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-mid:  240ms;
}

/* Subtle radial-gradient backdrop on body (To-the-Stars atmosphere) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 15% 8%, rgba(255,184,77,0.10), transparent 60%),
    radial-gradient(800px 600px at 88% 70%, rgba(77,210,255,0.09), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(255,107,157,0.07), transparent 60%);
}

/* Ensure header/main/footer sit above the gradient layer */
body > header,
body > main,
body > footer,
body > .content,
body > .wrap,
.site-header,
.site-footer {
  position: relative;
  z-index: 1;
}