/* ============================================================
   FC AI — Core design tokens (platform mirror)
   ============================================================
   Source of truth: ~/Downloads/fc_ai_design_system/colors_and_type.css

   This file mirrors the canonical token surface so the platform
   chrome can speak the same design language as the rendered
   reports (Brian wireframe, multi-session feedback, SESSION_PROFILE).

   Half 1: tokens only. Layouts to follow in Half 2 once Nick's
   wireframe lands. Existing --accent / --page-bg vars in base.html
   are NOT removed — these new --fc-* vars live alongside them so
   incremental migration is possible without breakage.
   ============================================================ */

/* -------- Geist + Geist Mono (UI + data) -------- */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@300..700&display=swap");

/* -------- Seeker (brand display) — vendored under /static/fonts/ -------- */
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-ExtraLight.otf") format("opentype");      font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-ExtraLightItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-Light.otf") format("opentype");           font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-LightItalic.otf") format("opentype");     font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-Regular.otf") format("opentype");         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-Italic.otf") format("opentype");          font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-Medium.otf") format("opentype");          font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-MediumItalic.otf") format("opentype");    font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-Semibold.otf") format("opentype");        font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-SemiboldItalic.otf") format("opentype");  font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-Bold.otf") format("opentype");            font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-BoldItalic.otf") format("opentype");      font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-ExtraBold.otf") format("opentype");       font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Seeker"; src: url("/static/fonts/Seeker-ExtraBoldItalic.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  /* ---------- Brand palette (source of truth) ---------- */
  --fc-neon:        #E6FF00;  /* FC AI surfaces only — NOT for tenant chrome */
  --fc-orange:      #FF6B1A;  /* alarm + Watford light-mode accent — per Nick 2026-05-21 */
  --fc-navy:        #121F38;  /* primary ground */
  --fc-black:       #0D0D0D;
  --fc-offwhite:    #F4F4F4;
  --fc-white:       #FFFFFF;

  /* ---------- Extended navy scale ---------- */
  --fc-navy-900:    #0A1326;
  --fc-navy-800:    #121F38;
  --fc-navy-700:    #1B2B4A;
  --fc-navy-600:    #26375C;
  --fc-navy-500:    #374A72;
  --fc-navy-300:    #7788A8;
  --fc-navy-200:    #A9B4C8;
  --fc-navy-100:    #D4DAE4;

  /* ---------- Neon ramp (FC AI surfaces only) ---------- */
  --fc-neon-600:    #B8CC00;
  --fc-neon-400:    #EEFF4D;
  --fc-neon-200:    #F5FFA6;

  /* ---------- Per-club focus accent (overridden in [data-club]) ---------- */
  /* --fc-focus-1 is the tenant accent. Defaults to FC AI neon for unbranded
     surfaces. Watford / Leicester override below. */
  --fc-focus-1: var(--fc-neon);
  --fc-focus-2: #00D4FF;  /* Performance — cyan (constant across tenants) */
  --fc-focus-3: #FF80AB;  /* Game Understanding — pink */
  --fc-focus-4: #B4A0FF;  /* Mentality — lavender */

  /* ---------- Semantic surface tokens ---------- */
  --fc-bg:             var(--fc-navy);
  --fc-bg-alt:         var(--fc-navy-900);
  --fc-bg-raised:      var(--fc-navy-700);
  --fc-surface:        var(--fc-navy-800);
  --fc-surface-card:   #1A2B48;
  --fc-surface-subtle: #1E2A40;
  --fc-fg:             var(--fc-offwhite);
  --fc-fg-muted:       var(--fc-navy-200);
  --fc-fg-dim:         var(--fc-navy-300);

  --fc-border:         rgba(244, 244, 244, 0.10);
  --fc-border-strong:  rgba(244, 244, 244, 0.22);

  /* ---------- Type stack ---------- */
  --fc-font-display:   "Seeker", "Geist", system-ui, sans-serif;
  --fc-font-sans:      "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-font-mono:      "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (pitchside / bold-led) ---------- */
  --fc-fs-hero:        clamp(64px, 9vw, 160px);
  --fc-fs-display:     clamp(48px, 6vw, 96px);
  --fc-fs-h1:          48px;
  --fc-fs-h2:          36px;
  --fc-fs-h3:          26px;
  --fc-fs-h4:          24px;
  --fc-fs-lg:          20px;
  --fc-fs-body:        16px;
  --fc-fs-sm:          14px;
  --fc-fs-xs:          12px;
  --fc-fs-eyebrow:     11px;

  --fc-lh-display:     0.92;
  --fc-lh-tight:       1.15;
  --fc-lh-snug:        1.08;
  --fc-lh-body:        1.45;
  --fc-lh-loose:       1.6;

  --fc-tr-tight:       -0.02em;
  --fc-tr-normal:      0;
  --fc-tr-wide:        0.12em;
  --fc-tr-xwide:       0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --fc-s-0: 0;
  --fc-s-1: 4px;
  --fc-s-2: 8px;
  --fc-s-3: 12px;
  --fc-s-4: 16px;
  --fc-s-5: 20px;
  --fc-s-6: 24px;
  --fc-s-8: 32px;
  --fc-s-10: 40px;
  --fc-s-12: 48px;
  --fc-s-16: 64px;
  --fc-s-20: 80px;
  --fc-s-24: 96px;

  /* ---------- Radii (mostly sharp; capsules for pills) ---------- */
  --fc-r-0:   0;
  --fc-r-sm:  4px;
  --fc-r-md:  8px;
  --fc-r-lg:  14px;
  --fc-r-xl:  22px;
  --fc-r-pill: 999px;

  /* ---------- Motion ---------- */
  --fc-dur-fast:   120ms;
  --fc-dur-base:   180ms;
  --fc-dur-slow:   320ms;
  --fc-ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --fc-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Geometry (brand motif) ---------- */
  --fc-pitch-skew:  -18deg;
  --fc-pitch-slope: polygon(18% 0, 100% 0, 82% 100%, 0 100%);

  /* ---------- Shadow / elevation ---------- */
  --fc-shadow-sm:   0 1px 2px rgba(0,0,0,0.25);
  --fc-shadow-md:   0 6px 18px rgba(0,0,0,0.28);
  --fc-shadow-lg:   0 18px 48px rgba(0,0,0,0.40);
  --fc-shadow-tenant: 0 0 0 1px var(--fc-focus-1), 0 8px 28px rgba(0,0,0,0.35);
}

