/* ============================================================
   Qyverix Design System — Tokens
   Precision Darkness. One accent. Warm off-white type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --base:           #050508;
  --surface:        #0a0a12;
  --surface-alt:    #111120;
  --navy:           #0d0d1a;
  --border:         rgba(180,150,80,0.18);

  /* ---------- Color: text ---------- */
  --text-primary:   #f0ece0;
  --text-secondary: #8a8a9a;
  --text-tertiary:  #4a4a58;

  /* ---------- Color: accent (Qyverix gold) ---------- */
  --accent:         #c8a84b;
  --accent-light:   #e6c96e;
  --accent-dark:    #7c5c1e;
  --accent-surface: rgba(200,168,75,0.06);
  --gold3:          #f5dfa0;

  /* ---------- Color: additional ---------- */
  --teal:           #1ecbc8;
  --purple:         #6a4fc8;

  /* ---------- Color: semantic ---------- */
  --success:        #34d399;
  --warning:        #fbbf24;

  /* ---------- Type: families ---------- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-caps:    'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type: scale ---------- */
  --text-hero:     clamp(3.5rem, 5.5vw, 5.5rem);   /* 56 – 88 */
  --text-section:  clamp(2.25rem, 3.5vw, 3.25rem); /* 36 – 52 */
  --text-display-sm: 2rem;       /* 32 */
  --text-card:     1.25rem;      /* 20 */
  --text-lead:     1.125rem;     /* 18 */
  --text-body:     1.0625rem;    /* 17 */
  --text-small:    0.9375rem;    /* 15 */
  --text-label:    0.8125rem;    /* 13 */
  --text-mono:     0.75rem;      /* 12 */

  /* ---------- Type: tracking ---------- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ---------- Type: leading ---------- */
  --leading-tight: 1.05;
  --leading-snug:  1.1;
  --leading-body:  1.7;

  /* ---------- Spacing (8pt base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hairline: 1px solid var(--border);

  /* ---------- Shadows ---------- */
  --shadow-lift: 0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --shadow-glow: 0 0 0 1px rgba(200,168,75,0.4), 0 12px 40px rgba(200,168,75,0.15);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);    /* expo.out */
  --ease-inout: cubic-bezier(0.83, 0, 0.17, 1);   /* expo.inOut */
  --ease-snap:  cubic-bezier(0.4, 0, 0.2, 1);     /* power2.out */
  --dur-quick:  180ms;
  --dur-base:   280ms;
  --dur-slow:   600ms;

  /* ---------- Layout ---------- */
  --container-max: 1360px;
  --gutter-desktop: 24px;
  --gutter-mobile:  16px;
}

/* ============================================================
   Base type + page rules
   ============================================================ */

html { background: var(--base); color-scheme: dark; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Cormorant Garamond serif, tight tracking */
h1, h2, h3, h4, h5, h6,
.h-hero, .h-section, .h-card {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  text-wrap: balance;
}

h1, .h-hero {
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
}
h2, .h-section { font-size: var(--text-section); }
h3, .h-card    {
  font-size: var(--text-card);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
}

/* Caps moments — section labels, logo echoes — use Cinzel */
.caps {
  font-family: var(--font-caps);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Body */
p, .p { font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-primary); }
p.lead { font-size: var(--text-lead); color: var(--text-secondary); max-width: 60ch; }
p.muted { color: var(--text-secondary); }
small, .small { font-size: var(--text-small); }

/* Labels / eyebrows */
.label, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Section number — monospace */
.section-num {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.section-num .num { color: var(--accent); }

/* Links */
a { color: var(--accent); text-decoration: none; transition: color var(--dur-base) var(--ease-snap); }
a:hover { color: var(--accent-light); }

/* Selection */
::selection { background: var(--accent-dark); color: var(--text-primary); }

/* Focus ring — keyboard only, never on click */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}