/* ==========================================================================
   TOKENS — American Laser Engraving
   Palette sampled directly from the brand logo (alaser-logo.png):
   navy #0B243E and crimson #9E1D1E, extended with a burnished-brass tertiary
   that reads as freshly engraved metal.
   ========================================================================== */

:root {
  /* ---- Brand: navy ---- */
  --navy-900: #05121f;
  --navy-850: #061a2b;
  --navy-800: #071726;
  --navy-700: #0b243e; /* PRIMARY — exact logo navy */
  --navy-600: #14395c;
  --navy-500: #1e4e7a;

  /* ---- Brand: crimson ---- */
  --crimson-700: #5e1112;
  --crimson-600: #7a1617;
  --crimson-500: #9e1d1e; /* ACCENT — exact logo crimson */
  --crimson-400: #c42b2c;
  --crimson-300: #e04a4b;

  /* ---- Engraved-metal tertiary ---- */
  --brass-500: #a8873a;
  --brass-400: #c8a44d;
  --brass-300: #e0c377;
  --brass-200: #f0dfb0;

  /* ---- Neutrals ---- */
  --bone-50: #f6f3ee;
  --bone-100: #ece7de;
  --bone-200: #dcd5ca;
  /* Muted greys are tuned to clear WCAG AA (4.5:1) against the LIGHTEST
     surface they ever sit on (--navy-600 panels), not just the page ground. */
  --steel-400: #a0adbb; /* 6.32:1 worst case */
  --steel-500: #94a1b0; /* 5.49:1 worst case */
  --ink-900: #0a0e13;

  /* ---- Semantic ---- */
  --bg: var(--navy-900);
  --bg-alt: var(--navy-800);
  --surface: rgba(20, 57, 92, 0.28);
  --text: var(--bone-50);
  --text-muted: var(--steel-400);
  --text-on-light: var(--ink-900);
  --text-on-light-muted: #46525f;
  --border: rgba(224, 195, 119, 0.16);
  --border-strong: rgba(224, 195, 119, 0.32);
  --success: #4a9d6b;
  --error: #e04a4b;

  /* ---- Signature effects ---- */
  --beam: linear-gradient(135deg, var(--brass-300) 0%, var(--crimson-400) 55%, var(--navy-600) 100%);
  /* Text gradient: stays bright end-to-end so headline contrast never drops
     below the 3:1 large-text threshold on the dark ground. */
  --beam-soft: linear-gradient(
    100deg,
    var(--brass-200) 0%,
    var(--brass-300) 32%,
    var(--brass-400) 58%,
    var(--crimson-300) 100%
  );
  --glass-bg: rgba(11, 36, 62, 0.55);
  --glass-bg-strong: rgba(7, 23, 38, 0.82);
  --glass-brd: rgba(224, 195, 119, 0.22);

  /* ---- Layered shadows (never a single flat shadow) ---- */
  --shadow-sm: 0 1px 2px rgba(5, 18, 31, 0.3), 0 2px 6px rgba(5, 18, 31, 0.2);
  --shadow-md: 0 2px 4px rgba(5, 18, 31, 0.28), 0 8px 18px rgba(5, 18, 31, 0.26),
    0 16px 34px rgba(5, 18, 31, 0.2);
  --shadow-lg: 0 4px 8px rgba(5, 18, 31, 0.3), 0 14px 30px rgba(5, 18, 31, 0.3),
    0 30px 60px rgba(5, 18, 31, 0.28), inset 0 1px 0 rgba(240, 223, 176, 0.1);
  --shadow-glow: 0 0 0 1px rgba(224, 195, 119, 0.28), 0 0 26px rgba(196, 43, 44, 0.3),
    0 22px 48px rgba(5, 18, 31, 0.45);
  --shadow-brass: 0 0 0 1px rgba(224, 195, 119, 0.35), 0 6px 18px rgba(168, 135, 58, 0.22),
    0 16px 40px rgba(5, 18, 31, 0.4);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --fs-eyebrow: 0.6875rem;
  --fs-sm: 0.875rem;
  --fs-body: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  --fs-lead: clamp(1.075rem, 1rem + 0.4vw, 1.3rem);
  --fs-h4: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-h3: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.4rem);
  --fs-h1: clamp(2.6rem, 1.7rem + 4.1vw, 5.5rem);

  --lh-tight: 0.98;
  --lh-snug: 1.18;
  --lh-body: 1.7;
  --ls-tight: -0.03em;
  --ls-eyebrow: 0.18em;

  /* ---- Spacing 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: 6rem;
  --section-y: clamp(4rem, 9vw, 8.5rem);
  /* Sticky header height (top bar 46 + nav 104). The hero subtracts this so
     its CTA and trust strip stay above the fold. Overridden per breakpoint. */
  --header-h: 150px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --container: 1240px;
  --container-narrow: 880px;

  /* ---- Radii ---- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --t-micro: 170ms;
  --t-std: 340ms;
  --t-entrance: 760ms;

  /* ---- Z-index scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky-bar: 850;
  --z-header: 800;
  --z-drawer: 870;
  --z-modal: 900;
  --z-cursor: 990;
}

/* Light sections invert the semantic tokens locally. */
.section--light {
  --text: var(--text-on-light);
  --text-muted: var(--text-on-light-muted);
  --border: rgba(11, 36, 62, 0.14);
  --border-strong: rgba(11, 36, 62, 0.26);
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-brd: rgba(11, 36, 62, 0.12);
  --surface: rgba(255, 255, 255, 0.9);
  --shadow-md: 0 2px 4px rgba(11, 36, 62, 0.06), 0 8px 18px rgba(11, 36, 62, 0.08),
    0 16px 34px rgba(11, 36, 62, 0.06);
  --shadow-lg: 0 4px 8px rgba(11, 36, 62, 0.07), 0 14px 30px rgba(11, 36, 62, 0.1),
    0 30px 60px rgba(11, 36, 62, 0.08);
  background: var(--bone-50);
  color: var(--text-on-light);
}