/*
  tokens.css
  Design tokens ONLY — no component or layout rules belong in this file.
  Values transcribed verbatim from the approved Design Specification
  (Color System, Typography System, Spacing System, Motion System,
  Border Radius, Layout Widths). Do not edit values here without an
  approved Design Specification change.
*/

:root {
  color-scheme: dark;

  /* ============================================================
     COLOR — Accent (Electric Violet, primary)
     ============================================================ */
  --color-accent-50:  #EDE9FE;
  --color-accent-100: #DDD6FE;
  --color-accent-200: #C4B5FD;
  --color-accent-400: #A78BFA;
  --color-accent-500: #8B5CF6;   /* Primary accent */
  --color-accent-600: #7C3AED;   /* Hover state */
  --color-accent-800: #5B21B6;   /* Deep/pressed */

  /* Swap-ready — Cyber Blue theme.
     To switch themes, replace the --color-accent-* values above with:
     --color-accent-500: #3B82F6;
     --color-accent-600: #2563EB;
     --color-accent-400: #60A5FA;
     ...and change --color-accent-tag-bg (below) to #0A1628.
     No component-level changes required. */

  /* ============================================================
     COLOR — Backgrounds
     ============================================================ */
  --color-bg-base:    #090909;   /* Absolute base */
  --color-bg-page:    #111111;   /* Main page bg */
  --color-bg-surface: #0D0D0D;   /* Mission control zone bg */
  --color-bg-card:    #141414;   /* Card background */
  --color-bg-hover:   #1A1A1A;   /* Hover on card */
  --color-bg-input:   #141414;   /* Form input bg */

  /* ============================================================
     COLOR — Borders
     ============================================================ */
  --color-border-subtle:  #1A1A1A;
  --color-border-default: #222222;
  --color-border-strong:  #2A2A2A;

  /* ============================================================
     COLOR — Text
     ============================================================ */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #A1A1AA;
  --color-text-tertiary:  #71717A;
  --color-text-muted:     #52525B;
  --color-text-disabled:  #3F3F46;

  /* ============================================================
     COLOR — Semantic / SOC status
     ============================================================ */
  --color-status-ok:      #10B981;   /* Active, success, online */
  --color-status-warn:    #F59E0B;   /* In progress, caution */
  --color-status-alert:   #EF4444;   /* Critical, error */
  --color-status-neutral: #6B7280;   /* Muted, offline */

  /* Semantic backgrounds (low opacity) */
  --color-status-ok-bg:    #10B98118;
  --color-status-warn-bg:  #F59E0B18;
  --color-status-alert-bg: #EF444418;
  --color-accent-bg:       #8B5CF618;
  --color-accent-tag-bg:   #1E1529;   /* Tag/badge fill */

  /* Zone transition (spec §2) */
  --color-zone-divider: #1A1A1A;      /* border-top between zones */

  /* ============================================================
     TYPOGRAPHY — Font stacks
     ============================================================ */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ============================================================
     TYPOGRAPHY — Type scale
     Ranged sizes (spec gives a mobile→desktop range) use clamp()
     so type scales fluidly between the given bounds without a
     separate breakpoint override. Fixed sizes use a single rem value.
     Tracking/line-height are separate tokens applied alongside size.
     ============================================================ */
  --text-display-size: clamp(3rem, 2.7rem + 1.3vw, 3.5rem);       /* 48–56px */
  --text-display-weight: 700;
  --text-display-tracking: -2.5px;
  --text-display-leading: 1.04;

  --text-h1-size: clamp(2.25rem, 2.1rem + 0.7vw, 2.5rem);          /* 36–40px */
  --text-h1-weight: 700;
  --text-h1-tracking: -1.8px;
  --text-h1-leading: 1.05;

  --text-h2-size: clamp(1.375rem, 1.3rem + 0.35vw, 1.625rem);      /* 22–26px */
  --text-h2-weight: 700;
  --text-h2-tracking: -0.8px;
  --text-h2-leading: 1.15;

  --text-h3-size: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);        /* 17–20px */
  --text-h3-weight: 600;
  --text-h3-tracking: -0.5px;
  --text-h3-leading: 1.25;

  --text-body-lg-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);    /* 15–16px */
  --text-body-lg-weight: 400;
  --text-body-lg-tracking: 0;
  --text-body-lg-leading: 1.7;

  --text-body-size: 0.8125rem;                                      /* 13px, fixed */
  --text-body-weight: 400;
  --text-body-tracking: 0;
  --text-body-leading: 1.65;

  --text-label-size: 0.6875rem;                                     /* 11px, fixed */
  --text-label-weight: 500;
  --text-label-tracking: 0.12em;
  --text-label-leading: 1.4;

  --text-caption-size: clamp(0.625rem, 0.6rem + 0.06vw, 0.6875rem); /* 10–11px */
  --text-caption-weight: 500;
  --text-caption-tracking: 0.1em;
  --text-caption-leading: 1.4;

  --text-mono-size: clamp(0.75rem, 0.72rem + 0.06vw, 0.8125rem);    /* 12–13px */
  --text-mono-weight-regular: 400;
  --text-mono-weight-medium: 500;
  --text-mono-tracking: 0;
  --text-mono-leading: 1.6;

  /* ============================================================
     SPACING — 4px base unit
     ============================================================ */
  --space-1:  4px;    /* Icon gaps, tight inline */
  --space-2:  8px;    /* Badge padding, small gaps */
  --space-3:  12px;   /* Card internal gaps */
  --space-4:  16px;   /* Card padding, row gaps */
  --space-5:  20px;   /* Nav height rhythm */
  --space-6:  24px;   /* Section inner padding */
  --space-8:  32px;   /* Component vertical gaps */
  --space-10: 40px;   /* Compact section padding */
  --space-12: 48px;   /* Standard section padding */
  --space-14: 56px;   /* Section padding (editorial) */
  --space-16: 64px;   /* CTA section padding */
  --space-20: 80px;   /* Hero vertical breathing room */
  --space-24: 96px;   /* Hero top padding */

  /* ============================================================
     LAYOUT — Widths & page padding
     ============================================================ */
  --max-width-content: 1100px;   /* Main content container */
  --max-width-text:    640px;    /* Prose / readable text */
  --page-padding-x:        32px; /* Horizontal page padding (desktop) */
  --page-padding-x-mobile: 20px; /* Horizontal page padding (mobile) */

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:  4px;   /* Badges, tags, diff pills */
  --radius-md:  6px;   /* Buttons, inputs */
  --radius-lg:  8px;   /* Small cards, tool groups */
  --radius-xl:  10px;  /* Standard cards */
  --radius-2xl: 12px;  /* Large cards, platform cards */
  --radius-3xl: 16px;  /* Featured project card */
  --radius-pill: 999px; /* Fully-rounded shape — Chips, Pill component (Milestone 3.2) */

  /* ============================================================
     MOTION
     ============================================================ */
  --duration-fast:   150ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.4, 0.0, 0.2, 1);

  /* Nav bar fixed dimension (spec §7) */
  --nav-height: 56px;
}