/*
  Design tokens for the METAL99 website.
  Derived from the Frame.io style reference (DESIGN.md / tokens.json),
  with the dominant violet accent replaced by a steel-blue accent
  as requested:
    --color-twilight       #4f4f80 -> #1a3f76
    --color-specter-lilac  #dedfee -> #cfd8f4
*/
:root {
  /* Colors */
  --color-carbon-vellum: #fcfcfc;
  --color-obsidian: #0a0a13;
  --color-pitch: #000000;
  --color-void: #040407;
  --color-graphite: #08080c;
  --color-smoke: #e3e3e3;
  --color-ash: #a3a3b3;
  --color-charcoal: #2a2a32;
  --color-iris-glow: #6199f6;
  --color-twilight: #1a3f76;     /* steel blue (was #4f4f80 violet) */
  --color-specter-lilac: #cfd8f4; /* steel blue highlight (was #dedfee lilac) */

  /* Typography - Font Families (FrameGothic / FrameGothic Fallback) */
  --font-framegothic: "FrameGothic", "FrameGothic Fallback", 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-neuemachinainktrap: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-arial: Arial, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography - Scale */
  --text-caption: 12px;
  --leading-caption: 1.45;
  --tracking-caption: 0.72px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.5;
  --text-body: 16px;
  --leading-body: 1.45;
  --tracking-body: 0.16px;
  --text-subheading: 18px;
  --leading-subheading: 1.3;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.72px;
  --text-heading: 38px;
  --leading-heading: 1.04;
  --tracking-heading: -1.33px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.02;
  --tracking-heading-lg: -1.92px;
  --text-display: 80px;
  --leading-display: 0.96;
  --tracking-display: -3.6px;

  /* Typography - Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-144: 144px;
  --spacing-160: 160px;
  --spacing-176: 176px;

  /* Layout */
  --page-max-width: 1280px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 24px;
  --nav-height: 88px;

  /* Border Radius */
  --radius-sm: 1px;
  --radius-lg: 10px;
  --radius-3xl: 24px;
  --radius-full: 100px;

  /* Named Radii */
  --radius-nav: 100px;
  --radius-cards: 10px;
  --radius-pills: 100px;
  --radius-buttons: 100px;
  --radius-dividers: 1px;
  --radius-featurecards: 24px;

  /* Surfaces */
  --surface-cosmic-canvas: #0a0a13;
  --surface-nav-veil: #040407;
  --surface-product-surface: #08080c;
  --surface-card-halo: #0f1a2b; /* steel-blue tinted (was #181826 violet) */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-medium: 280ms;
}