/* ============================================================
   Per-tenant focus accent overrides. The platform-side users.py
   CLUB_THEMES dict is the runtime source of accent values that
   get injected into the existing --accent/--accent-* vars via
   the inline <style> in base.html. These rules give the same
   colours a home in the FC AI token namespace so future code
   can lean on --fc-focus-1 instead.

   Watford   accent  #FBEE23  (yellow — Watford Technique focus)
   Leicester accent  #FDBE11  (gold)
   Note: Watford accent intentionally differs from FC AI neon
   (#E6FF00). Neon is for pure FC AI surfaces only.
   ============================================================ */
[data-club="watford"]   { --fc-focus-1: #FBEE23; }
[data-club="leicester"] { --fc-focus-1: #FDBE11; }

/* ============================================================
   Light theme — applied via [data-theme="light"] on <html>.
   Mirrors the canonical light-mode block from
   ~/Downloads/fc_ai_design_system/colors_and_type.css. The
   accent yellows shift to deeper twins on white so they don't
   strobe — Watford #FBEE23 → #B89E00, Leicester #FDBE11 → #C99100.
   ============================================================ */
[data-theme="light"] {
    --fc-bg:             var(--fc-offwhite);    /* page wash */
    --fc-bg-alt:         #FFFFFF;               /* sidebar surface */
    --fc-bg-raised:      #FFFFFF;
    --fc-surface:        #FFFFFF;               /* card body */
    --fc-surface-card:   #F2F5FA;               /* hover / elevated */
    --fc-surface-subtle: #EEF2F8;

    --fc-fg:             var(--fc-black);
    --fc-fg-muted:       #4B5668;
    --fc-fg-dim:         #6B7383;

    --fc-border:         rgba(13, 13, 13, 0.10);
    --fc-border-strong:  rgba(13, 13, 13, 0.22);

    /* Constant focus tokens on light surfaces — saturated → deeper.
       focus-1 is set per-tenant below so the override sticks. */
    --fc-focus-2:        #0090B0;
    --fc-focus-3:        #D94C7F;
    --fc-focus-4:        #6B50C0;
}

/* Tenant accent in light mode — design-system canonical twins.
   These need higher specificity than the [data-club] rules above,
   so they're scoped with [data-theme="light"]. */
/* Per Nick 2026-05-21: deeper mustard/gold didn't pop. New per-tenant
   brand-tied accents that punch on white surfaces.
   Watford   → FC AI orange (close to Watford crest red).
   Leicester → royal blue (close to LCFC brand). */
/* WCAG: 3.1:1 on white — decorative / large-text only, not for body copy. */
[data-theme="light"][data-club="watford"]   { --fc-focus-1: #FF6B1A; }
[data-theme="light"][data-club="leicester"] { --fc-focus-1: #0066CC; }

/* ============================================================
   Semantic element classes — opt-in via class="fc-h1" etc.
   Doesn't touch global elements so existing template styles are
   untouched. Pull these into the new layouts as Half 2 ships.
   ============================================================ */
.fc-hero {
  font-family: var(--fc-font-display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--fc-fs-hero);
  line-height: var(--fc-lh-display);
  letter-spacing: var(--fc-tr-tight);
  text-transform: uppercase;
}
.fc-display {
  font-family: var(--fc-font-display);
  font-weight: 800;
  font-style: italic;
  font-size: var(--fc-fs-display);
  line-height: var(--fc-lh-display);
  letter-spacing: var(--fc-tr-tight);
  text-transform: uppercase;
}
.fc-h1 { font-family: var(--fc-font-sans); font-weight: 700; font-size: var(--fc-fs-h1); line-height: var(--fc-lh-snug); letter-spacing: var(--fc-tr-tight); }
.fc-h2 { font-family: var(--fc-font-sans); font-weight: 700; font-size: var(--fc-fs-h2); line-height: var(--fc-lh-snug); letter-spacing: var(--fc-tr-tight); }
.fc-h3 { font-family: var(--fc-font-sans); font-weight: 600; font-size: var(--fc-fs-h3); line-height: 1.15; }
.fc-h4 { font-family: var(--fc-font-sans); font-weight: 600; font-size: var(--fc-fs-h4); line-height: 1.2; }
.fc-body  { font-family: var(--fc-font-sans); font-size: var(--fc-fs-body); line-height: var(--fc-lh-body); }
.fc-lg    { font-size: var(--fc-fs-lg); line-height: 1.4; }
.fc-sm    { font-size: var(--fc-fs-sm); line-height: 1.4; }
.fc-xs    { font-size: var(--fc-fs-xs); line-height: 1.3; }
.fc-mono  { font-family: var(--fc-font-mono); font-size: var(--fc-fs-sm); }
.fc-eyebrow {
  font-family: var(--fc-font-sans);
  font-size: var(--fc-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--fc-tr-xwide);
  text-transform: uppercase;
}

/* Italic-accent: any run gets the pitchside lean. */
.fc-italic-accent { font-style: italic; font-weight: 800; letter-spacing: var(--fc-tr-tight); }

/* Period-as-full-stop:  a brand motif. Apply to display headings
   that should end with a hard, neon-coloured stop. */
.fc-period::after { content: "."; color: var(--fc-focus-1); }

/* Pitch-slope clip — clips an element to the brand parallelogram. */
.fc-pitch-clip { clip-path: var(--fc-pitch-slope); }