/* ==========================================================================
   Oxford Golf Academy — Design Tokens
   Colors, Typography, Spacing, Radii, Shadows, Sections
   ========================================================================== */

/* Fonts loaded via <link> in HTML head for parallel fetch — see site HTML files */

:root {
  /* -------------------- Brand Colors -------------------- */
  --oga-navy: #061B3A;          /* Primary Navy — heroes, headers, footers, dark cards */
  --oga-navy-dark: #0C254A;     /* Dark Navy — secondary dark sections, button bg, hover */
  --oga-gold: #D9A441;          /* Oxford Gold — primary CTAs, accents, highlights */
  --oga-gold-deep: #B8862E;     /* Hover/pressed gold */
  --oga-cream: #F7F4EE;         /* Warm page bg, content areas, cards */
  --oga-white: #FFFFFF;
  --oga-pine: #5D7B52;          /* Pine Green — golf/nature accent (sparingly) */

  /* -------------------- Neutrals -------------------- */
  --oga-ink: #0B1522;           /* Body text on light bg */
  --oga-ink-2: #3A4658;         /* Secondary body */
  --oga-line: #E5E0D5;          /* Hairlines on cream */
  --oga-line-dark: #1A2F52;     /* Hairlines on navy */
  --oga-muted: #6E6860;         /* Muted text on cream — AA-compliant (5.1:1 on cream) */
  --oga-gold-muted: #8B5E0C;    /* Muted gold — links, labels, required indicators — AA-compliant (5.2:1 on cream) */
  --fg-body: var(--oga-ink-2);  /* Body paragraph text — alias of --oga-ink-2 */

  /* -------------------- Semantic -------------------- */
  --bg-page: var(--oga-cream);
  --bg-surface: var(--oga-white);
  --bg-dark: var(--oga-navy);
  --bg-dark-2: var(--oga-navy-dark);

  --fg-primary: var(--oga-navy);
  --fg-secondary: var(--oga-ink-2);
  --fg-on-dark: var(--oga-white);
  --fg-on-dark-muted: rgba(255,255,255,0.72);
  --fg-accent: var(--oga-gold);

  --border: var(--oga-line);
  --border-dark: var(--oga-line-dark);

  /* -------------------- Type families -------------------- */
  --font-display: 'Playfair Display', 'Times New Roman', serif;
  --font-ui: 'Montserrat', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* -------------------- Type scale (semantic) -------------------- */
  /* Eyebrow / Kicker */
  --eyebrow-family: var(--font-ui);
  --eyebrow-weight: 600;
  --eyebrow-size: 12px;
  --eyebrow-lh: 1.4;
  --eyebrow-tracking: 1.5px;
  --eyebrow-transform: uppercase;
  --eyebrow-color: var(--oga-gold-muted); /* gold #D9A441 fails 2:1 on cream; dark amber passes 5.2:1. Dark sections override via .section-dark p. */

  /* H1 */
  --h1-family: var(--font-display);
  --h1-weight: 700;
  --h1-size: 64px;
  --h1-lh: 72px;
  --h1-size-mobile: 42px;
  --h1-lh-mobile: 50px;

  /* H1 hero variant — homepage full-bleed hero only */
  --h1-hero-size: 72px;
  --h1-hero-lh: 80px;
  --h1-hero-size-mobile: 44px;
  --h1-hero-lh-mobile: 54px;

  /* H2 */
  --h2-family: var(--font-display);
  --h2-weight: 600;
  --h2-size: 36px;
  --h2-lh: 1.2;
  --h2-size-mobile: 26px;

  /* H3 */
  --h3-family: var(--font-display);
  --h3-weight: 600;
  --h3-size: 24px;
  --h3-lh: 1.25;

  /* Body */
  --body-family: var(--font-body);
  --body-weight: 400;
  --body-size: 16px;
  --body-lh: 26px;

  --body-sm-size: 14px;
  --body-sm-lh: 22px;

  /* Nav / UI */
  --ui-family: var(--font-ui);
  --ui-weight: 500;
  --ui-size: 14px;
  --ui-lh: 1.5;
  --ui-tracking: 0.4px;

  /* Button label */
  --btn-family: var(--font-ui);
  --btn-weight: 600;
  --btn-size: 14px;
  --btn-tracking: 0.6px;

  /* -------------------- Spacing (8px base) -------------------- */
  --space-0_5: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;

  /* -------------------- Section spacing -------------------- */
  --section-sm: 64px;
  --section-md: 96px;
  --section-lg: 128px;
  --section-xl: 160px;

  /* -------------------- Radii -------------------- */
  --radius-sm: 4px;     /* inputs, tags */
  --radius-md: 8px;     /* buttons, fields */
  --radius-lg: 12px;    /* cards, thumbs */
  --radius-xl: 20px;    /* feature cards, panels */
  --radius-pill: 999px;

  /* -------------------- Shadows / Elevation -------------------- */
  --shadow-xs: 0 1px 2px rgba(6, 27, 58, 0.06);
  --shadow-sm: 0 2px 6px rgba(6, 27, 58, 0.08);
  --shadow-md: 0 8px 24px rgba(6, 27, 58, 0.10);
  --shadow-lg: 0 16px 40px rgba(6, 27, 58, 0.14);
  --shadow-gold: 0 8px 22px rgba(217, 164, 65, 0.32);
  --shadow-gold-strong: 0 12px 28px rgba(217, 164, 65, 0.45);

  /* -------------------- Layout -------------------- */
  --container-max: 1320px;
  --container-narrow: 1100px;
  --gutter: 24px;

  /* -------------------- Motion -------------------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* -------------------- Extended tokens (v2) -------------------- */

  /* Tints — subtle fills, not large surfaces */
  --oga-gold-tint: rgba(217,164,65,0.08);
  --oga-navy-tint: rgba(6,27,58,0.04);

  /* Semantic status */
  --oga-error:   #C0392B;
  --oga-success: #2E7D4F;

  /* Small label — pricing tables, staff credential lines, filter tabs */
  --label-family:   var(--font-ui);
  --label-weight:   600;
  --label-size:     11px;
  --label-tracking: 1.2px;
}

