/* ==========================================================================
   Footballer Plus LMS — Design Tokens
   Values taken from "Footballer Plus - Brand Style Guide.pdf" (2026-2028)
   ========================================================================== */

:root {
  /* --- Brand: Primary ---------------------------------------------------- */
  --fp-red: #C80000;          /* Bright Red — main accent */
  --fp-red-hi: #E51414;       /* hover / active lift */
  --fp-red-lo: #A00000;       /* pressed */

  /* --- Brand: Secondary -------------------------------------------------- */
  --fp-near-black: #171717;
  --fp-charcoal: #373737;
  --fp-chrome: #C8C8CB;
  --fp-white: #FFFFFF;

  /* --- Brand: Tertiary --------------------------------------------------- */
  --fp-deep-wine: #3D0000;
  --fp-dark-maroon: #620000;
  --fp-brick-red: #9E2A2A;
  --fp-soft-pink: #FFA7A7;
  --fp-pink-tint: #FFD0D0;

  /* --- Brand: Grayscale -------------------------------------------------- */
  --n-100: #EEEEEF;
  --n-200: #E0E0E2;
  --n-300: #C8C8CB;
  --n-400: #9A9A9E;
  --n-500: #6F6F74;
  --n-600: #4F4F53;
  --n-700: #373737;
  --n-800: #262626;
  --n-900: #171717;

  /* --- Applied surfaces (dark UI) ---------------------------------------- */
  --bg: #0D0D0E;
  --surface: #141415;
  --surface-2: #1A1A1C;
  --surface-3: #212123;
  --surface-4: #2A2A2D;
  --border: #2B2B2E;
  --border-hi: #3A3A3E;

  /* --- Text -------------------------------------------------------------- */
  --text: #FFFFFF;
  --text-2: #A8A8AD;
  --text-3: #74747A;
  --text-on-red: #FFFFFF;

  /* --- Semantic ---------------------------------------------------------- */
  --ok: #2FBF71;
  --ok-bg: rgba(47, 191, 113, 0.13);
  --warn: #E8A33D;
  --warn-bg: rgba(232, 163, 61, 0.13);
  --danger: var(--fp-red);
  --danger-bg: rgba(200, 0, 0, 0.15);
  --info: #4A9EE8;
  --info-bg: rgba(74, 158, 232, 0.13);
  --red-bg: rgba(200, 0, 0, 0.12);
  --red-bg-hi: rgba(200, 0, 0, 0.2);

  /* --- Type -------------------------------------------------------------- */
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* --- Geometry ---------------------------------------------------------- */
  /* Brand reads angular/gritty — keep radii tight. */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --sidebar-w: 244px;
  --topbar-h: 60px;

  /* --- Elevation --------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sh-3: 0 16px 44px rgba(0, 0, 0, 0.55);
  --sh-red: 0 4px 18px rgba(200, 0, 0, 0.35);

  /* --- Motion ------------------------------------------------------------ */
  --t-fast: 110ms ease;
  --t: 170ms cubic-bezier(0.4, 0, 0.2, 1);
}