/* =========================================================================
   Legado Design System — Tokens + Type Presets
   Single source of truth. Import once at app root.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Inter:wght@400;500;600;700&family=Fragment+Mono&display=swap');

:root {
  /* ── SURFACE HIERARCHY (4 layers, warm-dark) ──────────────────────────── */
  --ds-bg-0: #050505;     /* page body */
  --ds-bg-1: #0f0f0f;     /* alternate sections */
  --ds-bg-2: #171615;     /* cards, nav, chips */
  --ds-bg-3: #1e1c1a;     /* modals, dropdowns */

  /* aliases used in the brief */
  --color-bg-base:     var(--ds-bg-0);
  --color-bg-subtle:   var(--ds-bg-1);
  --color-bg-elevated: var(--ds-bg-2);
  --color-bg-overlay:  var(--ds-bg-3);

  /* ── TEXT (3 levels via color, not opacity) ───────────────────────────── */
  --ds-text-high: #ffffff;
  --ds-text-mid:  #858585;
  --ds-text-low:  #4a4a4a;

  --color-text-primary:   var(--ds-text-high);
  --color-text-secondary: var(--ds-text-mid);
  --color-text-disabled:  var(--ds-text-low);

  /* ── BORDERS (3 alpha levels) ─────────────────────────────────────────── */
  --ds-border-low:  rgba(255, 255, 255, 0.08);
  --ds-border-mid:  rgba(255, 255, 255, 0.14);
  --ds-border-high: rgba(255, 255, 255, 0.22);

  --color-border-subtle:   var(--ds-border-low);
  --color-border-default:  var(--ds-border-mid);
  --color-border-emphasis: var(--ds-border-high);

  /* ── ACCENT (1 only) ──────────────────────────────────────────────────── */
  --ds-accent:       rgb(201, 168, 76);   /* #C9A84C — Legado heritage gold (brand) */
  --ds-accent-hi:    rgb(224, 195, 110);  /* #E0C36E — warm highlight (hover/glow) */
  --ds-accent-deep:  rgb(158, 128, 50);   /* #9E8032 — deeper antique tone */
  --ds-accent-ghost: rgba(201, 168, 76, 0.12);
  --ds-accent-ring:  rgba(201, 168, 76, 0.32);

  --color-accent:       var(--ds-accent);
  --color-accent-hover: var(--ds-accent-hi);
  --color-accent-muted: var(--ds-accent-ghost);

  /* ── STATUS ───────────────────────────────────────────────────────────── */
  --ds-success: #22c55e;
  --ds-warning: #f59e0b;
  --ds-error:   #ef4444;

  /* ── RADIUS ───────────────────────────────────────────────────────────── */
  --ds-r-xs:   6px;
  --ds-r-sm:  10px;
  --ds-r-md:  12px;
  --ds-r-lg:  16px;
  --ds-r-xl:  24px;
  --ds-r-pill: 9999px;

  /* ── SPACING (4px base, multiplicative) ───────────────────────────────── */
  --ds-sp-1:   4px;
  --ds-sp-2:   8px;
  --ds-sp-3:  12px;
  --ds-sp-4:  16px;
  --ds-sp-5:  24px;
  --ds-sp-6:  32px;
  --ds-sp-7:  48px;
  --ds-sp-8:  64px;
  --ds-sp-9:  96px;
  --ds-sp-10: 128px;

  /* ── SHADOWS ──────────────────────────────────────────────────────────── */
  --ds-shadow-card:        0 4px 24px rgba(0, 0, 0, 0.40);
  --ds-shadow-card-hover:  0 8px 40px rgba(0, 0, 0, 0.50);
  --ds-shadow-focus:       0 0 0 3px var(--ds-accent-ring);
  --ds-shadow-floating:    0 1px 0 rgba(255, 255, 255, 0.06);

  /* ── MOTION ───────────────────────────────────────────────────────────── */
  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ds-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ds-dur-micro:     150ms;
  --ds-dur-standard:  200ms;
  --ds-dur-motion:    300ms;
  --ds-dur-entrance:  550ms;

  /* ── TYPE FAMILIES ────────────────────────────────────────────────────── */
  /* Inter Display falls back to Inter at heavier weights with tighter tracking
     until the licensed Display optical variant is dropped into fonts/. */
  --font-display:  'Inter Display', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-wordmark: 'Allura', 'Apple Chancery', cursive;  /* used ONLY for the Legado wordmark */

  /* ── LAYOUT ───────────────────────────────────────────────────────────── */
  --ds-container: 1100px;
  --ds-bp-sm:     640px;
  --ds-bp-md:     810px;
  --ds-bp-lg:    1200px;
}

/* =========================================================================
   Type Presets — apply with class names
   ========================================================================= */
.type-display { font: 700 clamp(40px, 5vw, 72px)/1.05 var(--font-display); letter-spacing: -0.02em;  color: var(--ds-text-high); }
.type-h1      { font: 700 clamp(32px, 4vw, 56px)/1.10 var(--font-display); letter-spacing: -0.02em;  color: var(--ds-text-high); }
.type-h2      { font: 600 clamp(24px, 3vw, 40px)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--ds-text-high); }
.type-h3      { font: 600 24px/1.2  var(--font-display); letter-spacing: -0.01em;  color: var(--ds-text-high); }
.type-h4      { font: 600 18px/1.3  var(--font-body);    letter-spacing: -0.005em; color: var(--ds-text-high); }
.type-body-lg { font: 400 18px/1.6  var(--font-body);    letter-spacing: 0;        color: var(--ds-text-mid);  }
.type-body    { font: 400 16px/1.6  var(--font-body);    letter-spacing: 0;        color: var(--ds-text-mid);  }
.type-small   { font: 400 14px/1.5  var(--font-body);    letter-spacing: 0;        color: var(--ds-text-mid);  }
.type-btn     { font: 600 16px/1    var(--font-display); letter-spacing: -0.01em;  color: var(--ds-text-high); }
.type-mono    { font: 400 13px/1.4  var(--font-mono);    letter-spacing: 0;        color: var(--ds-text-mid);  }
.type-label   { font: 500 12px/1.3  var(--font-body);    letter-spacing: 0.07em;   color: var(--ds-text-mid);  text-transform: uppercase; }

/* =========================================================================
   Reset / sane defaults
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ds-bg-0);
  color: var(--ds-text-high);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ds-accent); color: #fff; }

/* Reduced motion: kill all reveal/marquee */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}