/* CoWire LLC design tokens.
   Single source of truth for brand color, typography, space, radius and elevation.
   Every other stylesheet references these variables and never hard codes a value. */

:root {
  /* Brand palette, as specified in the brand direction */
  --navy: #101E32;
  --blue: #8FB7E3;
  --gray: #F1F4F7;
  --white: #FFFFFF;

  /* Derived palette. Values created to support states, depth and accessible text.
     Contrast ratios are documented in brandkit.html. */
  --navy-600: #24395A;
  --navy-700: #1B2C46;
  --blue-ink: #3A6FA8;
  --blue-tint: #E7EFF8;

  /* Neutral text and borders */
  --ink: #1C2938;
  --text-muted: #5D6A79;
  --line: #DCE3EA;
  --line-strong: #C7D3E0;

  /* Status colors, used for form validation only */
  --danger: #B3261E;
  --danger-tint: #FDECEA;
  --success: #1C6B52;
  --success-tint: #EDF8F3;

  /* Surfaces and text, semantic layer */
  --surface: var(--white);
  --surface-alt: var(--gray);
  --surface-dark: var(--navy);
  --surface-dark-alt: var(--navy-700);
  --surface-inset: var(--gray);

  --text: var(--ink);
  --text-heading: var(--navy);
  --text-body-muted: var(--text-muted);
  --text-on-dark: #E0E7F0;
  --text-on-dark-muted: #A9C6E7;

  --border: var(--line);
  --border-dark: rgba(255, 255, 255, 0.16);
  --border-accent: var(--line-strong);

  --accent: var(--blue);
  --accent-ink: var(--blue-ink);
  --focus: var(--blue-ink);

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.5rem, 2.4vw, 2rem);
  --fs-3xl: clamp(1.875rem, 3.2vw, 2.5rem);
  --fs-4xl: clamp(2.125rem, 4.4vw, 3.375rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.7;

  --tracking-tight: -0.03em;
  --tracking-wide: 0.13em;

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

  /* Space scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;

  /* Radius scale */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* Elevation. Deliberately restrained. */
  --sh-1: 0 1px 2px rgba(16, 30, 50, 0.05), 0 1px 3px rgba(16, 30, 50, 0.06);
  --sh-2: 0 12px 28px rgba(16, 30, 50, 0.08);

  /* Layout */
  --container: 1140px;
  --gutter: 24px;
  --header-height: 76px;

  /* Motion */
  --t-fast: 140ms ease;
  --t-base: 220ms ease;
}

/* Sections that sit on the navy surface flip their focus and accent colors
   so rings, borders and labels stay visible against a dark background. */
.on-dark {
  --focus: var(--blue);
  --accent-ink: var(--blue);
  --text-heading: var(--white);
}