/* ============================================================
   Colors — Pasör
   Two product themes share one brand green:
   • Player app  → LIGHT (white surfaces, #4CAF50 primary)
   • Owner / Admin web panel → DARK (#0A0E1A bg, #00FF87 accent)
   Base palette first, semantic aliases below.
   ============================================================ */

:root {
  /* ---- Brand green ramp ---- */
  --green-300: #81C784;
  --green-400: #66BB6A;   /* gradient top, hover-light */
  --green-500: #4CAF50;   /* PRIMARY — CTA, active border, verified tick */
  --green-600: #43A047;
  --green-700: #388E3C;   /* hover / pressed */
  --green-800: #2E7D32;   /* deep — logo, CTA band */
  --green-900: #1B5E20;   /* deepest — logo mark, gradient band */
  --green-neon: #00FF87;  /* OWNER/ADMIN dark-theme accent */

  /* ---- Neutrals (Material grey) ---- */
  --ink-900: #212121;     /* primary text */
  --ink-700: #424242;
  --ink-600: #616161;
  --ink-500: #757575;     /* secondary text */
  --ink-400: #9E9E9E;     /* tertiary / hints */
  --ink-300: #BDBDBD;
  --line-300: #E0E0E0;    /* input borders, dividers */
  --line-200: #EEEEEE;
  --surface-200: #F1F3F4; /* card / chip grey */
  --surface-100: #F5F5F5; /* scaffold background */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Owner / Admin dark theme surfaces ---- */
  --dark-bg: #0A0E1A;        /* page background */
  --dark-surface: #1A1F2E;   /* card */
  --dark-surface-2: #232A3D; /* raised card / hover */
  --dark-line: #2C3548;      /* hairline on dark */
  --dark-text: #E8ECF3;      /* primary text on dark */
  --dark-text-dim: #8A93A6;  /* secondary text on dark */
  --cyan-500: #00D9FF;       /* dark-theme secondary accent */

  /* ---- Marketing / landing dark ---- */
  --navy-900: #0F1923;       /* hero / dark sections */
  --navy-950: #0A1219;       /* footer */

  /* ---- Semantic / functional ---- */
  --blue-500: #1976D2;       /* leagueBlue */
  --blue-400: #2196F3;       /* charts, info */
  --orange-500: #FF9800;     /* tournament */
  --gold-500: #FFC107;       /* captain */
  --gold-400: #FFD835;
  --purple-500: #9C27B0;     /* payout / finance accent */
  --red-500: #F44336;        /* error, like, team A */
  --red-600: #E53935;

  /* Story / MVP ring — Instagram-style warm gradient */
  --story-grad: linear-gradient(45deg, #FD1D1D, #F77737, #FFE45C); /* @kind color */

  /* ====================================================
     SEMANTIC ALIASES — use these in components
     ==================================================== */

  /* Light (player app) */
  --primary: var(--green-500);
  --primary-hover: var(--green-700);
  --primary-gradient: linear-gradient(135deg, var(--green-400), var(--green-500));
  --on-primary: var(--white);

  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);

  --bg-app: var(--white);
  --bg-scaffold: var(--surface-100);
  --surface-card: var(--white);
  --surface-sunken: var(--surface-200);
  --border: var(--line-300);
  --border-subtle: var(--line-200);

  --focus-ring: var(--green-500);
  --danger: var(--red-500);
  --warning: var(--orange-500);
  --info: var(--blue-500);

  /* Match / role accents */
  --accent-league: var(--blue-500);
  --accent-tournament: var(--orange-500);
  --accent-captain: var(--gold-500);
}

/* ====================================================
   OWNER / ADMIN dark theme scope.
   Wrap a panel in [data-theme="owner"] (or .theme-owner) to
   flip the semantic aliases to the dark dashboard palette.
   ==================================================== */
[data-theme="owner"],
.theme-owner {
  --primary: var(--green-neon);
  --primary-hover: #33ffa0;
  --primary-gradient: linear-gradient(135deg, var(--green-neon), #00C9A7);
  --on-primary: #04240F;

  --text-strong: var(--dark-text);
  --text-body: var(--dark-text);
  --text-muted: var(--dark-text-dim);
  --text-faint: #5C6478;

  --bg-app: var(--dark-bg);
  --bg-scaffold: var(--dark-bg);
  --surface-card: var(--dark-surface);
  --surface-sunken: var(--dark-surface-2);
  --border: var(--dark-line);
  --border-subtle: rgba(255, 255, 255, 0.06);

  --focus-ring: var(--green-neon);
  --info: var(--cyan-500);
}