/* ==========================================================================
   BRAND TOKENS — Ryan's Decks
   The only stylesheet that changes per sister site (Drywall, Painting, ...).
   Everything in main.css reads from these custom properties.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand palette ---- */
  --color-ink: #0A0A0B;
  --color-ink-2: #111113;
  --color-ink-3: #18181B;
  --color-ghost: #222226;
  --color-accent: #FF3515;
  --color-accent-hover: #FF5534;
  --color-accent-soft: rgba(255, 53, 21, 0.14);
  --color-on-accent: #FFFFFF;
  --color-white: #FFFFFF;
  --color-muted: #9AA0A8;

  /* Light "paper" sections */
  --color-paper: #F4F2EE;
  --color-paper-2: #EAE6DF;
  --color-paper-ink: #0A0A0B;
  --color-paper-muted: #575C64;

  /* Hairlines */
  --color-line: rgba(255, 255, 255, 0.09);
  --color-line-strong: rgba(255, 255, 255, 0.2);
  --color-line-paper: rgba(10, 10, 11, 0.12);

  /* ---- Typography ---- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);
  --fs-display: clamp(2.75rem, 1.4rem + 6vw, 7.25rem);

  --tracking-caps: 0.32em;
  --tracking-tight: -0.025em;

  /* ---- Layout & spacing ---- */
  --container: 1320px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --space-section: clamp(5rem, 3.5rem + 6vw, 9.5rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --header-h: 76px;
  --familybar-h: 36px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 900ms;

  /* ---- Effects ---- */
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 12px 32px -10px rgba(255, 53, 21, 0.55);
  --blur-header: saturate(160%) blur(16px);

  /* ---- Brand imagery ---- */
  --ghost-script: url("../img/brand/ryans-script-ghost.webp");
}