/* ==========================================================================
   AXIS PREMIUM DESIGN SYSTEM — tokens.css (badfaithlawcenter.com)
   --------------------------------------------------------------------------
   Fleet token structure, domain re-key. Same variable names and geometry as
   the fleet file; the LIGHT theme ("the paper") is re-tuned to this domain's
   constitution brand — steel #3a4b63 on WARM reading-paper surfaces. This is
   the first rotated archetype: warm cream paper + warm ink + steel action
   (an e-reader publication should read like paper), NOT the cool slate of
   the legal desks. The DARK theme ("the chamber") is the shared fleet
   chamber: navy surfaces, brass signal. Default theme for this domain:
   light.

   Brand values:
     steel #3a4b63 · steel-500 #476480 · gold #c7953f · paper #faf8f3
   ========================================================================== */

:root {
  /* ========================================================================
     1. TYPE — families & tuned weights
     ======================================================================== */
  --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Fraunces Variable", "Iowan Old Style", Georgia,
    "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  --w-light: 300;
  --w-regular: 400;
  --w-medium: 510;
  --w-semibold: 590;
  --w-bold: 680;
  --w-display: 330;
  --display-opsz: 144;

  /* ========================================================================
     2. TYPE — scale
     ======================================================================== */
  --title-1: 1.0625rem;   --title-1-lh: 1.4;    --title-1-ls: -.012em;
  --title-2: 1.25rem;     --title-2-lh: 1.3;    --title-2-ls: -.012em;
  --title-3: 1.5rem;      --title-3-lh: 1.3;    --title-3-ls: -.014em;
  --title-4: 1.875rem;    --title-4-lh: 1.18;   --title-4-ls: -.018em;
  --title-5: 2.25rem;     --title-5-lh: 1.14;   --title-5-ls: -.02em;
  --title-6: 2.625rem;    --title-6-lh: 1.1;    --title-6-ls: -.022em;
  --title-7: 3.125rem;    --title-7-lh: 1.08;   --title-7-ls: -.022em;
  --title-8: 3.625rem;    --title-8-lh: 1.06;   --title-8-ls: -.024em;
  --title-9: 4.25rem;     --title-9-lh: 1.04;   --title-9-ls: -.024em;

  --display-1: clamp(3.25rem, 7.2vw, 7.75rem);   --display-1-lh: 0.98;  --display-1-ls: -.028em;
  --display-2: clamp(2.5rem, 5vw, 5rem);         --display-2-lh: 1.02;  --display-2-ls: -.026em;
  --display-3: clamp(2rem, 3.6vw, 3.75rem);      --display-3-lh: 1.06;  --display-3-ls: -.024em;

  --text-micro: .6875rem;
  --text-mini: .8125rem;
  --text-small: .875rem;
  --text-regular: 1rem;
  --text-large: 1.125rem;
  --text-lede: clamp(1.125rem, 1.6vw, 1.375rem);
  --body-lh: 1.65;
  --label-ls: .08em;

  /* ========================================================================
     3. COLOR — dark theme "the chamber" (shared fleet chamber)
     ======================================================================== */
  --bg-canvas: #05060c;
  --bg-0: #0a0c15;
  --bg-1: #10131e;
  --bg-2: #151a29;
  --bg-3: #1c2233;
  --text-1: #f2f5fb;
  --text-2: #bcc5d8;
  --text-3: #8b94a9;
  --text-4: #5f6880;

  --border-faint: rgba(255, 255, 255, .05);
  --border-thin: rgba(255, 255, 255, .08);
  --border-solid: rgba(255, 255, 255, .14);
  --border-strong: rgba(255, 255, 255, .22);
  --hairline: .5px;

  /* SIGNAL accent — brass, both themes */
  --sig-200: #f7e6c0;
  --sig-300: #f0d9a8;
  --sig-400: #e9c98a;
  --sig-500: #e0b35f;
  --sig-600: #c7953f;
  --sig-glow: rgba(224, 179, 95, .22);
  --sig-tint: rgba(224, 179, 95, .08);
  --sig-text: #f0d9a8;

  /* ACTION ramp — ink-blue (dark-chamber identity) */
  --action-25: #f3f5ff;
  --action-50: #e6ebff;
  --action-100: #d4dcfc;
  --action-200: #b3c0f7;
  --action-300: #8d9ff0;
  --action-400: #6b82e8;
  --action-500: #4c66dc;
  --action-600: #3a52c4;
  --action-700: #2e42a3;
  --action-800: #24337f;
  --action-900: #1b2660;
  --action-975: #131c47;
  --action: var(--action-600);
  --action-hover: var(--action-700);
  --action-tint: rgba(58, 82, 196, .1);
  --neutral-50: #eef2f8;
  --neutral-100: #e2e9f2;
  --neutral-200: #cfd9e8;
  --neutral-300: #b3c0d4;
  --neutral-400: #93a1b8;
  --neutral-500: #74839c;

  /* SEMANTIC CTA — dark: brass-on-ink */
  --cta-bg: var(--sig-500);
  --cta-text: #14151d;
  --cta-wipe: var(--sig-300);
  --cta-hover: #ecca8d;
  --cta-secondary-bg: transparent;
  --cta-secondary-border: var(--border-solid);
  --cta-secondary-text: var(--text-1);

  --surface-1: var(--bg-1);
  --surface-2: var(--bg-2);
  --lift-1: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
  --lift-2: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .01));
  --bevel: linear-gradient(135deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, 0) 60%);

  --shadow-stack:
    0 8px 2px 0 rgba(0, 0, 0, 0),
    0 5px 2px 0 rgba(0, 0, 0, .03),
    0 3px 2px 0 rgba(0, 0, 0, .06),
    0 1px 1px 0 rgba(0, 0, 0, .11),
    0 0 1px 0 rgba(0, 0, 0, .16);
  --shadow-tiny: 0 1px 4px -1px rgba(0, 0, 0, .25);
  --shadow-medium: 0 3px 12px rgba(0, 0, 0, .3);
  --shadow-high: 0 7px 32px rgba(0, 0, 0, .45);

  /* ========================================================================
     4. SPACING — fluid clamp scale
     ======================================================================== */
  --space-micro: clamp(.5rem, .972vw, .875rem);
  --space-tiny: clamp(1rem, 1.389vw, 1.25rem);
  --space-small: clamp(1.5rem, 2.083vw, 1.875rem);
  --space-medium: clamp(2rem, 2.778vw, 2.5rem);
  --space-large: clamp(3.25rem, 5.556vw, 5rem);
  --space-big: clamp(5rem, 10.417vw, 9.375rem);
  --space-huge: clamp(6.25rem, 13.889vw, 12.5rem);
  --space-enormous: clamp(8.75rem, 17.361vw, 15.625rem);

  /* ========================================================================
     5. MOTION — token library
     ======================================================================== */
  --ease-settle: cubic-bezier(.25, 1, .5, 1);
  --ease-rise: cubic-bezier(.32, .72, 0, 1);
  --ease-slip: cubic-bezier(.23, 1, .32, 1);
  --ease-leave: cubic-bezier(.4, 0, .2, 1);

  --speed-quick: .1s;
  --speed-fast: .2s;
  --speed-regular: .25s;
  --speed-slow: .45s;
  --speed-counter: 1.2s;

  --reveal-blur: 10px;
  --reveal-distance: 20%;
  --reveal-guard: 30px;

  --stagger-1: 40ms;
  --stagger-2: 70ms;
  --stagger-3: 120ms;

  --marquee-duration: 30s;

  /* ========================================================================
     6. GEOMETRY
     ======================================================================== */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  --pill-sm: 32px;
  --pill-md: 44px;
  --pill-lg: 56px;

  --content-max: 1344px;
  --page-pad-x: clamp(1.25rem, 4vw, 3rem);
  --page-pad-y: var(--space-large);
  --header-height: 64px;
  --header-blur: 20px;

  --grid-cols: 12;
  --grid-gap: clamp(1rem, 2vw, 2rem);
  --section-y: var(--space-big);

  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--sig-500);

  --edge-lamp: rgba(255, 255, 255, .06);

  --rail-width: 2px;
}

