/* ==========================================================================
   tokens.css — Design tokens for the TRUST POINT site
   --------------------------------------------------------------------------
   Every color, space, radius, font and motion value used anywhere in the
   CSS is defined here as a custom property. Components never hard-code
   values; they reference these tokens so the theme can change in one place.

   Structure:
     1. Cascade layer order (declared once, here, because this file loads first)
     2. Primitive palette  — raw brand + neutral scales (don't use directly
                             in components; use the semantic tokens instead)
     3. Semantic tokens    — light theme (default)
     4. Semantic tokens    — dark theme (system preference + manual toggle)
     5. Type, space, radius, shadow, motion scales
   ========================================================================== */

/* 1. Layer order ----------------------------------------------------------
   Later layers win over earlier ones regardless of selector specificity,
   which keeps overrides predictable without !important. */
@layer reset, base, layout, components, pages, utilities;

/* 2. Primitive palette ----------------------------------------------------- */
:root {
  /* Brand anchors (from the TRUST POINT brand guide) */
  --brand-navy: #262660;
  --brand-blue: #2059a0;
  --brand-sky: #34a5dd;

  /* Navy scale — brand navy is 700 */
  --navy-50: #f0f1f9;
  --navy-100: #e1e3f3;
  --navy-200: #c3c6e6;
  --navy-300: #9296cc;
  --navy-400: #6468ad;
  --navy-500: #43468a;
  --navy-600: #33357a;
  --navy-700: #262660;
  --navy-800: #1c1c4a;
  --navy-900: #131336;
  --navy-950: #0b0b22;

  /* Blue scale — brand blue is 600 */
  --blue-50: #eef5fc;
  --blue-100: #d8e7f7;
  --blue-200: #b0cdef;
  --blue-300: #7eaee3;
  --blue-400: #4a8bd3;
  --blue-500: #2d70bd;
  --blue-600: #2059a0;
  --blue-700: #1a4883;
  --blue-800: #163a69;

  /* Sky scale — brand light blue is 500.
     NOTE: sky-500 is only ~2.7:1 on white, so it is decorative-only on light
     surfaces. Use sky-700 when an accent must be readable text on white. */
  --sky-50: #ebf7fd;
  --sky-100: #d2eefa;
  --sky-200: #a6ddf4;
  --sky-300: #72c8ec;
  --sky-400: #4fb7e5;
  --sky-500: #34a5dd;
  --sky-600: #1f88bd;
  --sky-700: #1a6d97;

  /* Neutrals — cool grays tinted toward the navy hue so they sit with the brand */
  --neutral-0: #ffffff;
  --neutral-25: #fafbfd;
  --neutral-50: #f4f5fa;
  --neutral-100: #eaecf4;
  --neutral-200: #d8dbe8;
  --neutral-300: #b8bcd1;
  --neutral-400: #8b90ab;
  --neutral-500: #656a88;
  --neutral-600: #4b4f6b;
  --neutral-700: #363952;
  --neutral-800: #23253b;
  --neutral-850: #1a1c30;
  --neutral-900: #121326;
  --neutral-950: #0a0b1a;

  /* State colors — a text-safe shade for light and dark backgrounds */
  --green-600: #1b7f55;
  --green-400: #4cc38a;
  --amber-600: #955800;
  --amber-400: #f2b84b;
  --red-600: #c0352b;
  --red-400: #ff8a80;
}

/* 3. Semantic tokens — light theme (default) -------------------------------- */
:root {
  color-scheme: light;

  --color-bg: var(--neutral-0);
  --color-bg-alt: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-2: var(--neutral-50);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);

  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-heading: var(--navy-700);

  --color-link: var(--blue-600);
  --color-link-hover: var(--navy-700);

  --color-primary: var(--blue-600);
  --color-primary-hover: var(--blue-700);
  --color-on-primary: var(--neutral-0);

  --color-accent: var(--sky-500);          /* decorative only on light bg */
  --color-accent-text: var(--sky-700);     /* readable accent text */
  --color-eyebrow: var(--blue-600);

  --color-icon: var(--blue-600);
  --color-icon-bg: var(--blue-50);

  --color-focus: var(--blue-600);
  --color-selection: var(--sky-100);

  --color-input-bg: var(--neutral-0);
  --color-input-border: var(--neutral-400); /* ≥3:1 against the page (WCAG 1.4.11) */

  --color-success: var(--green-600);
  --color-warning: var(--amber-600);
  --color-danger: var(--red-600);

  --color-header-bg: rgb(255 255 255 / 0.85);

  /* The home hero and inner page banners stay dark in both themes */
  --hero-bg-1: var(--navy-950);
  --hero-bg-2: var(--navy-700);
  --hero-text: var(--neutral-0);
  --hero-text-muted: var(--navy-200);

  --shadow-sm: 0 1px 2px rgb(19 19 54 / 0.06), 0 1px 3px rgb(19 19 54 / 0.08);
  --shadow-md: 0 4px 12px rgb(19 19 54 / 0.08), 0 2px 4px rgb(19 19 54 / 0.05);
  --shadow-lg: 0 18px 40px rgb(19 19 54 / 0.12), 0 4px 10px rgb(19 19 54 / 0.06);
}

