/*
 * club_tokens.css — Club's design-token foundation (Constitution §5; DS-01, A11Y-01/02/11).
 *
 * Loaded right after Bootstrap on every page. Step 1 of a no-rework migration:
 *   - the shared type system's tokens (font_best.md Part 7, pinned in __md_info/font_best.md),
 *     with --font-sans bound to the site font until the font ADR (CFG-05);
 *   - --twc-* aliases (the platform names widgets read);
 *   - --club-* names for TODAY's values, so nothing changes visually;
 *   - the accessibility foundation (focus ring, reduced motion, skip link, content links).
 * New and edited CSS uses these tokens instead of hard-coded values. The dark set and the
 * spec's base layer come later (DS-07, DS-13).
 */

/* Site font, self-hosted (variable: one file per script covers every weight). OFL 1.1. */
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree/figtree-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree/figtree-latin-ext-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light;   /* "light dark" once the dark set ships (DS-07) */

    /* Family — bound to the current site font until the font ADR */
    --font-sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Size ladder (font_best.md Part 2) */
    --font-size-caption: 0.75rem;
    --font-size-small:   0.875rem;
    --font-size-body:    1rem;
    --font-size-lead:    1.125rem;
    --font-size-sub:     1.25rem;
    --font-size-heading: 1.5rem;
    --font-size-title:   clamp(2rem, 1.75rem + 1vw, 2.5rem);
    --font-size-display: clamp(2.75rem, 2.4rem + 1.4vw, 3.75rem);

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --leading-display: 1.05;
    --leading-title: 1.1;
    --leading-heading: 1.2;
    --leading-sub: 1.3;
    --leading-body: 1.55;
    --leading-small: 1.5;
    --leading-caption: 1.45;
    --leading-label: 1.3;

    --tracking-display: -0.02em;
    --tracking-title: -0.015em;
    --tracking-heading: -0.01em;
    --tracking-caps: 0.06em;

    --measure: 65ch;
    --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;
    --space-9: 6rem;    --space-10: 8rem;

    /* Ink neutrals (fixed: they carry the contrast guarantee) */
    --ink: #18181B;
    --ink-muted: #595F69;
    --ink-subtle: #6B7280;
    --ink-inverse: #EDEDEF;
    --color-text: var(--ink);
    --color-text-muted: var(--ink-muted);
    --color-text-subtle: var(--ink-subtle);

    /* Product-owned tokens. styles_config.php overrides these per site from TAOH_SITE_*_COLOR. */
    --color-bg: #f4f4f4;
    --color-surface: #ffffff;
    --color-accent: #2557a7;          /* 7.0:1 with white */
    --color-accent-hover: #1d4585;
    --color-on-accent: #ffffff;
    --color-link: #2557a7;            /* 6.4:1 on #f4f4f4 */
    --color-link-hover: #1d4585;
    --color-focus: #2557a7;
    --color-success-text: #14532D; --color-danger-text: #991B1B; --color-warning-text: #713F12;

    /* Platform aliases (what embedded widgets read) */
    --twc-font-body: var(--font-sans);
    --twc-color-accent: var(--color-accent);
    --twc-color-on-accent: var(--color-on-accent);
    --twc-color-bg: var(--color-bg);
    --twc-color-surface: var(--color-surface);
    --twc-color-text: var(--color-text);
    --twc-color-link: var(--color-link);
    --twc-radius-control: var(--club-radius-sm);
    --twc-focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-focus);

    /* Club names for today's values (no visual change; swap hard-coded values for these) */
    --club-color-primary: var(--color-accent);
    --club-color-primary-hover: var(--color-accent-hover);
    --club-color-accent: #b45321;     /* home accent; per site from TAOH_SITE_ACCENT_COLOR */
    --club-color-text: #333333;
    --club-color-heading: #222222;
    --club-color-border: #dddddd;
    --club-color-line: #ebe7e1;
    --club-color-cta: #a65e00;        /* was #f88c00 (2.4:1 with white); 4.97:1 */
    --club-color-cta-hover: #8a4e00;
    --club-radius-sm: 6px;
    --club-radius-md: 12px;
    --club-radius-pill: 999px;
    --club-shadow-1: 0 1px 3px rgba(0, 0, 0, .08);
    --club-shadow-2: 0 2px 10px rgba(0, 0, 0, .15);

    /* Stacking (DS-11): use these instead of new magic numbers */
    --club-z-dropdown: 1000;
    --club-z-sticky: 1020;
    --club-z-overlay: 1040;
    --club-z-modal: 1050;
    --club-z-widget-overlay: 1060;
    --club-z-toast: 1080;

    /* Breakpoints (DS-10; Bootstrap 4): 576 / 768 / 992 / 1200 px — media queries can't read vars */
  }
}

/*
 * Accessibility foundation. Unlayered on purpose: legacy CSS is unlayered too, and unlayered
 * rules beat every layer, so these must sit outside @layer to take effect.
 */

/* A11Y-01: keyboard focus is always visible (play3 and 47 legacy rules remove outlines). */
:focus-visible {
  outline: 2px solid var(--color-focus) !important;
  outline-offset: 2px !important;
}
/* Programmatic focus targets (the skip link's <main tabindex="-1">) don't get a ring around the page. */
[tabindex="-1"]:focus-visible:not(a):not(button):not(input):not(select):not(textarea) { outline: none !important; }
@media (forced-colors: active) {
  :focus-visible { outline-color: CanvasText !important; }
}

/* A11Y-11: honour reduced motion (230 animations/transitions, autoplay carousels).
   Loading indicators keep animating: a frozen spinner looks like a broken page. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
  :not([class*="spinner"]):not([class*="loader"]):not([id*="loader"]):not([class*="skeleton"]):not([class*="shimmer"]),
  :not([class*="spinner"]):not([class*="loader"]):not([id*="loader"]):not([class*="skeleton"]):not([class*="shimmer"])::before,
  :not([class*="spinner"]):not([class*="loader"]):not([id*="loader"]):not([class*="skeleton"]):not([class*="shimmer"])::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* A11Y-09: skip link (first element in <body>) and a screen-reader-only helper. */
.club-skip {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: var(--club-z-toast);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  color: var(--color-link);
  border-radius: var(--club-radius-sm);
  box-shadow: var(--club-shadow-2);
}
.club-skip:focus { top: var(--space-2); }
.club-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* A11Y-02: links inside running text must not look like body text. Specificity (0,0,2) via
   :where(), so it beats the legacy bare `a { color:#222 }` but loses to any component or widget
   rule with a class (menus, cards, heroes, buttons keep their own look). */
:where(main) p a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
:where(main) p a:hover { color: var(--color-link-hover); }