/* --- tokens/fonts.css --- */
/* One App Football — webfonts. Guton = core/UI. Navine = display/impact (single cut: SemiCondensed Black Italic). */
@font-face{font-family:"Guton";src:url("assets/fonts/Guton-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Guton";src:url("assets/fonts/Guton-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Guton";src:url("assets/fonts/Guton-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Guton";src:url("assets/fonts/Guton-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Guton";src:url("assets/fonts/Guton-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Guton";src:url("assets/fonts/Guton-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Navine";src:url("assets/fonts/Navine-SemCondBlackIta.ttf") format("truetype");font-weight:900;font-style:italic;font-display:swap}

/* --- tokens/colors.css --- */
/* Palette source: uploads/1AF-Logo Paleta de Color.pdf (exact brand hexes marked BRAND). Ramp steps are derived tints/shades. */
:root{
  /* Green — action, energy, "live" */
  --green-50:#e9fde9; --green-100:#c9f9c4; --green-200:#9df57f; --green-300:#6deb47; /* BRAND */
  --green-400:#2ae61a; --green-500:#00e000; /* BRAND */ --green-600:#00b800; --green-700:#008c07; --green-800:#01650c; --green-900:#04400c;

  /* Navy — brand ground, structure, text */
  --navy-50:#eef4fb; --navy-100:#d7e5f4; --navy-200:#aac9e8; --navy-300:#6ea3d6; --navy-400:#3579c2;
  --navy-500:#12579f; --navy-600:#064782; --navy-700:#00346c; /* BRAND */ --navy-800:#002853; --navy-900:#001a38;

  /* Orange — highlight, alerts, competition */
  --orange-50:#fff2ec; --orange-100:#ffc5b2; /* BRAND */ --orange-200:#ffa385; --orange-300:#ff6d33; /* BRAND */
  --orange-400:#f75000; /* BRAND */ --orange-500:#dc4700; --orange-600:#b83b00; --orange-700:#8d2d00;

  /* Neutrals */
  --white:#ffffff; /* BRAND */
  --neutral-50:#f7f7f7; --neutral-100:#ececec; /* BRAND */ --neutral-200:#d0d0d0; /* BRAND */
  --neutral-300:#b4b4b4; --neutral-400:#8e8e8e; --neutral-500:#6b6b6b; --neutral-600:#4a4a4a;
  --neutral-700:#333333; --neutral-800:#1f1f1f; --neutral-900:#121212;

  /* ---- Semantic aliases ---- */
  --color-brand:var(--navy-700);
  --color-brand-deep:var(--navy-900);
  --color-accent:var(--green-500);
  --color-energy:var(--orange-400);

  --text-primary:var(--navy-900);
  --text-secondary:var(--neutral-600);
  --text-muted:var(--neutral-400);
  --text-inverse:var(--white);
  --text-on-brand:var(--white);
  --text-accent:var(--green-700);
  --text-link:var(--navy-600);
  --text-link-hover:var(--green-700);

  --surface-page:var(--neutral-50);
  --surface-card:var(--white);
  --surface-sunken:var(--neutral-100);
  --surface-brand:var(--navy-700);
  --surface-brand-deep:var(--navy-900);
  --surface-accent:var(--green-500);
  --surface-accent-soft:var(--green-50);
  --surface-energy:var(--orange-400);
  --surface-energy-soft:var(--orange-50);
  --surface-overlay:rgba(0,26,56,.62);

  --border-subtle:var(--neutral-100);
  --border-default:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --border-brand:var(--navy-700);
  --border-accent:var(--green-500);

  --state-success:var(--green-600); --state-success-soft:var(--green-50);
  --state-warning:var(--orange-300); --state-warning-soft:var(--orange-50);
  --state-danger:var(--orange-600);  --state-danger-soft:var(--orange-50);
  --state-info:var(--navy-500);      --state-info-soft:var(--navy-50);
  --state-live:var(--green-500);

  --focus-ring:0 0 0 3px rgba(0,224,0,.45);
}
/* Dark ground: the brand's navy panels. Scope with [data-theme="navy"]. */
[data-theme="navy"]{
  --text-primary:var(--white);
  --text-secondary:var(--navy-200);
  --text-muted:var(--navy-300);
  --surface-page:var(--navy-900);
  --surface-card:var(--navy-700);
  --surface-sunken:var(--navy-800);
  --border-subtle:rgba(255,255,255,.10);
  --border-default:rgba(255,255,255,.18);
  --border-strong:rgba(255,255,255,.30);
  --text-link:var(--green-300);
  --text-link-hover:var(--green-500);
}

/* --- tokens/typography.css --- */
:root{
  --font-display:"Navine","Guton",system-ui,sans-serif;  /* uppercase, italic, impact only */
  --font-core:"Guton",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:var(--font-core);
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; /* stats tables, scores */

  --fw-regular:400;/* @kind font */ --fw-medium:500;/* @kind font */ --fw-semibold:600;/* @kind font */ --fw-bold:700;/* @kind font */ --fw-extrabold:800;/* @kind font */ --fw-black:900;/* @kind font */

  --fs-display-xl:72px; --fs-display-lg:56px; --fs-display-md:40px; --fs-display-sm:30px;
  --fs-h1:34px; --fs-h2:26px; --fs-h3:20px; --fs-h4:17px;
  --fs-body-lg:17px; --fs-body:15px; --fs-body-sm:13px; --fs-caption:12px; --fs-micro:11px;

  --lh-tight:0.94;/* @kind other */ --lh-snug:1.15;/* @kind other */ --lh-heading:1.2;/* @kind other */ --lh-body:1.5;/* @kind other */ --lh-relaxed:1.65;/* @kind other */

  --ls-display:-0.01em;/* @kind other */ --ls-heading:-0.005em;/* @kind other */ --ls-body:0;/* @kind other */ --ls-label:0.04em;/* @kind other */ --ls-eyebrow:0.12em;/* @kind other */

  --text-display-xl:var(--fw-black) var(--fs-display-xl)/var(--lh-tight) var(--font-display);
  --text-display-lg:var(--fw-black) var(--fs-display-lg)/var(--lh-tight) var(--font-display);
  --text-display-md:var(--fw-black) var(--fs-display-md)/var(--lh-snug) var(--font-display);
  --text-h1:var(--fw-extrabold) var(--fs-h1)/var(--lh-heading) var(--font-core);
  --text-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-core);
  --text-h3:var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-core);
  --text-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-core);
  --text-label:var(--fw-semibold) var(--fs-body-sm)/1.3 var(--font-core);
  --text-eyebrow:var(--fw-bold) var(--fs-micro)/1.2 var(--font-core);
}

/* --- tokens/spacing.css --- */
:root{
  --space-0:0px; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; --space-11:80px; --space-12:112px;

  --gutter-mobile:16px; --gutter-tablet:24px; --gutter-desktop:32px;
  --container-max:1200px; --container-narrow:760px;
  --card-pad:16px; --card-pad-lg:24px; --section-gap:32px;
  --control-h-sm:32px; --control-h-md:40px; --control-h-lg:48px; --tap-min:44px;
}

/* --- tokens/radius.css --- */
:root{
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-2xl:28px;
  --radius-pill:999px; --radius-circle:50%;
  --radius-card:var(--radius-lg);
  --radius-control:var(--radius-pill);
  --radius-sheet:var(--radius-2xl);
  /* Brand shield silhouette — the palette swatches and app avatars use it */
  --shape-shield:polygon(0% 0%,100% 0%,100% 68%,50% 100%,0% 68%);/* @kind other */
}

/* --- tokens/elevation.css --- */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(0,26,56,.08);
  --shadow-sm:0 2px 6px rgba(0,26,56,.08);
  --shadow-md:0 6px 18px rgba(0,26,56,.10);
  --shadow-lg:0 14px 34px rgba(0,26,56,.14);
  --shadow-nav:0 -2px 14px rgba(0,26,56,.10);
  --shadow-accent:0 6px 18px rgba(0,224,0,.28);
  --shadow-inset-press:inset 0 2px 4px rgba(0,26,56,.14);
  --blur-glass:saturate(150%) blur(14px);/* @kind other */
  --scrim-bottom:linear-gradient(180deg,rgba(0,26,56,0) 0%,rgba(0,26,56,.78) 100%);/* @kind other */
  --scrim-top:linear-gradient(180deg,rgba(0,26,56,.70) 0%,rgba(0,26,56,0) 100%);/* @kind other */
}

/* --- tokens/motion.css --- */
:root{
  --ease-standard:cubic-bezier(.2,0,0,1);/* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1);/* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */
  --dur-instant:80ms;/* @kind other */ --dur-fast:140ms;/* @kind other */ --dur-base:220ms;/* @kind other */ --dur-slow:360ms;/* @kind other */ --dur-slower:600ms;/* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);/* @kind other */
  --press-scale:0.97;/* @kind other */
}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--text-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none;font-weight:var(--fw-semibold);transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
[data-oaf-icon]>svg{width:100%;height:100%;display:block}