/* SLE-T7-tokens — canonical CSS custom properties for the Scouts St-Pierre suite.
 *
 * Source of truth for design tokens (colors, spacing, radius, shadows,
 * typography scale, durations) per the Camp v2 Style Guide
 * (standalone HTML at /Users/local/Documents/Claude/Camp v2 Style Guide -standalone-.html).
 *
 * Apps consume via:
 *   <link rel="stylesheet" href="/vendor/style/tokens.css">
 * Their own css/style.css then adds app-specific tokens or overrides
 * (allowed only with a marker comment).
 */
:root {
  /* Brand */
  --y: #ffce00;
  --y-rgb: 255, 206, 0;

  /* Neutrals */
  --bk: #141414;
  --bk2: #1e1e1e;
  --bk3: #2a2a2a;
  --white: #fff;
  --wh: #fafaf8;
  --g1: #f2f1ed;
  --g2: #e4e2db;
  --g3: #b8b5ab;
  --g4: #6e6b62;

  /* Semantic colors */
  --green: #20bb45;
  --red: #dc2626;
  --blue: #1a6b9a;
  --amber: #d97706;

  /* Pedagogical relation colors (camps) */
  --pers: #fcbe09;
  --corps: #2285d0;
  --env: #20bb45;
  --autres: #e13998;
  --spirit: #dc2728;

  /* Activity type colors (camps) */
  --type-sc: #2285d0;
  --type-ac: #b6cc17;
  --type-aa: #a432c8;
  --type-d: #767676;

  /* Status surfaces */
  --bg-warn: #fff3cd;
  --bg-error: #fee2e2;
  --bg-success: #e8f5e9;
  --bg-info: #fff8e1;
  --fg-warn: #856404;
  --fg-success: #1b5e20;
  --fg-error: #b71c1c;

  /* Scout branch colors (camps) */
  --br-cast: #d97706;
  --br-louv: #b6cc17;
  --br-ecl: #20bb45;
  --br-pic: #a432c8;
  --br-resp: #1a6b9a;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  /* Themable focus ring — apps can override --focus-ring locally
   * (e.g., dark-mode media query for higher contrast). */
  --focus-ring: rgb(var(--y-rgb) / 60%);
  --focus-ring-fade: rgb(var(--y-rgb) / 50%);
  --focus-ring-fade-soft: rgb(var(--y-rgb) / 35%);

  /* Spacing scale */
  --sp-05: 0.1rem;
  --sp-1: 0.25rem;
  --sp-1h: 0.375rem;
  --sp-2: 0.5rem;
  --sp-2h: 0.625rem;
  --sp-3: 0.75rem;
  --sp-3h: 0.875rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Font size scale */
  --fs-xs: 0.62rem;
  --fs-sm: 0.75rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.15rem;
  --fs-2xl: 1.35rem;
  --fs-3xl: 1.6rem;

  /* Font weight scale */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Border radius scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Transition durations (calm motion ≤ 200ms per guide §17) */
  --dur-fast: 0.1s;
  --dur-chip: 0.12s;
  --dur-normal: 0.15s;
  --dur-slow: 0.3s;

  /* Layout */
  --sb-w: 236px;
  --page-shell-max: 1280px;

  /* Typography */
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

/* Dark-mode token overrides — per-app surfaces still need their own
 * rule-level adjustments (e.g., a card's box-shadow on a dark bg).
 * Apps can extend in their own CSS without conflicting with this block. */
@media (prefers-color-scheme: dark) {
  :root {
    --wh: #1a1a1a;
    --g1: #252525;
    --g2: #333;
    /* #309 (2026-05-20): dark-mode --g3 / --g4 lifted for WCAG AA on all
       16 SPA pages. Light-mode values unchanged (--g4#6E6B62 on --wh#FAFAF8
       = 4.95:1 AA-pass; --g3#B8B5AB is intentionally border-tone in light).
       Dark values target legible muted text on dark surfaces:
       --g3 was #666 (L=0.133) — failed 2.43–2.90:1 on --bk2/--g1/--bk3.
       --g3 now #9c9c9c (L=0.349) → on --bk2 6.34:1, on --g1 5.60:1,
         on --bk3 5.31:1, on --wh 6.63:1.  All > 4.5 AA.
       --g4 was #aaa (L=0.402) → 7.18:1 on --bk2 (already AA, but lifted
         for headroom against the blanket bright override).
       --g4 now #c8c8c8 (L=0.579) → 10.04:1 on --bk2, 10.45:1 on --wh. */
    --g3: #9c9c9c;
    --g4: #c8c8c8;
    /* Banner / badge tokens: --fg-* / --bg-* pairs all clear 4.5:1 with
       these values. Bumped --fg-warn #e6c56a → #f0d27a so its pairing
       with --bg-info (#2a2400) lifts from 8.83 → 10.32:1 (badge-info)
       and contrast on --bg-warn lifts from 9.59 → 11.04:1.  --fg-success
       #5dba5d → #7ed47e for 7.79:1 on --bg-success (was 6.07). --fg-error
       #f08080 → #ff9d9d for 6.95:1 on --bg-error (was 5.39). */
    --bg-warn: #3a2a00;
    --bg-error: #3a1010;
    --bg-success: #0a2a10;
    --bg-info: #2a2400;
    --fg-warn: #f0d27a;
    --fg-success: #7ed47e;
    --fg-error: #ff9d9d;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --focus-ring: #ffd966;
    --focus-ring-fade: rgba(255, 217, 102, 0.7);
    --focus-ring-fade-soft: rgba(255, 217, 102, 0.35);
  }
}

/* High-contrast mode — apps opt in by setting data-contrast="high"
 * on a root element. */
[data-contrast='high'] {
  --g1: #e8e8e8;
  --g2: #ccc;
  --g3: #666;
  --g4: #333;
  --bk: #000;
  --wh: #fff;
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --focus-ring: #000;
  --focus-ring-fade: rgba(0, 0, 0, 0.7);
  --focus-ring-fade-soft: rgba(0, 0, 0, 0.4);
}