/* ==========================================================================
   FARRAR & FORBES — Design Tokens
   Brand palette derived from the existing website:
   navy #1A4052 · orange #FF771C · slate #5C7886 · surfaces #FBFBFB #F1F1F1
   ========================================================================== */

/* ---- Typography (self-hosted copies of the brand's Typekit faces) ---- */
@font-face {
  font-family: "adobe-caslon-pro";
  src: url("../fonts/adobe-caslon-pro-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "inter-variable";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* typefaces (mirrored from the existing Typekit kit) */
  --font-serif: "adobe-caslon-pro", "Caslon", Georgia, "Times New Roman", serif;
  --font-sans: "inter-variable", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* fluid type scale */
  --step--2: clamp(.69rem, .67rem + .1vw, .76rem);
  --step--1: clamp(.82rem, .79rem + .15vw, .92rem);
  --step-0: clamp(.98rem, .94rem + .2vw, 1.08rem);
  --step-1: clamp(1.18rem, 1.12rem + .28vw, 1.35rem);
  --step-2: clamp(1.42rem, 1.32rem + .48vw, 1.72rem);
  --step-3: clamp(1.75rem, 1.6rem + .74vw, 2.25rem);
  --step-4: clamp(2.15rem, 1.9rem + 1.2vw, 2.9rem);
  --step-5: clamp(2.6rem, 2.2rem + 1.9vw, 3.7rem);
  --step-6: clamp(3.1rem, 2.4rem + 3.2vw, 4.6rem);

  /* spacing */
  --sp-1: .375rem; --sp-2: .75rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem; --sp-6: 4.5rem; --sp-7: 7rem; --sp-8: 10rem;

  /* radii */
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(.21,.61,.35,1);
  --ease-ink: cubic-bezier(.65,.05,.36,1);
  --speed-1: .18s; --speed-2: .35s; --speed-3: .7s;

  --container: 1240px;
  --container-narrow: 860px;
  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   LIGHT THEME (default — mirrors the current production site)
   -------------------------------------------------------------------------- */
:root, [data-theme="light"] {
  --bg: #e7edf2;
  --bg-alt: #dde5ec;
  --bg-deep: #e9ecee;
  --surface: #ffffff;
  --surface-2: #f6f7f8;
  --ink: #1a4052;
  --ink-strong: #11303e;
  --ink-soft: #3c5b68;
  --muted: #4f6a77;
  --faint: #8aa0aa;
  --accent: #ff771c;
  --accent-solid: #ee5f00;      /* filled-button orange, keeps AA contrast with dark ink */
  --accent-text: #9f4708;       /* small orange text on light — AA compliant */
  --accent-contrast: #221204;   /* text/icon placed on --accent orange */
  --accent-tint: rgba(255,119,28,.08);
  --navy: #1a4052;
  --on-navy: #f4f6f7;
  --line: rgba(26,64,82,.16);
  --line-soft: rgba(26,64,82,.08);
  --glass: rgba(253,253,252,.78);
  --glass-line: rgba(26,64,82,.10);
  --glass-card: rgba(252,253,254,.82);
  --glass-card-line: rgba(23,58,74,.22);
  --glass-top-hl: rgba(255,255,255,.92);
  --glass-edge: rgba(26,64,82,.10);
  --shadow-1: 0 1px 2px rgba(17,48,62,.06), 0 8px 24px -12px rgba(17,48,62,.14);
  --shadow-2: 0 2px 6px rgba(17,48,62,.08), 0 24px 48px -16px rgba(17,48,62,.22);
  --glow: rgba(255,119,28,.34);
  --glow-soft: rgba(26,64,82,.18);
  --success: #1c7a52;
  --danger: #b3341f;
  --status-sale-bg: #1a4052; --status-sale-ink: #ffffff;
  --status-stc-bg: #ff771c;  --status-stc-ink: #221204;
  --status-let-bg: #ffffff;  --status-let-ink: #1a4052;
  --status-agreed-bg: #cfd8dc; --status-agreed-ink: #2c4652;
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   DARK THEME — deep petrol-navy surfaces from the same brand family
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #0e1b21;
  --bg-alt: #0a151a;
  --bg-deep: #061014;
  --surface: #142932;
  --surface-2: #1a333e;
  --ink: #e9eff2;
  --ink-strong: #f8fafb;
  --ink-soft: #c3d2d9;
  --muted: #93a9b3;
  --faint: #6e8794;
  --accent: #ff8a3c;
  --accent-solid: #e2620f;
  --accent-text: #ff9a5c;
  --accent-contrast: #231204;
  --accent-tint: rgba(255,138,60,.10);
  --navy: #1a4052;
  --on-navy: #eef3f5;
  --line: rgba(233,239,242,.14);
  --line-soft: rgba(233,239,242,.07);
  --glass: rgba(13,27,33,.72);
  --glass-line: rgba(233,239,242,.10);
  --glass-card: rgba(27,49,60,.62);
  --glass-card-line: rgba(255,255,255,.17);
  --glass-top-hl: rgba(255,255,255,.09);
  --glass-edge: rgba(0,0,0,.4);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.5);
  --shadow-2: 0 2px 8px rgba(0,0,0,.38), 0 28px 56px -18px rgba(0,0,0,.6);
  --glow: rgba(255,138,60,.42);
  --glow-soft: rgba(122,178,201,.22);
  --success: #4cc38a;
  --danger: #ff7d67;
  --status-sale-bg: #f5f7f8; --status-sale-ink: #10262f;
  --status-stc-bg: #ff8a3c;  --status-stc-ink: #231204;
  --status-let-bg: #1f3b47;  --status-let-ink: #e9eff2;
  --status-agreed-bg: #31484f; --status-agreed-ink: #b9c9d0;
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Base reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

body {
  background-image:
    radial-gradient(950px 620px at 10% 4%, rgba(26,64,82,.06) 0%, transparent 62%),
    radial-gradient(820px 520px at 92% 22%, rgba(255,119,28,.055) 0%, transparent 58%),
    radial-gradient(1100px 700px at 45% 96%, rgba(26,64,82,.055) 0%, transparent 62%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }

h1,h2,h3,h4 { font-family: var(--font-serif); font-weight: 400; color: var(--ink); line-height: 1.12; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent); }

button { background: none; border: 0; cursor: pointer; color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }

::selection { background: var(--accent); color: var(--accent-contrast); }

/* focus — visible for keyboard users only */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .8em 1.6em;
  border-radius: 0 0 var(--r-md) var(--r-md); z-index: 999; transition: top var(--speed-1);
}
.skip-link:focus-visible { top: 0; color: var(--bg); }

.container { width: min(100% - 4rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 3.5rem, var(--container-narrow)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* eyebrow / overline label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex; align-items: center; gap: .7em;
}
.eyebrow::before { content: ""; width: 1.9rem; height: 1px; background: var(--accent); flex: none; }

/* theme cross-fade for surfaces */
body.theming, body.theming * , body.theming *::before, body.theming *::after {
  transition: background-color var(--speed-2) var(--ease-out),
              color var(--speed-2) var(--ease-out),
              border-color var(--speed-2) var(--ease-out),
              box-shadow var(--speed-2) var(--ease-out) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.theming, body.theming *, body.theming *::before, body.theming *::after { transition: none !important; }
}

@media (max-width: 700px) {
  .container, .container--narrow { width: min(100% - 2.25rem, var(--container)); }
}
.linklike {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: .22em; cursor: pointer;
}
.linklike:hover { color: var(--accent); }

[data-theme="dark"] body {
  background-image:
    radial-gradient(1000px 680px at 8% 2%, rgba(120,180,205,.065) 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 26%, rgba(255,138,60,.055) 0%, transparent 58%),
    radial-gradient(1200px 760px at 50% 100%, rgba(70,130,155,.055) 0%, transparent 62%);
}