/* === Attest — Design Tokens === */
:root {
  /* ── Deep Dark Emerald & Obsidian Color System (Brand Aligned) ── */
  --color-base:          #020C0A;
  --color-canvas:        #020C0A;
  --color-surface:       #051814;
  --color-surface-2:     #08241D;
  --color-surface-3:     #0C3027;
  --color-surface-brand: #041A15;
  --color-surface-hover: #0F382E;
  
  --color-border:        rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-border-accent: rgba(16, 185, 129, 0.16);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text:          #FFFFFF;
  --color-text-secondary:#D1DBD6;
  --color-text-tertiary: #8E9F98;
  --color-text-muted:    #546660;
  --color-text-invert:   #020C0A;

  /* Executive Accents (Deep Emerald & White highlights - NO neon glow) */
  --color-accent:        #FFFFFF;
  --color-accent-dark:   #064E3B;
  --color-accent-deep:   #042F2E;
  --color-accent-strong: #0D6B4F;
  --color-accent-subtle: rgba(6, 78, 59, 0.20);
  --color-accent-hover:  #F3F6F4;
  --color-telemetry:     #E6EDE9;
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --color-success:       #10B981;

  --surface-glass:       rgba(5, 24, 20, 0.85);
  --surface-glass-strong:rgba(8, 36, 29, 0.95);
  --shadow-glass:        0 18px 56px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --shadow-focus:        0 0 0 2px rgba(255, 255, 255, 0.25);

  /* ── Typography ── */
  --font-brand:   'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-display: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Roboto Mono', Menlo, monospace;

  --fs-display-xl: clamp(3.25rem, 6.4vw, 6.5rem);
  --fs-display:    clamp(2.6rem, 5vw, 5rem);
  --fs-display-sm: clamp(2rem, 3.6vw, 3.25rem);
  --fs-h1:         clamp(2rem, 3.5vw, 3rem);
  --fs-h2:         clamp(1.6rem, 2.5vw, 2.2rem);
  --fs-h3:         clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-body-lg:    clamp(1.1rem, 1.3vw, 1.25rem);
  --fs-body:       clamp(0.95rem, 1.1vw, 1.05rem);
  --fs-body-sm:    clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-caption:    clamp(0.7rem, 0.8vw, 0.8rem);
  --fs-label:      clamp(0.65rem, 0.75vw, 0.75rem);

  --lh-display:    1.05;
  --lh-heading:    1.15;
  --lh-body:       1.7;

  --ls-display:    -0.03em;
  --ls-heading:    -0.02em;
  --ls-body:       0;
  --ls-label:      0.12em;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* ── Spacing ── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;
  --space-3xl:  8rem;
  --space-4xl:  12rem;
  --space-5xl:  16rem;

  --section-gap: clamp(4.75rem, 8vw, 8.5rem);

  /* ── Layout ── */
  --container-max:   1280px;
  --container-narrow: 900px;
  --container-wide:  1400px;
  --gutter:          clamp(1.5rem, 4vw, 4rem);

  /* ── Borders ── */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --border-thin: 1px solid var(--color-border);
  --border-accent: 1px solid var(--color-border-accent);

  /* ── Transitions ── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:     cubic-bezier(0.2, 0.8, 0.2, 1);

  --duration-instant: 120ms;
  --duration-fast:    180ms;
  --duration-normal:  220ms;
  --duration-slow:    260ms;
  --duration-reveal:  280ms;

  /* ── Z-index ── */
  --z-base:      1;
  --z-above:     10;
  --z-overlay:   100;
  --z-nav:       1000;
  --z-modal:     10000;
}