/* ────────────────────────────────────────────────────────────
   Zerocash · Design Tokens
   Drop this CSS into any document and use the variables directly.
   :root contains light-mode defaults. [data-theme="dark"] swaps surfaces.
   ──────────────────────────────────────────────────────────── */

:root {
  /* ── COLORS · Brand ─────────────────────────────────────── */
  --zc-indigo-50:  #EFEDFF;
  --zc-indigo-100: #DAD6FF;
  --zc-indigo-200: #B5AEFF;
  --zc-indigo-300: #8B80FF;
  --zc-indigo-400: #5B4EFF;
  --zc-indigo-500: #2D1FE6;   /* ← brand primary · "Orbit Indigo" */
  --zc-indigo-600: #2418B8;
  --zc-indigo-700: #1B118A;
  --zc-indigo-800: #150D6B;
  --zc-indigo-900: #0E0846;

  /* ── COLORS · Neutrals (warm, paper-like) ──────────────── */
  --zc-ink:        #0A0A0A;   /* primary text */
  --zc-slate-900:  #1A1A1C;
  --zc-slate-700:  #36363A;
  --zc-slate-500:  #6B6B70;   /* secondary text */
  --zc-slate-400:  #8E8E94;
  --zc-slate-300:  #B3B3B8;
  --zc-slate-200:  #D6D5CF;   /* hairlines on cream */
  --zc-bone:       #EDE9DF;   /* subtle warm surface */
  --zc-cream:      #F4F1EA;   /* page bg, primary surface */
  --zc-paper:      #FAF8F2;   /* lifted surface */
  --zc-white:      #FFFFFF;

  /* Dark surfaces */
  --zc-void:       #0E0E10;   /* dark-mode page bg */
  --zc-void-2:     #18181B;   /* dark-mode card */
  --zc-void-3:     #232328;   /* dark-mode lifted */

  /* ── COLORS · Semantic (status) ─────────────────────────── */
  --zc-success-bg:   #E3F2EA;
  --zc-success-ink:  #0F6E47;
  --zc-success-500:  #18A063;

  --zc-warning-bg:   #FBF1DA;
  --zc-warning-ink:  #8A5A00;
  --zc-warning-500:  #D49520;

  --zc-critical-bg:  #FBE3E0;
  --zc-critical-ink: #B11E12;
  --zc-critical-500: #D9362A;

  --zc-info-bg:      #DCEAFB;
  --zc-info-ink:     #134A8E;
  --zc-info-500:     #1F6FDB;

  /* ── COLORS · Semantic (foreground / surface roles) ─────── */
  --zc-fg-1: var(--zc-ink);          /* primary text */
  --zc-fg-2: var(--zc-slate-500);    /* secondary text */
  --zc-fg-3: var(--zc-slate-400);    /* muted */
  --zc-fg-brand: var(--zc-indigo-500);
  --zc-fg-on-brand: var(--zc-white);

  --zc-bg-page:     var(--zc-cream);
  --zc-bg-surface:  var(--zc-white);
  --zc-bg-lifted:   var(--zc-paper);
  --zc-bg-subtle:   var(--zc-bone);
  --zc-bg-brand:    var(--zc-indigo-500);

  --zc-line:        rgba(10, 10, 10, 0.10);
  --zc-line-strong: rgba(10, 10, 10, 0.20);

  /* ── TYPE · Families ────────────────────────────────────── */
  --zc-font-sans: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --zc-font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --zc-font-serif: 'Instrument Serif', Georgia, serif; /* reserved for editorial */

  /* ── TYPE · Scale ───────────────────────────────────────── */
  /* Display: marketing hero, large numerics */
  --zc-text-display-2xl: 96px;
  --zc-text-display-xl:  72px;
  --zc-text-display-l:   56px;
  --zc-text-display-m:   40px;

  /* Headings */
  --zc-text-h1: 32px;
  --zc-text-h2: 24px;
  --zc-text-h3: 20px;
  --zc-text-h4: 18px;

  /* Body */
  --zc-text-body-l: 17px;
  --zc-text-body-m: 15px;   /* default */
  --zc-text-body-s: 13px;

  /* UI */
  --zc-text-label: 12px;
  --zc-text-micro: 11px;

  /* ── TYPE · Tracking ────────────────────────────────────── */
  --zc-track-display: -0.04em;
  --zc-track-heading: -0.02em;
  --zc-track-body:    -0.005em;
  --zc-track-label:   0.04em;
  --zc-track-eyebrow: 0.18em;
  --zc-track-eyebrow-wide: 0.3em;
  --zc-track-mono:    0;

  /* ── TYPE · Line heights ────────────────────────────────── */
  --zc-leading-tight: 1.05;
  --zc-leading-snug:  1.2;
  --zc-leading-base:  1.5;
  --zc-leading-loose: 1.7;

  /* ── TYPE · Weights ─────────────────────────────────────── */
  --zc-weight-light:  300;
  --zc-weight-regular: 400;
  --zc-weight-medium: 500;   /* default heading + UI weight */
  --zc-weight-semi:   600;
  --zc-weight-bold:   700;

  /* ── SPACING (4-unit base) ──────────────────────────────── */
  --zc-space-0:   0px;
  --zc-space-1:   4px;
  --zc-space-2:   8px;
  --zc-space-3:   12px;
  --zc-space-4:   16px;
  --zc-space-5:   20px;
  --zc-space-6:   24px;
  --zc-space-7:   32px;
  --zc-space-8:   40px;
  --zc-space-9:   48px;
  --zc-space-10:  64px;
  --zc-space-11:  80px;
  --zc-space-12:  96px;
  --zc-space-13:  128px;

  /* ── RADII ──────────────────────────────────────────────── */
  --zc-radius-xs:   2px;
  --zc-radius-sm:   4px;
  --zc-radius-md:   6px;     /* default for chips, badges, inputs */
  --zc-radius-lg:   8px;     /* cards */
  --zc-radius-xl:   12px;    /* sections, modals */
  --zc-radius-2xl:  20px;    /* hero panels */
  --zc-radius-pill: 9999px;

  /* ── SHADOWS · institutional / restrained ───────────────── */
  /* Border-first elevation; shadows are quiet ambient only. */
  --zc-shadow-0: none;
  --zc-shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 1px 2px rgba(10,10,10,0.04);
  --zc-shadow-2: 0 1px 0 rgba(10,10,10,0.04), 0 4px 12px -4px rgba(10,10,10,0.08);
  --zc-shadow-3: 0 2px 0 rgba(10,10,10,0.04), 0 12px 32px -8px rgba(10,10,10,0.14);
  --zc-shadow-focus: 0 0 0 3px rgba(45,31,230,0.25);
  --zc-shadow-brand: 0 16px 48px -16px rgba(45,31,230,0.40);

  /* ── MOTION ─────────────────────────────────────────────── */
  --zc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --zc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --zc-dur-fast:   120ms;
  --zc-dur-base:   200ms;
  --zc-dur-slow:   400ms;

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --zc-z-base:     0;
  --zc-z-elevated: 10;
  --zc-z-sticky:   100;
  --zc-z-overlay:  1000;
  --zc-z-modal:    1100;
  --zc-z-toast:    1200;
}

