/*
 * tokens.css — spaluX design system (SINGLE SOURCE OF TRUTH)
 * Every component value (color, type size, spacing, radius, container width)
 * must reference one of these custom properties. No literals in components.
 * Canonical reference: OVERVIEW.md -> Design system. Do not change a value here
 * without flagging the user first.
 */

:root {
  /* — Color — brand red is fixed; neutrals derived for a true-dark palette — */
  --color-bg:          #0A0A0B;  /* true-dark background */
  --color-surface:     #141416;  /* raised panels / cards */
  --color-surface-2:   #1E1E22;  /* nested surfaces, inputs */
  --color-border:      #2A2A2E;  /* hairlines, dividers */
  --color-text:        #F4F4F5;  /* near-white body/headings */
  --color-text-muted:  #A1A1AA;  /* secondary text, captions */
  --color-brand:       #C50022;  /* THE red — accent only; matches the logo X */
  --color-brand-hover: #E50028;  /* interactive hover state — brighter, same hue */

  /* — Type — Manrope (display/heading/subheading), Inter (body/caption) — */
  --font-display:  "Manrope", system-ui, sans-serif;  /* self-hosted woff2 */
  --font-body:     "Inter",   system-ui, sans-serif;  /* self-hosted woff2 */
  --type-display:    clamp(2.5rem, 6vw, 4.5rem);    /* Manrope 700/800 */
  --type-heading:    clamp(1.75rem, 3.5vw, 2.5rem); /* Manrope 700 */
  --type-subheading: 1.25rem;                        /* Manrope 600 */
  --type-body:       1rem;                            /* Inter 400 */
  --type-caption:    0.8125rem;                       /* Inter 400/500 */

  /* — Line-height — unitless scale — */
  --leading-none:   1;     /* lockup — set to cap height, no extra leading */
  --leading-tight:  1.1;   /* display, headings */
  --leading-snug:   1.3;   /* subheadings */
  --leading-normal: 1.5;   /* body, captions */

  /* — Font-weight — maps 1:1 to the self-hosted faces — */
  --weight-regular:   400;  /* Inter body */
  --weight-medium:    500;  /* Inter caption */
  --weight-semibold:  600;  /* Manrope subheading */
  --weight-bold:      700;  /* Manrope heading/display */
  --weight-extrabold: 800;  /* Manrope display emphasis */

  /* — Letter-spacing (tracking) — added Step 1, approved — */
  --tracking-tight:  -0.02em;  /* large display type */
  --tracking-normal: 0;        /* body default */
  --tracking-wide:   0.12em;   /* eyebrows, uppercase micro-labels */

  /* — Radii — sharp by default; pills for interactive — */
  --radius-none: 0px;     /* cards, sections, media, inputs (default) */
  --radius-pill: 999px;   /* buttons, pill elements */
  --radius-soft: 2px;     /* APPROVAL-GATED fallback — do not use without a yes */

  /* — Border widths — hairline by default for a clinical edge — added Step 1, approved — */
  --border-hairline: 1px;  /* inputs, dividers, cards */
  --border-thin:     2px;  /* focus rings, emphasis edges */

  /* — Spacing scale (px) — use exclusively for margin/padding/gap — */
  --space-2: 2px;   --space-4: 4px;   --space-8: 8px;   --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;
  --space-80: 80px; --space-96: 96px;

  /* — Layout primitives — */
  --container-max:    1280px;            /* page max width */
  --container-narrow: 640px;             /* centered copy columns (coming-soon, hero copy) */
  --container-pad:    var(--space-24);
  --grid-cols: 12;

  /* — Motion — restrained, premium; respect prefers-reduced-motion — added Step 1, approved — */
  --duration-fast: 200ms;  /* hovers, small transitions */
  --duration-base: 400ms;  /* standard transitions */
  --duration-slow: 700ms;  /* entrance reveals */
  --duration-ambient: 28s; /* slow, continuous background loops (mesh) — added Step 1 polish, approved */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* decelerate — calm, expensive feel */

  /*
   * Breakpoints: REFERENCE LIST ONLY. CSS custom properties cannot be used inside
   * @media conditions and there is no preprocessor, so the literal px is written
   * directly in @media, each commented with the token name it corresponds to —
   * for example: @media (min-width: 768px) -- token: --bp-md
   */
  --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
}