/* Spotted Fox Design System — tokens (bundled) */

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Spotted Fox — Webfonts
   Brand kit specifies Montserrat (headlines) + Karla (body).
   Both are Google Fonts; loaded from the Google Fonts CDN.
   If you need self-hosted binaries, swap these @import lines
   for local @font-face rules pointing at /assets/fonts/*.woff2.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Karla:wght@300;400;500;600;700&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   Spotted Fox — Color Tokens
   Sourced from the official Brand Kit + agency working palette.
   ============================================================ */

:root {
  /* --- Brand orange scale --------------------------------- */
  /* Working CTA orange (deeper, primary action color) */
  --sf-orange: #E8702A;
  --sf-orange-hover: #D5611F;     /* darker for hover/press */
  --sf-orange-active: #C0561B;
  /* Fox Tail Orange — canonical logo orange */
  --sf-orange-bright: #F89525;
  /* Orange Orange — mid */
  --sf-orange-mid: #F28020;
  /* Super Saiyan — light orange accent */
  --sf-orange-light: #F4AC56;
  /* Wash — callout / highlight background */
  --sf-orange-wash: #FDF0E8;
  --sf-orange-wash-deep: #FBE2D2;

  /* Brand fox gradient (top → bottom of the mark) */
  --sf-gradient-fox: linear-gradient(160deg, #F9A03F 0%, #F08221 55%, #E8702A 100%); /* @kind color */
  --sf-gradient-warm: linear-gradient(135deg, #F4AC56 0%, #E8702A 100%); /* @kind color */

  /* --- Neutrals (warm-leaning, never cold) ---------------- */
  --sf-ink: #2D2D2D;              /* default dark text */
  --sf-charcoal: #454545;         /* Fox Den Charcoal */
  --sf-black: #000000;            /* Fox Paw Black */
  --sf-steel: #BABCBE;            /* Spotted Steel */
  --sf-gray-700: #5A5A5A;
  --sf-gray-500: #8A8A8A;
  --sf-gray-300: #D6D6D6;
  --sf-gray-200: #E6E5E3;
  --sf-gray-100: #F4F2F0;         /* warm off-white surface */
  --sf-white: #FFFFFF;            /* Artic White */

  /* --- Secondary accent ----------------------------------- */
  --sf-blue: #0F96C6;             /* Mountain River */
  --sf-blue-wash: #E7F4F9;

  /* --- Semantic status ------------------------------------ */
  --sf-success: #2E9E5B;
  --sf-success-wash: #E7F5ED;
  --sf-warning: #E8A23A;
  --sf-warning-wash: #FCF2E0;
  --sf-error: #D5483B;
  --sf-error-wash: #FBEAE8;

  /* --- Semantic aliases ----------------------------------- */
  --color-primary: var(--sf-orange);
  --color-primary-hover: var(--sf-orange-hover);

  --text-strong: var(--sf-ink);
  --text-body: var(--sf-charcoal);
  --text-muted: var(--sf-gray-500);
  --text-on-orange: var(--sf-white);
  --text-on-dark: var(--sf-white);
  --text-link: var(--sf-orange);

  --surface-page: var(--sf-white);
  --surface-muted: var(--sf-gray-100);
  --surface-card: var(--sf-white);
  --surface-callout: var(--sf-orange-wash);
  --surface-dark: var(--sf-ink);
  --surface-inverse: #1F1F1F;

  --border-subtle: var(--sf-gray-200);
  --border-default: var(--sf-gray-300);
  --border-strong: var(--sf-charcoal);
  --border-focus: var(--sf-orange);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   Spotted Fox — Typography Tokens
   Montserrat = headlines (bold, benefit-driven, often UPPERCASE
   for eyebrows/labels mirroring the logo). Karla = body & UI.
   ============================================================ */

:root {
  /* --- Families ------------------------------------------- */
  --font-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Weights -------------------------------------------- */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */

  /* --- Type scale (1.250 major-third-ish, tuned) ---------- */
  --text-display: 4.5rem;   /* 72px — hero */
  --text-h1: 3rem;          /* 48px */
  --text-h2: 2.25rem;       /* 36px */
  --text-h3: 1.625rem;      /* 26px */
  --text-h4: 1.25rem;       /* 20px */
  --text-lg: 1.125rem;      /* 18px */
  --text-base: 1rem;        /* 16px */
  --text-sm: 0.875rem;      /* 14px */
  --text-xs: 0.75rem;       /* 12px */
  --text-eyebrow: 0.8125rem;/* 13px — uppercase label */

  /* --- Line heights --------------------------------------- */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-heading: 1.15; /* @kind other */
  --lh-body: 1.6; /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* --- Letter spacing ------------------------------------- */
  --ls-tight: -0.02em; /* @kind spacing */
  --ls-normal: 0; /* @kind spacing */
  --ls-eyebrow: 0.14em;     /* @kind spacing */
  --ls-button: 0.02em; /* @kind spacing */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   Spotted Fox — Spacing, Radius, Shadow & Motion Tokens
   Generous whitespace, rounded corners, soft warm shadows.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --------------------------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* --- Radius (rounded corners preferred) ----------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* --- Shadows (soft, warm-tinted, never harsh) ----------- */
  --shadow-xs: 0 1px 2px rgba(45, 45, 45, 0.06);
  --shadow-sm: 0 2px 8px rgba(45, 45, 45, 0.08);
  --shadow-md: 0 6px 20px rgba(45, 45, 45, 0.10);
  --shadow-lg: 0 16px 40px rgba(45, 45, 45, 0.12);
  --shadow-orange: 0 10px 28px rgba(232, 112, 42, 0.28);
  --shadow-focus: 0 0 0 3px rgba(232, 112, 42, 0.30);

  /* --- Layout --------------------------------------------- */
  --container-max: 1200px; /* @kind spacing */
  --container-narrow: 760px; /* @kind spacing */

  /* --- Motion (smooth, energetic but professional) -------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
}


/* ===== tokens/base.css ===== */
/* ============================================================
   Spotted Fox — Base / Reset
   Sensible element defaults wired to the tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--text-h2); font-weight: var(--fw-bold); }
h3 { font-size: var(--text-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--text-h4); font-weight: var(--fw-semibold); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--sf-orange-hover); }

/* Eyebrow / label utility — the brand's signature uppercase tag */
.sf-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sf-orange);
}

::selection { background: var(--sf-orange-wash-deep); color: var(--sf-ink); }

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