/* ============================================================
   ANTIPHASE TECHNOLOGIES — DESIGN TOKENS v2.0
   Pure monochrome. Surgical. Editorial.
   Single source of truth for all design decisions.
   ============================================================ */

:root {

  /* ────────────────────────────────────────
     COLOR — Backgrounds (Pure Black)
  ──────────────────────────────────────── */
  --color-bg:           #000000;
  --color-surface:      #0A0A0A;
  --color-surface-2:    #111111;
  --color-surface-3:    #1A1A1A;

  /* ────────────────────────────────────────
     COLOR — Borders
  ──────────────────────────────────────── */
  --color-border:         rgba(255, 255, 255, 0.07);
  --color-border-mid:     rgba(255, 255, 255, 0.12);
  --color-border-light:   rgba(255, 255, 255, 0.20);

  /* ────────────────────────────────────────
     COLOR — Text (White spectrum)
  ──────────────────────────────────────── */
  --color-text-primary:    #FFFFFF;
  --color-text-secondary:  rgba(255, 255, 255, 0.75);
  --color-text-muted:      rgba(255, 255, 255, 0.45);
  --color-text-inverse:    #000000;

  /* ────────────────────────────────────────
     COLOR — Accent (Pure White)
     Rationale: Monochrome brand identity.
     Interactions use opacity, not hue.
  ──────────────────────────────────────── */
  --color-accent:          #FFFFFF;
  --color-accent-light:    rgba(255, 255, 255, 0.85);
  --color-accent-dim:      rgba(255, 255, 255, 0.35);
  --color-accent-glow:     rgba(255, 255, 255, 0.08);
  --color-accent-alpha-sm: rgba(255, 255, 255, 0.05);
  --color-accent-alpha-md: rgba(255, 255, 255, 0.10);

  /* ────────────────────────────────────────
     COLOR — Semantic
  ──────────────────────────────────────── */
  --color-success:  rgba(255, 255, 255, 0.7);
  --color-error:    rgba(255, 80, 80, 0.9);
  --color-warning:  rgba(255, 180, 80, 0.9);

  /* ────────────────────────────────────────
     TYPOGRAPHY — Families
     Space Grotesk: geometric, technical, premium.
     Inter: optimal for body text.
  ──────────────────────────────────────── */
  --font-display:   'Space Grotesk', sans-serif;
  --font-primary:   'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* ────────────────────────────────────────
     TYPOGRAPHY — Scale
  ──────────────────────────────────────── */
  --text-xs:     0.6875rem;    /* 11px */
  --text-sm:     0.8125rem;    /* 13px */
  --text-base:   1rem;         /* 16px */
  --text-lg:     1.125rem;     /* 18px */
  --text-xl:     1.25rem;      /* 20px */
  --text-2xl:    1.5rem;       /* 24px */
  --text-3xl:    2rem;         /* 32px */
  --text-4xl:    2.75rem;      /* 44px */
  --text-5xl:    3.75rem;      /* 60px */
  --text-hero:   clamp(3.5rem, 8.5vw, 7.5rem);

  /* ────────────────────────────────────────
     TYPOGRAPHY — Weights
  ──────────────────────────────────────── */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ────────────────────────────────────────
     TYPOGRAPHY — Line Heights
  ──────────────────────────────────────── */
  --leading-none:    1;
  --leading-tight:   1.05;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* ────────────────────────────────────────
     TYPOGRAPHY — Letter Spacing
  ──────────────────────────────────────── */
  --tracking-tightest: -0.06em;
  --tracking-tight:    -0.03em;
  --tracking-normal:    0em;
  --tracking-wide:      0.06em;
  --tracking-widest:    0.15em;
  --tracking-label:     0.14em;

  /* ────────────────────────────────────────
     SPACING — 8px base grid
  ──────────────────────────────────────── */
  --space-1:    0.25rem;    /*  4px */
  --space-2:    0.5rem;     /*  8px */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */
  --space-40:   10rem;      /* 160px */
  --space-48:   12rem;      /* 192px */

  /* ────────────────────────────────────────
     LAYOUT
  ──────────────────────────────────────── */
  --container-max:     1280px;
  --container-wide:    1440px;
  --nav-height:        72px;
  --section-pad-y:     clamp(var(--space-16), 9vw, var(--space-40));
  --section-pad-x:     var(--space-8);

  /* ────────────────────────────────────────
     BORDER RADIUS
  ──────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ────────────────────────────────────────
     MOTION — Precise, no bounce, no spring.
  ──────────────────────────────────────── */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-circ:   cubic-bezier(0, 0.55, 0.45, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-expo:    cubic-bezier(0.7, 0, 0.84, 0);

  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    260ms;
  --duration-slow:    420ms;
  --duration-reveal:  750ms;

  /* ────────────────────────────────────────
     SHADOWS
  ──────────────────────────────────────── */
  --shadow-sm:     0 1px 4px  rgba(0, 0, 0, 0.6);
  --shadow-md:     0 4px 20px rgba(0, 0, 0, 0.7);
  --shadow-lg:     0 12px 48px rgba(0, 0, 0, 0.8);
  --shadow-xl:     0 24px 80px rgba(0, 0, 0, 0.9);
  --shadow-accent: 0 0 40px rgba(255, 255, 255, 0.06);

  /* ────────────────────────────────────────
     Z-INDEX
  ──────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
}