/* Futebol Agenda 3.3: scoped multi-club theme primitives.
   Official design-system contract: every club uses the same typography, spacing,
   controls and semantic colors. A club theme changes only the branded
   header/banner, match hero, and responsive Web primary-navigation surface. */

@layer tokens, legacy-components, components;

@layer tokens {
:root {
    color-scheme: light;

    --brand-950: #22241f;
    --brand-900: #2f312e;
    --brand-800: #4b4d47;
    --brand-700: #62645e;
    --brand-100: #e9e6dc;
    --brand-header-a: #2a2c27;
    --brand-header-b: #3c3e37;
    --brand-header-c: #222420;
    --brand-hero-a: #3a3c36;
    --brand-hero-b: #4b4d47;
    --brand-hero-c: #222420;

    /* Shared Futebol Agenda foundations - invariant and club-neutral. */
    --theme-light-ink: #2f312e;
    --theme-light-text: #484b46;
    --theme-light-text-secondary: #62645e;
    --theme-light-text-muted: #6c6e68;
    --theme-light-bg: #f3f1e8;
    --theme-light-card: #fffdf3;
    --theme-light-soft: #e9e6dc;
    --theme-light-line: #d4d0c5;
    --theme-light-line-strong: #bdb9ae;

    --theme-dark-brand: #d8d5ca;
    --theme-dark-brand-strong: #171815;
    --theme-dark-brand-bright: #f2efe6;
    --theme-dark-brand-soft: #292b26;
    --theme-dark-ink: #f2efe6;
    --theme-dark-text: #e5e2d9;
    --theme-dark-text-secondary: #c6c3b8;
    --theme-dark-text-muted: #a7a49b;
    --theme-dark-bg: #171815;
    --theme-dark-card: #20221e;
    --theme-dark-soft: #292b26;
    --theme-dark-line: #3a3c36;
    --theme-dark-line-strong: #4a4c45;

    /* Controls stay neutral. Legacy aliases intentionally resolve to this
       invariant interaction palette, never to the selected club ramp. */
    --control-accent: #4b4d47;
    --control-accent-strong: #3f413c;
    --control-accent-bright: #62645e;
    --control-accent-soft: var(--theme-light-soft);
    --control-action-bg: #4b4d47;
    --control-action-bg-hover: #3f413c;
    --control-action-text: var(--theme-light-card);
    --control-neutral-bg: #fffdf3;
    --control-neutral-bg-hover: #e9e6dc;
    --control-neutral-bg-pressed: #dedad0;
    --control-neutral-border: #bdb9ae;
    --control-neutral-border-strong: #8b8d85;
    --control-neutral-text: #3f413c;
    --control-neutral-text-secondary: #555852;
    --control-neutral-selected-bg: #3f413c;
    --control-neutral-selected-bg-hover: #2f312e;
    --control-neutral-selected-text: #fffdf3;
    --control-neutral-disabled-bg: #e9e6dc;
    --control-neutral-disabled-border: #d4d0c5;
    --control-neutral-disabled-text: #6c6e68;
    --control-neutral-focus: #a97822;
    --brand: var(--control-accent);
    --brand-strong: var(--control-accent-strong);
    --brand-depth: var(--control-accent-strong);
    --brand-bright: var(--control-accent-bright);
    --brand-soft: var(--control-accent-soft);
    --action-bg: var(--control-action-bg);
    --action-bg-hover: var(--control-action-bg-hover);
    --action-text: var(--control-action-text);
    --ink: var(--theme-light-ink);
    --text: var(--theme-light-text);
    --text-secondary: var(--theme-light-text-secondary);
    --text-muted: var(--theme-light-text-muted);
    --bg: var(--theme-light-bg);
    --bg-card: var(--theme-light-card);
    --bg-soft: var(--theme-light-soft);
    --mist: var(--theme-light-bg);
    --ivory: var(--theme-light-card);
    --line: var(--theme-light-line);
    --line-strong: var(--theme-light-line-strong);
    --toast-success-surface: #fffdf6;
    --toast-success-text: #272923;
    --toast-success-border: #d8d2c3;
    --toast-success-icon: #0a7a4a;
    --toast-success-icon-text: #fffdf3;
    --toast-muted-text: #686a62;
    --toast-action-surface: #2f312e;
    --toast-action-text: #fffdf6;
    --toast-warning-accent: #8a6717;
    --toast-error-accent: #b93b36;
    --toast-shadow: 0 18px 44px rgba(47, 49, 46, 0.14), 0 3px 10px rgba(47, 49, 46, 0.08);

    --gold: #c99a3d;
    --gold-strong: #a97822;
    --blue: #2468a8;
    --red: #b93b36;
    --violet: #8b3f68;
    --draw: #6d746f;
    --focus: #8a6717;
    --win: #0a7a4a;
    --loss: #b93b36;
    --live: #d93d37;
    --success: var(--win);
    --danger: var(--loss);
    --warning-text: var(--gold-strong);
    --focus-ring: var(--focus);
    --comp-bsa: #0a7a4a;
    --comp-cli: #c99a3d;
    --comp-copa: #2468a8;
    --comp-paulista: #6b7f32;
    --comp-other: #858f87;

    --shadow: 0 14px 32px rgba(47, 49, 46, 0.09);
    --shadow-tight: 0 4px 14px rgba(47, 49, 46, 0.065);
    --shadow-modal: 0 24px 64px rgba(47, 49, 46, 0.18);
    --shadow-card: var(--shadow-tight);
    --shadow-control: 0 2px 6px rgba(47, 49, 46, 0.10);
    --shadow-team-marker: 0 2px 7px color-mix(in srgb, var(--theme-light-ink) 20%, transparent);
    --shadow-position-badge: 0 12px 24px color-mix(in srgb, var(--theme-light-ink) 18%, transparent);
    --shadow-nav-floating: 0 12px 36px color-mix(in srgb, var(--theme-light-ink) 22%, transparent);
    --shadow-nav-sticky: 0 12px 32px color-mix(in srgb, var(--theme-light-ink) 16%, transparent);
    --border-team-marker-accent: color-mix(in srgb, var(--theme-light-ink) 46%, transparent);
    --pattern-brand-grid-strong: color-mix(in srgb, var(--theme-light-ink) 8%, transparent);
    --pattern-brand-grid-subtle: color-mix(in srgb, var(--theme-light-ink) 6%, transparent);
    --pattern-brand-grid-faint: color-mix(in srgb, var(--theme-light-ink) 4.5%, transparent);
    --pattern-brand-grid-ghost: color-mix(in srgb, var(--theme-light-ink) 3.5%, transparent);
    --surface-hero-countdown: color-mix(in srgb, var(--brand-hero-c) 50%, transparent);
    --surface-nav: color-mix(in srgb, var(--theme-light-card) 72%, transparent);
    --surface-nav-strong: color-mix(in srgb, var(--theme-light-card) 96%, transparent);
    --surface-nav-floating: color-mix(in srgb, var(--theme-light-card) 88%, transparent);
    /* Desktop primary navigation is the third branded surface. These aliases
       follow the selected club's banner tokens, including runtime catalog clubs. */
    --surface-product-nav-a: var(--brand-header-a);
    --surface-product-nav-b: var(--brand-header-b);
    --surface-product-nav-c: var(--brand-header-c);
    --surface-product-nav-text: #fffdf3;
    --surface-product-nav-text-muted: #c6c3b8;
    --surface-product-nav-active: #f3f1e8;
    --surface-product-nav-active-hover: #fffdf3;
    --surface-product-nav-active-text: #22241f;
    --surface-product-nav-focus: #f2cf7a;
    --surface-product-nav-border: rgba(255, 253, 243, 0.16);
    --surface-product-nav-line: rgba(255, 253, 243, 0.10);
    --surface-product-nav-divider: rgba(255, 253, 243, 0.08);
    --surface-product-nav-hover: rgba(255, 253, 243, 0.08);
    --surface-product-nav-pressed: rgba(255, 253, 243, 0.14);
    --shadow-product-nav-floating: 0 8px 24px rgba(34, 36, 31, 0.22);
    --radius-control: 6px;
    --radius-card: 8px;
    --radius-modal: 12px;
    --target-min: 44px;
    --motion: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
    /* Canonical geometry and typography for reusable component families. */
    --component-action-height: var(--target-min);
    --component-action-padding: 10px 14px;
    --component-action-font-size: 0.8rem;
    --component-action-font-weight: 700;
    --component-action-line-height: 1.2;
    --component-field-height: var(--target-min);
    --component-field-padding: 9px 12px;
    --component-field-font-size: 0.78rem;
    --component-field-font-weight: 500;
    --component-field-line-height: 1.3;
}

:root[data-theme="palmeiras"] {
    --brand-950: #043522;
    --brand-900: #06412b;
    --brand-800: #075c3b;
    --brand-700: #0a7a4a;
    --brand-100: #e7f1e9;
    --brand-header-a: #043522;
    --brand-header-b: #064e31;
    --brand-header-c: #113726;
    --brand-hero-a: #064e31;
    --brand-hero-b: #0a6a42;
    --brand-hero-c: #10261c;

    --theme-dark-brand: #65d996;
    --theme-dark-brand-strong: #06140f;
    --theme-dark-brand-bright: #7be5a7;
    --theme-dark-brand-soft: #10251a;
}

:root[data-theme="corinthians"] {
    --brand-950: #050505;
    --brand-900: #0d0d0d;
    --brand-800: #1a1a1a;
    --brand-700: #343434;
    --brand-100: #e8e8e8;
    --brand-header-a: #050505;
    --brand-header-b: #101010;
    --brand-header-c: #0a0a0a;
    --brand-hero-a: #101010;
    --brand-hero-b: #202020;
    --brand-hero-c: #080808;

    --theme-dark-brand: #f0f0f0;
    --theme-dark-brand-strong: #050505;
    --theme-dark-brand-bright: #ffffff;
    --theme-dark-brand-soft: #242424;
}

:root[data-theme="sao-paulo"] {
    --brand-950: #4a0509;
    --brand-900: #710a10;
    --brand-800: #a50f1b;
    --brand-700: #e30613;
    --brand-100: #fce8e9;
    --brand-header-a: #4a0509;
    --brand-header-b: #a50f1b;
    --brand-header-c: #171717;
    --brand-hero-a: #710a10;
    --brand-hero-b: #d71920;
    --brand-hero-c: #171717;

    --theme-dark-brand: #ff737a;
    --theme-dark-brand-strong: #2a0205;
    --theme-dark-brand-bright: #ff9aa0;
    --theme-dark-brand-soft: #321013;
}

:root.dark,
body.dark {
    color-scheme: dark;
    --control-accent: #d8d5ca;
    --control-accent-strong: #c6c3b8;
    --control-accent-bright: #f2efe6;
    --control-accent-soft: var(--theme-dark-soft);
    --control-action-bg: #d8d5ca;
    --control-action-bg-hover: #c6c3b8;
    --control-action-text: #242520;
    --control-neutral-bg: #292b26;
    --control-neutral-bg-hover: #343730;
    --control-neutral-bg-pressed: #3e4139;
    --control-neutral-border: #5b5e55;
    --control-neutral-border-strong: #74776e;
    --control-neutral-text: #f2efe6;
    --control-neutral-text-secondary: #d8d5ca;
    --control-neutral-selected-bg: #e5e2d9;
    --control-neutral-selected-bg-hover: #f2efe6;
    --control-neutral-selected-text: #171815;
    --control-neutral-disabled-bg: #20221e;
    --control-neutral-disabled-border: #4a4c45;
    --control-neutral-disabled-text: #a7a49b;
    --control-neutral-focus: #e0bb74;
    --brand: var(--control-accent);
    --brand-strong: var(--control-accent-strong);
    --brand-depth: var(--control-accent-strong);
    --brand-bright: var(--control-accent-bright);
    --brand-soft: var(--control-accent-soft);
    --action-bg: var(--control-action-bg);
    --action-bg-hover: var(--control-action-bg-hover);
    --action-text: var(--control-action-text);
    --ink: var(--theme-dark-ink);
    --text: var(--theme-dark-text);
    --text-secondary: var(--theme-dark-text-secondary);
    --text-muted: var(--theme-dark-text-muted);
    --bg: var(--theme-dark-bg);
    --bg-card: var(--theme-dark-card);
    --bg-soft: var(--theme-dark-soft);
    --mist: var(--theme-dark-bg);
    --ivory: var(--theme-dark-text);
    --line: var(--theme-dark-line);
    --line-strong: var(--theme-dark-line-strong);
    --toast-success-surface: #262822;
    --toast-success-text: #f6f2e7;
    --toast-success-border: #4a4d45;
    --toast-success-icon: #67d39a;
    --toast-success-icon-text: #fffdf3;
    --toast-muted-text: #b9b6ab;
    --toast-action-surface: #f2efe6;
    --toast-action-text: #1d1f1b;
    --toast-warning-accent: #e0bb74;
    --toast-error-accent: #ee6b63;
    --toast-shadow: 0 20px 48px rgba(8, 9, 7, 0.42), 0 3px 12px rgba(8, 9, 7, 0.3);
    --gold: #d9ac55;
    --gold-strong: #e0bb74;
    --focus: #e0bb74;
    --blue: #6aa7dc;
    --red: #ee6b63;
    --violet: #d78bb0;
    --draw: #9ba79e;
    --shadow: 0 14px 32px rgba(19, 20, 16, 0.28);
    --shadow-tight: 0 4px 14px rgba(19, 20, 16, 0.22);
    --shadow-modal: 0 24px 64px rgba(19, 20, 16, 0.42);
    --surface-nav: color-mix(in srgb, var(--theme-dark-card) 78%, transparent);
    --surface-nav-strong: color-mix(in srgb, var(--theme-dark-card) 96%, transparent);
    --surface-nav-floating: color-mix(in srgb, var(--theme-dark-card) 86%, transparent);
}
}