/* ==========================================================================
   Revametrics Design Tokens
   Single source of truth for color, type, space, radius, shadow and motion.
   ========================================================================== */

:root {
  /* ---- Color: neutrals (engineering navy / charcoal) ---- */
  --navy-950: #050b14;
  --navy-900: #0a1424;
  --navy-800: #0f1c30;
  --navy-700: #16273e;
  --navy-600: #22364f;
  --navy-500: #344863;

  --ink-900: #0b1220;
  --ink-700: #29344a;
  --slate-600: #4a5670;
  --slate-500: #6b7690;
  --slate-400: #94a1b8;
  --slate-300: #c1cad9;
  --slate-200: #dde3ec;
  --slate-100: #eef1f6;

  --surface-0: #ffffff;
  --surface-1: #f7f9fc;
  --surface-2: #eef1f7;

  /* ---- Color: accent (restrained teal / signal green) ---- */
  --accent-700: #0a7d72;
  --accent-600: #0d9488;
  --accent-500: #12b5a6;
  --accent-400: #3fd0c1;
  --accent-100: #e3f7f4;
  --accent-050: #f1fbf9;

  --signal-amber: #b98a1b;
  --signal-amber-bg: #fbf3e1;
  --signal-red: #c4432f;
  --signal-red-bg: #fbebe8;

  /* ---- Text on dark ---- */
  --on-dark-primary: #f4f7fb;
  --on-dark-secondary: #aab6cc;
  --on-dark-muted: #7c88a3;

  /* ---- Semantic aliases ---- */
  --color-bg: var(--surface-0);
  --color-bg-alt: var(--surface-1);
  --color-text: var(--ink-900);
  --color-text-muted: var(--slate-600);
  --color-border: var(--slate-200);
  --color-accent: var(--accent-600);
  --color-accent-strong: var(--accent-700);

  /* ---- Typography ---- */
  --font-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas,
    monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ---- */
  --content-width: 1200px;
  --content-narrow: 760px;
  --gutter: 1.5rem;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---- Shadow (restrained) ---- */
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 18, 32, 0.08);
  --shadow-lg: 0 16px 40px rgba(11, 18, 32, 0.12);
  --shadow-dark: 0 20px 60px rgba(0, 0, 0, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ---- Z-index ---- */
  --z-nav: 100;
  --z-overlay: 200;
}