/* ─── Dark mode overrides ─── */
[data-theme="dark"] {
  --zc-bg-page:    var(--zc-void);
  --zc-bg-surface: var(--zc-void-2);
  --zc-bg-lifted:  var(--zc-void-3);
  --zc-bg-subtle:  #131316;

  --zc-fg-1:       #FAF8F2;
  --zc-fg-2:       #A3A3A8;
  --zc-fg-3:       #6B6B70;

  --zc-line:        rgba(255,255,255,0.10);
  --zc-line-strong: rgba(255,255,255,0.20);
}

/* ───────────────────────────────────────────────────────────
   Semantic typography mixins — apply these classes directly.
   ─────────────────────────────────────────────────────────── */

.zc-display-l {
  font-family: var(--zc-font-sans);
  font-weight: var(--zc-weight-medium);
  font-size: var(--zc-text-display-l);
  letter-spacing: var(--zc-track-display);
  line-height: var(--zc-leading-tight);
  color: var(--zc-fg-1);
}
.zc-h1 {
  font-family: var(--zc-font-sans);
  font-weight: var(--zc-weight-medium);
  font-size: var(--zc-text-h1);
  letter-spacing: var(--zc-track-heading);
  line-height: var(--zc-leading-snug);
  color: var(--zc-fg-1);
}
.zc-h2 {
  font-family: var(--zc-font-sans);
  font-weight: var(--zc-weight-medium);
  font-size: var(--zc-text-h2);
  letter-spacing: var(--zc-track-heading);
  line-height: var(--zc-leading-snug);
  color: var(--zc-fg-1);
}
.zc-h3 {
  font-family: var(--zc-font-sans);
  font-weight: var(--zc-weight-medium);
  font-size: var(--zc-text-h3);
  letter-spacing: var(--zc-track-heading);
  line-height: var(--zc-leading-snug);
  color: var(--zc-fg-1);
}
.zc-body-l {
  font-family: var(--zc-font-sans);
  font-weight: var(--zc-weight-regular);
  font-size: var(--zc-text-body-l);
  line-height: var(--zc-leading-base);
  letter-spacing: var(--zc-track-body);
  color: var(--zc-fg-1);
}
.zc-body {
  font-family: var(--zc-font-sans);
  font-weight: var(--zc-weight-regular);
  font-size: var(--zc-text-body-m);
  line-height: var(--zc-leading-base);
  letter-spacing: var(--zc-track-body);
  color: var(--zc-fg-1);
}
.zc-body-s {
  font-family: var(--zc-font-sans);
  font-weight: var(--zc-weight-regular);
  font-size: var(--zc-text-body-s);
  line-height: var(--zc-leading-base);
  color: var(--zc-fg-2);
}
.zc-label {
  font-family: var(--zc-font-mono);
  font-weight: var(--zc-weight-regular);
  font-size: var(--zc-text-label);
  letter-spacing: var(--zc-track-eyebrow);
  text-transform: uppercase;
  color: var(--zc-fg-2);
}
.zc-eyebrow {
  font-family: var(--zc-font-mono);
  font-weight: var(--zc-weight-regular);
  font-size: var(--zc-text-micro);
  letter-spacing: var(--zc-track-eyebrow-wide);
  text-transform: uppercase;
  color: var(--zc-fg-2);
}
.zc-mono {
  font-family: var(--zc-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.zc-numeric {
  font-family: var(--zc-font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
  letter-spacing: -0.01em;
}