/**
 * Casipot Design Tokens
 * Single source of truth — colors, type, space, elevation, motion, controls
 */

:root {
  /* ——— Colors ——— */
  --color-bg: #060b09;
  --color-bg-2: #0a1210;
  --color-surface: #0e1714;
  --color-surface-2: #131f1b;
  --color-primary: #1aad32;
  --color-primary-hover: #159528;
  --color-primary-ink: #041008;
  --color-accent: #d4c104;
  --color-accent-hover: #b8a803;
  --color-accent-ink: #161400;
  --color-text: #eef4f1;
  --color-text-2: #9aada4;
  --color-text-3: #6b7f76;
  --color-border: rgba(238, 244, 241, 0.08);
  --color-border-strong: rgba(238, 244, 241, 0.14);
  --color-live: #1aad32;
  --color-link-hover: #3bc24f;
  --color-focus: #1aad32;
  --color-scrim: rgba(0, 0, 0, 0.55);

  /* ——— Typography ——— */
  --font-display: "Outfit", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;

  --fs-caption: 0.75rem;
  --fs-label: 0.8125rem;
  --fs-button: 0.875rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.0625rem;
  --fs-h3: 1.125rem;
  --fs-h2: clamp(1.5rem, 2.4vw, 1.875rem);
  --fs-display: clamp(2.25rem, 5vw, 3.5rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-display: 650;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;
  --lh-label: 1.3;

  --tracking-display: -0.04em;
  --tracking-heading: -0.03em;
  --tracking-h3: -0.02em;
  --tracking-label: 0.08em;
  --tracking-button: 0.01em;
  --tracking-caption: 0.02em;

  /* ——— Spacing (8px base) ——— */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 104px;

  /* ——— Radius (no pills) ——— */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ——— Shadows / Elevation ——— */
  --shadow-none: none;
  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.35);
  --elev-0: none;
  --elev-1: 0 0 0 1px var(--color-border);
  --elev-2: var(--shadow-soft);

  /* ——— Grid / Container ——— */
  --container: 1220px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 68px;
  --radius-panel: 16px;
  --section-pad: clamp(96px, 9vw, 128px);
  --grid-hero-copy: 1.15fr;
  --grid-hero-panel: 0.85fr;
  --grid-advantage-main: 1.4fr;
  --grid-advantage-side: 1fr;
  --bp-nav: 960px;

  /* ——— Animation ——— */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 0.2s;
  --duration-drawer: 0.28s;
  --duration-reveal: 0.45s;
  --reveal-distance: 12px;
  --hover-lift: -1px;

  /* ——— Buttons ——— */
  --btn-h: 44px;
  --btn-h-lg: 48px;
  --btn-h-sm: 36px;
  --btn-px: 18px;
  --btn-px-lg: 22px;
  --btn-px-sm: 14px;
  --btn-radius: var(--radius-sm);

  /* ——— Forms ——— */
  --input-h: 44px;
  --input-px: 14px;
  --input-bg: var(--color-surface);
  --input-border: var(--color-border-strong);
  --input-radius: var(--radius-sm);
  --focus-ring: 2px;
  --focus-offset: 3px;

  /* ——— Z-index ——— */
  --z-header: 100;
  --z-drawer: 300;
  --z-toast: 400;
}