/* ============================================================
   LAKE FLATO — DESIGN TOKENS
   Source of truth for type, color, spacing, and motion.
   Mirrors the 2025 Visual Identity Guidelines and extends it
   with UI-level tokens (spacing scale, radii, shadows).
   ============================================================ */

/* —— Fonts ——————————————————————————————————————— */
@font-face { font-family: "Arizona Sans"; font-weight: 250; font-style: normal; src: url("fonts/ABCArizonaSans-Thin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Sans"; font-weight: 250; font-style: italic; src: url("fonts/ABCArizonaSans-ThinItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Sans"; font-weight: 300; font-style: normal; src: url("fonts/ABCArizonaSans-Light.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Sans"; font-weight: 300; font-style: italic; src: url("fonts/ABCArizonaSans-LightItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Sans"; font-weight: 400; font-style: normal; src: url("fonts/ABCArizonaSans-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Sans"; font-weight: 400; font-style: italic; src: url("fonts/ABCArizonaSans-RegularItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Sans"; font-weight: 500; font-style: normal; src: url("fonts/ABCArizonaSans-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Sans"; font-weight: 500; font-style: italic; src: url("fonts/ABCArizonaSans-MediumItalic.woff2") format("woff2"); font-display: swap; }

@font-face { font-family: "Arizona Mix"; font-weight: 250; font-style: normal; src: url("fonts/ABCArizonaMix-Thin.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Mix"; font-weight: 250; font-style: italic; src: url("fonts/ABCArizonaMix-ThinItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Mix"; font-weight: 300; font-style: normal; src: url("fonts/ABCArizonaMix-Light.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Mix"; font-weight: 300; font-style: italic; src: url("fonts/ABCArizonaMix-LightItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Mix"; font-weight: 400; font-style: normal; src: url("fonts/ABCArizonaMix-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Arizona Mix"; font-weight: 400; font-style: italic; src: url("fonts/ABCArizonaMix-RegularItalic.woff2") format("woff2"); font-display: swap; }

:root {
  /* —— Color — Primary (Landscape) ————————————————— */
  --lf-maple-seed:       #A68A30;   /* Pantone 110 U */
  --lf-sunflower:        #E7B321;   /* Pantone 7406 U */
  --lf-cypress:          #48541F;   /* Pantone 575 U */
  --lf-ash-tree:         #3E3E20;   /* Pantone 4217 U */
  --lf-blackland-prairie:#1E2123;   /* Pantone Black 6 U — default ink */

  /* —— Color — Secondary (Diagrammatic) —————————————— */
  --lf-maple:            #EC8806;   /* Pantone 143 U */
  --lf-red-oak:          #A9431E;   /* Pantone 484 U */
  --lf-poppy:            #EB4A2F;   /* Pantone 2347 U */
  --lf-sea-holly:        #3097AF;   /* Pantone 2200 U */
  --lf-blue-eyed-grass:  #55B7D8;   /* Pantone 2985 U */
  --lf-bluebonnet:       #304780;   /* Pantone 2145 U */

  /* —— Color — Background —————————————————————————— */
  --lf-limestone:        #F9F6E5;   /* Pantone 9140 U @ 70% */
  --lf-blue-star:        #F4E4A9;   /* Blue Star, per guide it's a Sunflower tint */

  /* —— Semantic aliases ——————————————————————————— */
  --lf-ink:              var(--lf-blackland-prairie);
  --lf-ink-70:           #52555780;
  --lf-paper:            var(--lf-limestone);
  --lf-paper-deep:       #F1EBD0;
  --lf-rule:             rgba(30, 33, 35, 0.14);
  --lf-rule-strong:      rgba(30, 33, 35, 0.38);

  /* —— Type ———————————————————————————————————————— */
  --lf-font-sans:   "Arizona Sans", Arial, system-ui, sans-serif;
  --lf-font-serif:  "Arizona Mix",  Georgia, "Times New Roman", serif;

  /* Ramp. Numbers follow the guide's 36/38/27/12/10pt cues, scaled
     to sensible web sizes. All sizes in rem (1rem = 16px). */
  --lf-t-display:    clamp(3.5rem, 6vw + 1rem, 6.5rem);   /* hero */
  --lf-t-h1:         clamp(2.25rem, 3vw + 1rem, 3.375rem);
  --lf-t-h2:         clamp(1.625rem, 2vw + .8rem, 2.375rem);
  --lf-t-h3:         1.5rem;    /* 24px */
  --lf-t-h4:         1.25rem;   /* 20px */
  --lf-t-body:       1rem;      /* 16px */
  --lf-t-sm:         0.875rem;
  --lf-t-xs:         0.75rem;
  --lf-t-eyebrow:    0.6875rem;

  --lf-lh-tight: 1.05;
  --lf-lh-snug:  1.18;
  --lf-lh-body:  1.55;
  --lf-lh-loose: 1.7;
  --lf-tracking-eyebrow: 0.16em;
  --lf-tracking-tight:   -0.01em;

  /* —— Spacing (4px base) ——————————————————————————— */
  --lf-s-1:  4px;   --lf-s-2:  8px;   --lf-s-3: 12px;   --lf-s-4: 16px;
  --lf-s-5: 20px;   --lf-s-6: 24px;   --lf-s-8: 32px;   --lf-s-10: 40px;
  --lf-s-12: 48px;  --lf-s-16: 64px;  --lf-s-20: 80px;  --lf-s-24: 96px;
  --lf-s-32: 128px; --lf-s-40: 160px; --lf-s-48: 192px;

  /* —— Radii, edges, shadows ———————————————————————— */
  --lf-radius-0: 0px;
  --lf-radius-1: 2px;       /* cards — sparingly, brand skews sharp */
  --lf-radius-2: 4px;
  --lf-radius-round: 999px;

  --lf-shadow-1: 0 1px 2px rgba(30,33,35,.06), 0 2px 8px rgba(30,33,35,.05);
  --lf-shadow-2: 0 2px 4px rgba(30,33,35,.06), 0 12px 28px rgba(30,33,35,.08);
  --lf-shadow-3: 0 8px 16px rgba(30,33,35,.10), 0 30px 60px rgba(30,33,35,.14);

  /* —— Motion ——————————————————————————————————————— */
  --lf-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --lf-ease-entry:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --lf-dur-fast:   160ms;
  --lf-dur-med:    280ms;
  --lf-dur-slow:   540ms;

  /* —— Page frame —————————————————————————————————— */
  --lf-page-max: 1280px;
  --lf-gutter:   clamp(24px, 5vw, 64px);
}

/* —— Base element defaults ——————————————————————————— */
html { color-scheme: light; }
body {
  font-family: var(--lf-font-sans);
  color: var(--lf-ink);
  background: var(--lf-paper);
  font-weight: 300;
  font-size: var(--lf-t-body);
  line-height: var(--lf-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.lf-eyebrow {
  font-family: var(--lf-font-sans);
  font-weight: 500;
  font-size: var(--lf-t-eyebrow);
  letter-spacing: var(--lf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--lf-ink-70);
}

.lf-display { font-family: var(--lf-font-sans); font-weight: 250; font-size: var(--lf-t-display);
  line-height: var(--lf-lh-tight); letter-spacing: var(--lf-tracking-tight); text-wrap: balance; }
.lf-h1 { font-family: var(--lf-font-sans); font-weight: 250; font-size: var(--lf-t-h1); line-height: var(--lf-lh-snug); letter-spacing: var(--lf-tracking-tight); text-wrap: balance; }
.lf-h2 { font-family: var(--lf-font-sans); font-weight: 250; font-size: var(--lf-t-h2); line-height: var(--lf-lh-snug); text-wrap: balance; }
.lf-h3 { font-family: var(--lf-font-sans); font-weight: 300; font-size: var(--lf-t-h3); line-height: var(--lf-lh-snug); }
.lf-body { font-family: var(--lf-font-sans); font-weight: 300; font-size: var(--lf-t-body); line-height: var(--lf-lh-body); text-wrap: pretty; }

.lf-quote {
  font-family: var(--lf-font-serif);
  font-weight: 250;
  font-style: normal;
  font-size: clamp(1.25rem, 1.5vw + .8rem, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.lf-quote em { font-style: italic; }

/* System-font fallbacks — presentation/email substitutes per the guide */
.lf-sys-sans  { font-family: Arial, system-ui, sans-serif; }
.lf-sys-serif { font-family: Georgia, "Times New Roman", serif; }