/* ============================================================================
   MarvinCyberpuck — Design System
   Tokens + base component classes, copied verbatim from the design-system
   project (7b9e4ce0). A dark, warm-circuit cyberpunk-console look running on
   ember and copper. Do not introduce a seventh colour.
   ============================================================================ */

/* --- fonts (CDN-hosted Google Fonts; no binaries supplied) ---------------- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root{
  /* --- colours --- */
  --ink:#15100C;            /* warm near-black page background */
  --surface:#1F1712;        /* card / panel, one step up from ink */
  --ember:#FF6A2E;          /* primary accent */
  --copper:#9C3D14;         /* deep accent, pressed states, gradients */
  --flare:#FFB673;          /* light warm fill, one moment per page */
  --bone:#F4EAE0;           /* primary text on dark */

  --bone-muted:rgba(244,234,224,0.6);
  --ember-35:rgba(255,106,46,0.35);
  --ember-12:rgba(255,106,46,0.12);
  --border-default:rgba(255,106,46,0.35);

  --bg-page:var(--ink);
  --surface-card:var(--surface);
  --surface-flare:var(--flare);
  --text-body:var(--bone);
  --text-muted:var(--bone-muted);
  --text-accent:var(--ember);
  --text-on-flare:var(--ink);
  --border-subtle:var(--ember-35);
  --border-strong:var(--ember);
  --glow-hover:0 0 24px rgba(255,106,46,0.35);
  --gradient-molten:linear-gradient(135deg,var(--ember),var(--copper));

  /* --- type --- */
  --font-display:"Space Grotesk",sans-serif;
  --font-body:"Inter",sans-serif;
  --font-mono:"IBM Plex Mono",monospace;

  --text-display:64px;      --lh-display:1.05;
  --text-h1:48px;           --lh-h1:1.1;
  --text-h2:32px;           --lh-h2:1.15;
  --text-h3:22px;           --lh-h3:1.3;
  --text-body-lg:18px;      --lh-body:1.6;
  --text-body-md:16px;
  --text-label:13px;        --lh-label:1.4;
  --text-caption:12px;      --lh-caption:1.5;

  --weight-display:500;
  --weight-body:400;
  --weight-label:500;
  --tracking-label:0.08em;
  --tracking-nav:0.06em;

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

  /* --- shape --- */
  --radius-sm:4px;   /* buttons, tags, inputs */
  --radius-md:8px;   /* standard cards */
  --border-width:1px;
  --notch-size:28px;
  --notch-clip:polygon(0 0,100% 0,100% calc(100% - var(--notch-size)),calc(100% - var(--notch-size)) 100%,0 100%);
  --ease:0.15s ease;
}

/* --- base ----------------------------------------------------------------- */
body{background:var(--ink);color:var(--bone);font-family:var(--font-body);
  font-size:var(--text-body-md);line-height:var(--lh-body)}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:500;color:var(--bone);margin:0}
.display{font-size:var(--text-display);line-height:var(--lh-display)}
h1{font-size:var(--text-h1);line-height:var(--lh-h1)}
h2{font-size:var(--text-h2);line-height:var(--lh-h2)}
h3{font-size:var(--text-h3);line-height:var(--lh-h3)}
.body-lg{font-size:var(--text-body-lg);line-height:var(--lh-body)}
.caption{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--bone-muted)}
a{color:var(--ember);text-decoration:none}
a:hover{color:var(--flare)}
.label,.eyebrow,.nav-link,.btn,.btn-solid,.tag{font-family:var(--font-mono);font-weight:500;
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label)}

/* Buttons — outline is the default; solid darkens to copper on hover. */
.btn{display:inline-block;color:var(--ember);background:transparent;
  border:1px solid var(--ember);border-radius:var(--radius-sm);padding:12px 20px;
  cursor:pointer;transition:background var(--ease),color var(--ease),box-shadow var(--ease)}
.btn:hover{background:var(--ember);color:var(--ink)}
.btn:active{background:var(--copper);border-color:var(--copper);color:var(--bone)}
.btn-solid{display:inline-block;color:var(--bone);background:var(--ink);border:none;
  border-radius:var(--radius-sm);padding:12px 20px;cursor:pointer;
  transition:background var(--ease),box-shadow var(--ease)}
.btn-solid:hover{background:var(--copper);color:var(--bone)}
.btn-solid:active{background:var(--copper)}

.card{background:var(--surface);border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:var(--space-5)}
.card--notch,.panel--notch{clip-path:var(--notch-clip)}
.panel-flare{background:var(--flare);color:var(--ink);border-radius:var(--radius-md);padding:var(--space-6)}
.panel-flare h1,.panel-flare h2,.panel-flare h3{color:var(--ink)}
.eyebrow,.tag{color:var(--ember);display:inline-block}
.tag{border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:4px 10px}
.nav-link{color:var(--bone);opacity:.85;text-decoration:none;letter-spacing:var(--tracking-nav);
  transition:opacity var(--ease),color var(--ease)}
.nav-link:hover{opacity:1;color:var(--ember)}
.glow-on-hover{transition:box-shadow var(--ease)}
.glow-on-hover:hover{box-shadow:var(--glow-hover)}
.molten-grid-bg{position:relative;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,106,46,0.12),transparent 60%),var(--ink)}
@media (prefers-reduced-motion:reduce){
  .btn,.btn-solid,.nav-link,.glow-on-hover{transition:none}
}