/* ==========================================================================
   7. LIGHT THEME — "the paper" (DOMAIN THEME — cool slate paper, slate ink)
   Re-tuned to this domain's constitution brand: slate #274055 with the
   slate-blue family the live site uses for its own links and headings.
   Cool slate-tinted surfaces, deep slate-ink text ramp, slate-tinted
   borders and shadows, gold signal, and the CTA identity = slate (the
   domain's own action color). Links/action ramp = the slate brand ramp.
   ========================================================================== */
[data-theme="light"] {
  --bg-canvas: #f2efe8;
  --bg-0: #faf8f3;
  --bg-1: #fffdf8;
  --bg-2: #f4f0e7;
  --bg-3: #eae4d6;

  --text-1: #23252b;
  --text-2: #34363e;
  --text-3: #60636c;
  --text-4: #8f9199;

  --border-faint: rgba(58, 75, 99, .06);
  --border-thin: rgba(58, 75, 99, .1);
  --border-solid: rgba(58, 75, 99, .18);
  --border-strong: rgba(58, 75, 99, .32);

  --sig-text: #7a5c1e;
  --sig-glow: rgba(199, 149, 63, .28);
  --sig-tint: rgba(199, 149, 63, .12);

  /* ACTION ramp flips to steel — the domain brand ramp */
  --action-25: #f4f6f9;
  --action-50: #e9edf3;
  --action-100: #d3dbe6;
  --action-200: #aebdcf;
  --action-300: #859bb4;
  --action-400: #637f9e;
  --action-500: #476480;
  --action-600: #3a4b63;
  --action-700: #2e3b4e;
  --action-800: #232d3c;
  --action-900: #181f2a;
  --action-975: #10151d;
  --action: var(--action-600);
  --action-hover: var(--action-700);
  --action-tint: rgba(58, 75, 99, .1);

  /* CTA identity = steel — the domain action color */
  --cta-bg: #3a4b63;
  --cta-text: #ffffff;
  --cta-wipe: #2e3b4e;
  --cta-hover: #2e3b4e;
  --cta-secondary-bg: var(--bg-1);
  --cta-secondary-border: var(--border-solid);
  --cta-secondary-text: var(--text-1);

  --surface-1: var(--bg-1);
  --surface-2: var(--bg-2);
  --lift-1: linear-gradient(180deg, rgba(255, 253, 248, .8), rgba(255, 253, 248, .2));
  --lift-2: linear-gradient(180deg, rgba(255, 253, 248, .9), rgba(255, 253, 248, .4));
  --bevel: linear-gradient(135deg, rgba(255, 253, 248, .9) 0%, rgba(255, 253, 248, .4) 30%, rgba(255, 253, 248, 0) 60%);

  /* Steel-tinted soft shadows (Stripe discipline: tinted, never black) */
  --shadow-stack:
    0 8px 2px 0 rgba(58, 75, 99, 0),
    0 5px 2px 0 rgba(58, 75, 99, .02),
    0 3px 2px 0 rgba(58, 75, 99, .04),
    0 1px 1px 0 rgba(58, 75, 99, .07),
    0 0 1px 0 rgba(58, 75, 99, .1);
  --shadow-tiny: 0 1px 4px -1px rgba(58, 75, 99, .14);
  --shadow-medium: 0 16px 32px rgba(58, 75, 99, .12);
  --shadow-high: 0 7px 32px rgba(58, 75, 99, .18);

  --edge-lamp: rgba(58, 75, 99, .06);
  --focus-ring: 0 0 0 2px var(--bg-0), 0 0 0 4px #3a4b63;
}

/* ==========================================================================
   8. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-regular);
  font-weight: var(--w-regular);
  line-height: var(--body-lh);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sig-500); color: #14151d; }
[data-theme="light"] ::selection { background: #3a4b63; color: #fff; }

.display {
  font-family: var(--font-display);
  font-weight: var(--w-display);
  font-variation-settings: "opsz" var(--display-opsz);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: var(--w-regular);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--text-4);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-6);
}