/* ===== tokens/fonts.css ===== */
/* Self-hosted Google Fonts — latin subset */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/alfa-slab-one-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/bebas-neue-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/lato-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/lato-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Special Elite';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/special-elite-400.woff2') format('woff2');
}


/* ===== tokens/colors.css ===== */
/* The Redheaded Cowgirl — Color tokens
   Palette ratio: ~60% bone/white, 25% black, 10% red, 5% accents.
   Barbed Red is sacred — it is the logo color; never substitute another red. */

:root {
  /* Base palette */
  --rhc-red: #EE3026;          /* Barbed Red — logo, headlines, accents. Never long body text. */
  --rhc-black: #17120E;        /* Midnight Black — warm near-black */
  --rhc-bone: #F7F0E3;         /* Bone — primary light surface */
  --rhc-whiskey: #C98F45;      /* Whiskey Gold — accent, max 10% of layout */
  --rhc-scorch: #8E1F14;       /* Scorched Red — depth tone: shadows, hovers */
  --rhc-white: #FFFFFF;

  /* Derived tints/shades (oklch-mixed from the base palette) */
  --rhc-bone-2: #EFE5D1;       /* darker bone — wells, alternating rows */
  --rhc-black-soft: #2A221B;   /* lifted black — cards on black */
  --rhc-ink-60: rgba(23, 18, 14, 0.62);  /* secondary text on light */
  --rhc-ink-40: rgba(23, 18, 14, 0.40);  /* tertiary / placeholders */
  --rhc-bone-70: rgba(247, 240, 227, 0.72); /* secondary text on dark */
  --rhc-red-tint: rgba(238, 48, 38, 0.08);  /* red wash for hovers on light */

  /* Semantic — light context (default) */
  --surface-page: var(--rhc-bone);
  --surface-card: var(--rhc-white);
  --surface-well: var(--rhc-bone-2);
  --text-display: var(--rhc-black);
  --text-body: var(--rhc-black);
  --text-secondary: var(--rhc-ink-60);
  --text-accent: var(--rhc-red);
  --border-default: rgba(23, 18, 14, 0.16);
  --border-strong: var(--rhc-black);

  /* Semantic — actions */
  --action-primary-bg: var(--rhc-red);
  --action-primary-bg-hover: var(--rhc-scorch);
  --action-primary-fg: var(--rhc-bone);
  --action-secondary-border: var(--rhc-black);
  --action-secondary-fg: var(--rhc-black);

  /* Focus */
  --focus-ring: 2px solid var(--rhc-red);
  --focus-offset: 2px;
}

/* Dark context — apply .rhc-dark to any black section */
.rhc-dark {
  --surface-page: var(--rhc-black);
  --surface-card: var(--rhc-black-soft);
  --surface-well: #100C09;
  --text-display: var(--rhc-bone);
  --text-body: var(--rhc-bone);
  --text-secondary: var(--rhc-bone-70);
  --border-default: rgba(247, 240, 227, 0.18);
  --border-strong: var(--rhc-bone);
  --action-secondary-border: var(--rhc-bone);
  --action-secondary-fg: var(--rhc-bone);
}


/* ===== tokens/typography.css ===== */
/* The Redheaded Cowgirl — Type tokens
   Festival poster, not wedding invitation. Max three faces per layout.
   The rope script lives in the logo ONLY — never use script fonts. */

:root {
  /* Families */
  --font-display: 'Alfa Slab One', 'Georgia', serif;       /* rodeo-poster slab — the single biggest statement */
  --font-headline: 'Bebas Neue', 'Arial Narrow', sans-serif; /* tall & loud — everything else uppercase */
  --font-accent: 'Special Elite', 'Courier New', monospace;  /* wanted-poster typewriter — labels, dates, captions */
  --font-body: 'Lato', 'Helvetica Neue', sans-serif;         /* reading text */

  /* Scale (desktop) */
  --text-hero: clamp(56px, 8vw, 120px);   /* Alfa Slab One, uppercase */
  --text-h1: clamp(44px, 5vw, 72px);      /* Bebas Neue */
  --text-h2: clamp(32px, 3.5vw, 48px);    /* Bebas Neue */
  --text-h3: 28px;                        /* Bebas Neue */
  --text-body-lg: 19px;                   /* Lato */
  --text-body-md: 16px;                   /* Lato */
  --text-body-sm: 14px;                   /* Lato */
  --text-label: 14px;                     /* Special Elite, letter-spaced */
  --text-label-sm: 12px;

  /* Leading & tracking */
  --leading-display: 0.95;     /* headlines: tight */
  --leading-headline: 0.92;
  --leading-body: 1.55;
  --tracking-headline: 0.02em;
  --tracking-label: 0.14em;    /* typewriter labels get air */
  --tracking-caps-body: 0.08em;
}

/* Utility classes mirroring the system */
.rhc-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0;
}
.rhc-h1, .rhc-h2, .rhc-h3 {
  font-family: var(--font-headline);
  line-height: var(--leading-headline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-headline);
  font-weight: 400;
}
.rhc-h1 { font-size: var(--text-h1); }
.rhc-h2 { font-size: var(--text-h2); }
.rhc-h3 { font-size: var(--text-h3); }
.rhc-label {
  font-family: var(--font-accent);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.rhc-body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
}


/* ===== tokens/spacing.css ===== */
/* The Redheaded Cowgirl — Spacing, radii, borders, shadows, motion */

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

  /* Radii — the brand is square-shouldered. Sharp corners by default. */
  --radius-none: 0;
  --radius-sm: 2px;     /* barely-there softening on small controls */
  --radius-pill: 999px; /* tags/badges only */

  /* Borders — honest, inky lines instead of soft shadows */
  --border-hairline: 1px solid var(--border-default);
  --border-heavy: 2px solid var(--border-strong);
  --border-poster: 3px solid var(--border-strong);

  /* Shadows — hard offset print-style shadows, never soft blurs */
  --shadow-poster: 4px 4px 0 var(--rhc-black);
  --shadow-poster-red: 4px 4px 0 var(--rhc-red);
  --shadow-poster-sm: 2px 2px 0 var(--rhc-black);

  /* Motion — quick, punchy, no bounce */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */

  /* Layout */
  --container-max: 1200px;
  --gutter: var(--space-5);
}


/* ===== tokens/base.css ===== */
/* The Redheaded Cowgirl — base element styles */

* { box-sizing: border-box; }

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

a { color: inherit; }

::selection { background: var(--rhc-red); color: var(--rhc-bone); }

:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }


/* ===== page-specific ===== */
html { scroll-behavior: smooth; }
section[id], footer { scroll-margin-top: 70px; }
@keyframes rhcmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rhc-marq-run { animation: none !important; } }

/* hover / focus / active states (override inline styles) */
.navlink:hover { color: var(--rhc-red) !important; }
.redhover:hover { color: var(--rhc-red) !important; }
.btn-red { transition: all 120ms cubic-bezier(0.2,0,0,1); }
.btn-red:hover { background: var(--rhc-scorch) !important; }
.btn-red:active { transform: translate(4px,4px); box-shadow: none !important; }
.btn-bone-outline:hover { background: var(--rhc-bone) !important; color: var(--rhc-black) !important; }
.btn-black-outline:hover { background: var(--rhc-black) !important; color: var(--rhc-bone) !important; }
.svc:hover { box-shadow: 5px 5px 0 var(--rhc-black); transform: translate(-2px,-2px); }
.gfig img { transition: transform 200ms cubic-bezier(0.2,0,0,1); }
.gfig:hover img { transform: scale(1.03); }
.field:focus { border-color: var(--rhc-red) !important; }