/* 4. Semantic tokens — dark theme ------------------------------------------
   The same block appears twice on purpose: once for visitors whose OS
   prefers dark (unless they forced light with the toggle), and once for
   visitors who forced dark with the toggle. CSS can't share one block
   between a media query and an attribute selector. Keep them in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: var(--neutral-950);
    --color-bg-alt: #0f1024;
    --color-surface: var(--neutral-900);
    --color-surface-2: var(--neutral-850);
    --color-border: #2a2d48;
    --color-border-strong: #3a3d5c;

    --color-text: #e8eaf5;
    --color-text-muted: #a9adc8;
    --color-heading: var(--neutral-0);

    --color-link: var(--sky-400);
    --color-link-hover: var(--sky-200);

    --color-primary: var(--sky-500);
    --color-primary-hover: var(--sky-400);
    --color-on-primary: var(--neutral-950);

    --color-accent: var(--sky-500);
    --color-accent-text: var(--sky-400);
    --color-eyebrow: var(--sky-400);

    --color-icon: var(--sky-400);
    --color-icon-bg: rgb(52 165 221 / 0.12);

    --color-focus: var(--sky-400);
    --color-selection: var(--navy-600);

    --color-input-bg: var(--neutral-900);
    --color-input-border: #6b7093;

    --color-success: var(--green-400);
    --color-warning: var(--amber-400);
    --color-danger: var(--red-400);

    --color-header-bg: rgb(10 11 26 / 0.82);

    --hero-bg-1: #06061a;
    --hero-bg-2: var(--navy-800);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: var(--neutral-950);
  --color-bg-alt: #0f1024;
  --color-surface: var(--neutral-900);
  --color-surface-2: var(--neutral-850);
  --color-border: #2a2d48;
  --color-border-strong: #3a3d5c;

  --color-text: #e8eaf5;
  --color-text-muted: #a9adc8;
  --color-heading: var(--neutral-0);

  --color-link: var(--sky-400);
  --color-link-hover: var(--sky-200);

  --color-primary: var(--sky-500);
  --color-primary-hover: var(--sky-400);
  --color-on-primary: var(--neutral-950);

  --color-accent: var(--sky-500);
  --color-accent-text: var(--sky-400);
  --color-eyebrow: var(--sky-400);

  --color-icon: var(--sky-400);
  --color-icon-bg: rgb(52 165 221 / 0.12);

  --color-focus: var(--sky-400);
  --color-selection: var(--navy-600);

  --color-input-bg: var(--neutral-900);
  --color-input-border: #6b7093;

  --color-success: var(--green-400);
  --color-warning: var(--amber-400);
  --color-danger: var(--red-400);

  --color-header-bg: rgb(10 11 26 / 0.82);

  --hero-bg-1: #06061a;
  --hero-bg-2: var(--navy-800);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 14px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.55);
}

/* 5. Scales ------------------------------------------------------------------ */
:root {
  /* Type families.
     Libre Franklin is an open-source revival of Franklin Gothic (the brand
     face). While it loads (or if it fails), "Libre Franklin Fallback" — local
     Arial resized to the same metrics (see base.css) — stands in so nothing
     shifts. The remaining names only apply on systems without Arial. */
  --font-sans: "Libre Franklin", "Libre Franklin Fallback", "Franklin Gothic Medium", "Franklin Gothic",
    "ITC Franklin Gothic", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

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

  /* Fluid type scale (≈1.2 ratio at 320px → ≈1.25 at 1280px).
     clamp(min, preferred, max) lets sizes grow smoothly with the viewport
     without breakpoints, while rem units still respect user zoom. */
  --step--1: clamp(0.833rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.4rem);
  --step-4: clamp(2.07rem, 1.7rem + 1.9vw, 3.2rem);
  --step-5: clamp(2.35rem, 1.8rem + 2.9vw, 4.1rem);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.65;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.12em;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); /* 16px minimum side gutter */

  /* Layout widths */
  --width-content: 76rem;
  --width-narrow: 46rem;
  --width-prose: 68ch;

  /* Radii */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-pill: 999px;

  /* Motion */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Header height, used for scroll-margin so anchored headings clear the sticky header */
  --header-height: 4.5rem;
}

/* Reduced motion: zero out durations so every transition built on these
   tokens becomes instant. base.css also kills animations globally. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}