/*
  Design tokens for ATW Studios.
  Palette is the official brand kit (roadmap 0.5): Off-White #FBFBFB,
  Fader Blue #537596, Spray Grey #616263, Studio Black #020408.
  Do not alter these four hex values — contrast against Studio Black has
  already been measured:
    - Fader Blue on Studio Black: 4.25:1  -> AA for LARGE text only. Never
      use --atw-color-accent for body-sized or link text.
    - Spray Grey on Studio Black: 3.36:1  -> borders/dividers only, never text.
    - Off-White on a Fader Blue fill: 4.66:1 -> passes; filled buttons are fine.
  --atw-color-accent-text (#6B92B8, 6.28:1) is a lightened, non-brand
  derivative used anywhere Fader Blue would otherwise sit under body-sized
  or link text. It does not replace --atw-color-accent.
*/
:root {
  /* Color: ATW Studios brand kit, dark theme */
  --atw-color-bg: #020408;
  --atw-color-bg-raised: #0a0d11;
  --atw-color-bg-inset: #12161b;
  --atw-color-border: #616263;
  --atw-color-text: #fbfbfb;
  --atw-color-text-muted: #b4b5b7;
  --atw-color-text-faint: #85878a;

  /* Fader Blue: fills, borders, focus rings, large display text (>= ~24px / bold >= ~19px) only */
  --atw-color-accent: #537596;
  /* Derived hover shade for accent fills — not a brand hex, interaction state only */
  --atw-color-accent-hover: color-mix(in srgb, #537596 85%, white);
  /* Text color to place ON TOP of an accent fill (e.g. primary button label) */
  --atw-color-accent-contrast: var(--atw-color-text);
  /* Body-sized/link text in the accent color — use this, never --atw-color-accent, for text */
  --atw-color-accent-text: #6b92b8;

  --atw-color-success: #4caf7d;
  --atw-color-warning: #e0b04a;
  --atw-color-danger: #d9603f;
  --atw-color-link: var(--atw-color-accent-text);

  /* Type */
  --atw-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --atw-font-size-xs: 0.75rem;
  --atw-font-size-sm: 0.875rem;
  --atw-font-size-base: 1rem;
  --atw-font-size-md: 1.125rem;
  --atw-font-size-lg: 1.375rem;
  --atw-font-size-xl: 1.75rem;
  --atw-font-size-2xl: 2.25rem;
  --atw-font-size-3xl: 3rem;
  --atw-line-height-tight: 1.15;
  --atw-line-height-base: 1.55;

  /* Spacing scale */
  --atw-space-1: 0.25rem;
  --atw-space-2: 0.5rem;
  --atw-space-3: 0.75rem;
  --atw-space-4: 1rem;
  --atw-space-5: 1.5rem;
  --atw-space-6: 2rem;
  --atw-space-8: 3rem;
  --atw-space-10: 4rem;
  --atw-space-12: 6rem;

  /* Layout */
  --atw-max-width: 72rem;
  /* Nav bar box: .nav-inner's 3.5rem plus .nav-bar's 1px bottom border.
     The nav is position: fixed (roadmap 9.8), so this is the height the
     .nav-spacer in index.html must reserve and the offset anchor targets
     must be scrolled clear of. Changing the nav height means changing
     this, not the spacer. */
  --atw-nav-height: calc(3.5rem + 1px);
  --atw-radius-sm: 4px;
  --atw-radius-md: 8px;
  --atw-radius-lg: 16px;
  --atw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --atw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);

  /* Breakpoints (referenced in comments; CSS custom properties can't gate
     media queries, so these document the values used throughout) */
  --atw-breakpoint-sm: 480px;
  --atw-breakpoint-md: 768px;
  --atw-breakpoint-lg: 1024px;
}