/* ==========================================================================
   JTComputers — Design Tokens
   Single source of truth for colour, type, spacing, elevation and motion.
   Prototype note: these map 1:1 to a production theme file / Tailwind config.
   ========================================================================== */

:root {
  /* ---------- Brand ---------- */
  --navy-900: #06101f;
  --navy-800: #0a1a2f;
  --navy-700: #0f2440;
  --navy-600: #163254;
  --navy-500: #1e4270;

  --blue-700: #1249b5;
  --blue-600: #1657d0;
  --blue-500: #2b6ef0;
  --blue-400: #5b93f7;
  --blue-100: #e3edfe;
  --blue-50:  #f2f7ff;

  /* Logo blues. The motion layer accents (hero sheen, scroll progress, grade
     rails) pull from these rather than the UI blue above, so the decorative
     chrome matches the mark while buttons and links stay the action colour.
     They were previously inlined as fallbacks in motion.css; the values are
     unchanged, they just live in one place now. */
  --brand-600: #1b7fb8;
  --brand-500: #2da6df;
  --brand-300: #7fd8e8;
  --brand-200: #b8e4f5;

  --cyan-500: #0aa5c2;
  --cyan-100: #d9f3f8;

  /* ---------- Neutrals ---------- */
  --ink-900: #0d1521;
  --ink-800: #16202f;
  --ink-700: #26344a;
  --ink-600: #41526d;
  --ink-500: #5f7089;
  --ink-400: #8a97ab;
  --ink-300: #b6c0ce;
  --ink-200: #dbe2ec;
  --ink-150: #e7ecf3;
  --ink-100: #f1f4f9;
  --ink-50:  #f7f9fc;
  --white:   #ffffff;

  /* ---------- Status ---------- */
  --success-600: #0b8a52;
  --success-500: #12a866;
  --success-100: #e2f6ec;
  --warn-600:    #b76e00;
  --warn-500:    #e08700;
  --warn-100:    #fdf1dd;
  --danger-600:  #c0392f;
  --danger-500:  #e04a3d;
  --danger-100:  #fdeae8;
  --info-500:    var(--blue-500);
  --info-100:    var(--blue-100);

  /* ---------- Semantic ---------- */
  --bg-page: var(--ink-50);
  --bg-surface: var(--white);
  --bg-sunken: var(--ink-100);
  --bg-inverse: var(--navy-800);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-inverse: var(--white);
  --text-link: var(--blue-600);

  --border-subtle: var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);

  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-soft: var(--blue-50);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.8125rem;  /* 13 */
  --fs-base:0.875rem;   /* 14 */
  --fs-md:  0.9375rem;  /* 15 */
  --fs-lg:  1.0625rem;  /* 17 */
  --fs-xl:  1.25rem;    /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.9375rem;  /* 31 */
  --fs-4xl: 2.5rem;     /* 40 */
  --fs-5xl: 3.25rem;    /* 52 */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

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

  --tracking-tight: -0.02em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* ---------- Spacing (4pt) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---------- Radius ---------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-xs: 0 1px 2px rgba(13, 21, 33, 0.06);
  --sh-sm: 0 1px 3px rgba(13, 21, 33, 0.07), 0 1px 2px rgba(13, 21, 33, 0.04);
  --sh-md: 0 4px 12px rgba(13, 21, 33, 0.08), 0 1px 3px rgba(13, 21, 33, 0.04);
  --sh-lg: 0 12px 28px rgba(13, 21, 33, 0.12), 0 2px 6px rgba(13, 21, 33, 0.05);
  --sh-xl: 0 24px 56px rgba(13, 21, 33, 0.16);
  --sh-focus: 0 0 0 3px rgba(43, 110, 240, 0.32);

  /* ---------- Layout ---------- */
  --container: 1280px;
  --container-narrow: 980px;
  --header-h: 116px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;

  --z-header: 60;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}