/* BUBO design system v0.2 — single source of truth.
   Linked from every page's <helmet> via <link rel="stylesheet" href="./bubo-ds.css">.
   Tokens first, then base chrome, then classes. Inline styles remain only for
   one-off layout values; anything repeated belongs here. */

:root {
  /* night — surfaces & structure */
  --night-975:#0F0020;   /* code wells, Night Desk panels */
  --night-950:#150128;   /* page base, stamp shadow */
  --night-925:#1A0230;   /* Tablet surface */
  --night-900:#1F0246;   /* cards, nav, raised panels */
  --night-800:#230345;   /* artwork background — never alter */
  --night-700:#2E0B54;   /* inputs, wells, hover fills */
  --night-600:#3A1F6B;   /* hairline rules, header border */
  --night-line:#4B2A82;  /* all 2px borders/dividers */
  /* text */
  --mist:#C9B6E8;        /* body copy on night */
  --mist-dim:#9C86C4;    /* labels, muted text (replaces #7C67A6 — AA fix) */
  /* gold — the owl, the coin, the action */
  --amber-500:#FAB606;
  --gold-500:#F0AF2B;
  --gold-300:#F6CE72;
  --cream-100:#FCE5B4;
  --umber-900:#3D2302;
  --gold-rule:#6B4A2A;   /* Tablet aged-gold hairline */
  --amber-35:rgba(250,182,6,.35);
  /* status — verification signals, never brand colour */
  --up:#3FD69A;    --up-well:#0F2A22;    --up-line:#2E7D5B;    --up-text:#A8CFBF;
  --down:#DF5528;  --down-well:#2A1009;  --down-line:#8E3620;  --down-text:#E8B49F;
  /* day — Early Bird reserve */
  --parchment:#FCF6E6;
  --morning:#FCE389;     /* Early Bird's sky — reserve theme */
  --tetra-silver:#DBDBD0; /* Tetra ghost states — reserve theme */
  /* type */
  --font-display:'Cinzel',serif;
  --font-ui:'Archivo',system-ui,sans-serif;
  --font-data:'JetBrains Mono',monospace;
  /* shape */
  --r-sm:8px; --r-md:14px; --r-card:20px; --r-pill:999px;
  --outline:2px;
  --stamp-press:1px 1px 0 var(--night-950);
  --stamp:4px 4px 0 var(--night-950);
  /* motion */
  --tap:120ms; --base:200ms; --slow:420ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --coin-flip:2.4s linear;
  --blink-cycle:5.5s;
  /* space — 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-14:56px; --s-16:64px; --s-20:80px; --s-24:96px;
  --scrim:rgba(21,1,40,.78);
}

/* ---- base chrome ---- */
html, body { margin:0; padding:0; background:var(--night-950); color-scheme:dark; }
* { box-sizing:border-box; }
a { color:var(--amber-500); text-decoration:none; border-bottom:1px solid var(--amber-35);
    transition:color var(--base) var(--ease), border-color var(--base) var(--ease); }
a:hover { color:var(--gold-300); border-bottom-color:var(--gold-300); }
code { font-family:var(--font-data); }
:focus-visible { outline:2px solid var(--amber-500) !important; outline-offset:2px; }

/* ---- type classes ---- */
.cz { font-family:var(--font-display); }
.mono { font-family:var(--font-data); }
.eyebrow { font-family:var(--font-display); font-size:12px; letter-spacing:.3em; color:var(--amber-500); }
.h2 { font-family:var(--font-display); font-weight:900; font-size:40px; line-height:1.1; margin:0 0 14px; color:var(--cream-100); }
.h3 { font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1.2; margin:0; color:var(--cream-100); }
.lead { font-size:17px; line-height:1.6; color:var(--mist); max-width:66ch; text-wrap:pretty; }
.label { font-size:12px; letter-spacing:.14em; font-weight:600; text-transform:uppercase; color:var(--mist-dim); }
.hero { font-family:var(--font-display); font-weight:900; font-size:60px; line-height:1.05; margin:0 0 20px; color:var(--cream-100); }

/* ---- layout ---- */
.wrap { max-width:1160px; margin:0 auto; padding:96px 40px 0; }
.resp-6 { display:grid; grid-template-columns:repeat(6,1fr); }
.resp-5 { display:grid; grid-template-columns:repeat(5,1fr); }
.resp-4 { display:grid; grid-template-columns:repeat(4,1fr); }
.resp-3 { display:grid; grid-template-columns:repeat(3,1fr); }
.resp-2 { display:grid; grid-template-columns:repeat(2,1fr); }
.dirs { display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; }
.dirs-col { flex:1 1 480px; max-width:560px; min-width:0; scroll-margin-top:90px; }
.ds-header { display:flex; align-items:center; justify-content:space-between; gap:24px;
             padding:18px 40px; border-bottom:2px solid var(--night-600);
             background:var(--night-900); position:sticky; top:0; z-index:9; }
/* native accordion marker */
.acc-marker { font-family:var(--font-data); color:var(--amber-500); }
.acc-marker::after { content:'+'; }
details[open] .acc-marker::after { content:'\2013'; }
@media (max-width:1100px) {
  .wrap { padding:64px 24px 0; }
  .ds-header { padding:14px 24px; }
  .resp-6 { grid-template-columns:repeat(3,1fr); }
  .resp-5, .resp-4 { grid-template-columns:repeat(2,1fr); }
  .resp-3 { grid-template-columns:repeat(2,1fr); }
  .dirs-col { flex-basis:100%; max-width:100%; }
}
@media (max-width:720px) {
  .wrap { padding:48px 16px 0; }
  .ds-header { padding:12px 16px; flex-wrap:wrap; row-gap:12px; }
  .resp-6, .resp-5, .resp-4, .resp-3, .resp-2 { grid-template-columns:1fr; }
  .hero { font-size:40px; }
  .h2 { font-size:32px; }
}

/* ---- components ---- */
.card { background:var(--night-900); border:2px solid var(--night-line); border-radius:var(--r-card); }
.cell { background:var(--night-900); padding:20px 22px; }
.stat-grid { display:grid; gap:2px; background:var(--night-line); border:2px solid var(--night-line); border-radius:var(--r-card); overflow:hidden; }
.panel-tablet { background:var(--night-925); border:1px solid var(--gold-rule); }
.stamp { box-shadow:var(--stamp); }
.chip { font-size:12.5px; font-weight:600; color:var(--cream-100); background:var(--night-700);
        border:2px solid var(--night-line); border-radius:var(--r-pill); padding:10px 14px; }
.chip.amber { color:var(--umber-900); background:var(--amber-500); border-color:var(--umber-900); }
.chip.mono { font-family:var(--font-data); font-weight:700; color:var(--amber-500); border-color:var(--amber-500); }
.navpill { font-size:13px; font-weight:600; padding:12px 16px; border-radius:var(--r-pill);
           border:2px solid var(--night-line); color:var(--mist); border-bottom-width:2px;
           transition:color var(--base) var(--ease), border-color var(--base) var(--ease), transform var(--tap) var(--ease); }
.navpill:hover { color:var(--cream-100); border-color:var(--mist-dim); }
.navpill:active { transform:translate(1px,1px); }
.navpill.on { background:var(--amber-500); color:var(--umber-900); border-color:var(--amber-500); }
.navpill.on:hover { color:var(--umber-900); border-color:var(--amber-500); }

/* Interaction recipe — Stamp primary (the canonical pressable) */
.btn-stamp { display:inline-block; font-family:var(--font-ui); font-size:15px; font-weight:700;
             background:var(--amber-500); color:var(--umber-900); border:2px solid var(--umber-900);
             border-radius:var(--r-pill); padding:13px 26px; cursor:pointer; box-shadow:var(--stamp);
             transition:background var(--base) var(--ease), box-shadow var(--tap) var(--ease), transform var(--tap) var(--ease); }
.btn-stamp:hover { background:var(--gold-300); }
.btn-stamp:active { box-shadow:var(--stamp-press); transform:translate(3px,3px); }
.btn-stamp.gold { background:var(--gold-500); }
.btn-stamp.gold:hover { background:var(--gold-300); }
.btn-stamp.small { font-size:13px; padding:10px 18px; box-shadow:var(--stamp); min-height:44px; }
.btn-stamp.large { font-size:17px; padding:17px 34px; }
.btn-outline { display:inline-block; font-family:var(--font-ui); font-size:15px; font-weight:700;
               background:transparent; color:var(--cream-100); border:2px solid var(--cream-100);
               border-radius:var(--r-pill); padding:13px 26px; cursor:pointer;
               transition:background var(--base) var(--ease), color var(--base) var(--ease), transform var(--tap) var(--ease); }
.btn-outline:hover { background:var(--cream-100); color:var(--night-800); }
.btn-outline:active { transform:translate(2px,2px); }
.btn-outline.destructive { color:var(--down); border-color:var(--down); }
.btn-outline.destructive:hover { background:var(--down); color:var(--night-950); } /* dark text: no light colour passes AA on --down */
.btn-ghost { display:inline-block; font-family:var(--font-ui); font-size:15px; font-weight:600;
             background:transparent; color:var(--mist); border:2px solid transparent;
             border-radius:var(--r-pill); padding:13px 20px; cursor:pointer;
             transition:color var(--base) var(--ease), border-color var(--base) var(--ease); }
.btn-ghost:hover { color:var(--cream-100); border-color:var(--night-line); }
.btn-ghost:active { transform:translate(1px,1px); }
/* Interaction recipe — Tablet (editorial) */
.btn-tablet { display:inline-block; font-family:var(--font-display); font-size:13px; font-weight:700;
              letter-spacing:.18em; background:transparent; color:var(--amber-500);
              border:1px solid var(--amber-500); border-radius:0; padding:15px 28px; cursor:pointer;
              transition:background var(--base) var(--ease), color var(--base) var(--ease); }
.btn-tablet:hover { background:var(--amber-500); color:var(--night-925); }
.btn-tablet:active { background:var(--gold-300); border-color:var(--gold-300); }
.btn-tablet.quiet { color:var(--mist); border-color:var(--night-line); }
.btn-tablet.quiet:hover { border-color:var(--mist); color:var(--cream-100); background:transparent; }

/* ---- motion: reduced ---- */
@media (prefers-reduced-motion: reduce) {
  .bubo-blink-frame { animation:none !important; opacity:0 !important; }
  .bubo-coin-spin { animation:none !important; }
  * { transition-duration:.01ms !important; }
}