/* ==========================================================================
   Element defaults
   ========================================================================== */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--body-family);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyebrow {
  font-family: var(--eyebrow-family);
  font-weight: var(--eyebrow-weight);
  font-size: var(--eyebrow-size);
  line-height: var(--eyebrow-lh);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: var(--eyebrow-transform);
  color: var(--eyebrow-color);
}

h1, .h1 {
  font-family: var(--h1-family);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  color: var(--fg-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .h2 {
  font-family: var(--h2-family);
  font-weight: var(--h2-weight);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  color: var(--fg-primary);
  margin: 0;
}

h3, .h3 {
  font-family: var(--h3-family);
  font-weight: var(--h3-weight);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  color: var(--fg-primary);
  margin: 0;
}

p {
  font-family: var(--body-family);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--fg-secondary);
  margin: 0;
}

.body-sm {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
}

.ui-text, nav a, .nav-link {
  font-family: var(--ui-family);
  font-weight: var(--ui-weight);
  font-size: var(--ui-size);
  line-height: var(--ui-lh);
  letter-spacing: var(--ui-tracking);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--btn-family);
  font-weight: var(--btn-weight);
  font-size: var(--btn-size);
  letter-spacing: var(--btn-tracking);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: 14px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn .arrow {
  transition: transform var(--dur-base) var(--ease-out);
  display: inline-block;
}
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--oga-gold);
  color: var(--oga-white);
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: var(--oga-gold-deep);
  box-shadow: var(--shadow-gold-strong);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: var(--oga-navy);
  border: 1px solid var(--oga-gold);
}
.btn-secondary.on-dark { color: var(--oga-white); }
.btn-secondary:hover {
  background: var(--oga-navy-dark);
  color: #fff;
  border-color: var(--oga-gold);
  box-shadow: 0 8px 22px rgba(12, 37, 74, 0.30);
}

.btn-tertiary {
  padding: 0;
  background: transparent;
  color: var(--oga-navy);
  text-transform: uppercase;
  font-family: var(--btn-family);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.8px;
  border: none;
  border-radius: 0;
}
.btn-tertiary:hover { color: var(--oga-gold); }

/* ==========================================================================
   Extended utility classes (v2)
   ========================================================================== */

/* Eyebrow on dark backgrounds */
.eyebrow.on-dark {
  color: rgba(217,164,65,0.90);
}

/* Hero H1 — homepage full-bleed hero only */
.h1-hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--h1-hero-size);
  line-height: var(--h1-hero-lh);
  letter-spacing: -0.01em;
  color: var(--oga-white);
  margin: 0;
}

@media (max-width: 768px) {
  .h1-hero {
    font-size: var(--h1-hero-size-mobile);
    line-height: var(--h1-hero-lh-mobile);
  }
  h1, .h1 {
    font-size: var(--h1-size-mobile);
    line-height: var(--h1-lh-mobile);
  }
}

/* Small label — pricing tables, staff credentials, filter tabs */
.label {
  font-family: var(--label-family);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

/* Status colors */
.text-error   { color: var(--oga-error); }
.text-success { color: var(--oga-success); }
.bg-error-tint   { background: rgba(192,57,43,0.08); }
.bg-success-tint { background: rgba(46,125,79,0.08); }

/* Focus ring defined in site.css — 3px gold, offset 3px */

/* Skip link styled in site.css as .skip-link */