/*
 * Design Tokens – Luxmanager
 *
 * Single source of truth for every colour, radius, shadow, and spacing scale
 * used in the app. Themes override these custom properties at the :root level
 * Light palette: `[data-theme="light"]` on `<html>` (see UI_LIGHT_DARK_THEME_PLAN.md).
 *
 * Naming:  --lm-<category>-<role>[-variant]
 *   bg-*       page / surface backgrounds
 *   border-*   stroke colours
 *   text-*     foreground / type colours
 *   accent-*   brand & interactive colours
 *   state-*    semantic feedback colours (success, danger, warning, info)
 *   shadow-*   box-shadow values
 *   radius-*   border-radius values
 *
 * Tailwind reads these via theme extension in layout_start.php <script>.
 * Templates use semantic utility names (e.g. bg-surface, text-muted) instead
 * of arbitrary hex values, so a theme swap only touches CSS variables.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   DEFAULT THEME  (dark-green – "Luxmanager Classic")
   Applied via :root; overridden per-theme on <html data-theme="...">.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds ────────────────────────────────────────────────────── */
  --lm-bg:                  #102216;   /* page body                       */
  --lm-surface:             #142218;   /* cards, modals, dropdowns         */
  --lm-surface-input:       #1c271f;   /* inputs, interactive cards        */
  --lm-surface-raised:      rgba(255,255,255, 0.05);   /* subtle card bg  */
  --lm-surface-overlay:     rgba(255,255,255, 0.03);   /* ultra-subtle bg */
  --lm-surface-thead:       rgba(255,255,255, 0.04);   /* table headers   */
  --lm-surface-hover:       rgba(255,255,255, 0.06);   /* hover states    */
  --lm-surface-hover-strong: rgba(255,255,255, 0.08);  /* strong hover    */
  --lm-surface-active:      rgba(255,255,255, 0.10);   /* active/pressed  */
  --lm-surface-highlight:   #2a3d32;   /* table row highlight              */
  --lm-surface-deep:        #0f1612;   /* deepest bg (admin, code blocks)  */
  --lm-backdrop:            rgba(0,0,0, 0.70);         /* modal backdrop   */

  /* ── Borders ────────────────────────────────────────────────────────── */
  --lm-border:              #3b5443;   /* primary borders                  */
  --lm-border-subtle:       #2f4338;   /* inner / secondary borders        */

  /* ── Text ───────────────────────────────────────────────────────────── */
  --lm-text:                #ffffff;   /* primary text                     */
  --lm-text-secondary:      #c5d4cc;   /* descriptions, secondary values   */
  --lm-text-muted:          #9db9a6;   /* labels, hints                    */
  --lm-text-faint:          #7a9088;   /* very muted annotations           */
  --lm-text-placeholder:    #6d8278;   /* input placeholders               */
  --lm-text-icon:           #b8ccc0;   /* default icon fill                */
  --lm-text-dot:            #5c6f66;   /* separator dots                   */
  --lm-text-disabled:       #8a9f96;   /* disabled / extra muted           */
  --lm-text-code:           #c8e6d0;   /* pre/code block text              */

  /* ── Accent / Brand ─────────────────────────────────────────────────── */
  --lm-accent:              #13ec5b;   /* primary accent                   */
  --lm-accent-hover:        #1aff6a;   /* accent interactive hover         */
  --lm-accent-bg:           rgba(19,236,91, 0.15);  /* accent tinted bg   */
  --lm-accent-bg-hover:     rgba(19,236,91, 0.25);  /* accent bg hover    */
  --lm-accent-ring:         rgba(19,236,91, 0.50);  /* focus ring          */
  --lm-accent-muted:        rgba(19,236,91, 0.80);  /* slightly dimmed     */
  --lm-accent-bg-weak:      rgba(19,236,91, 0.10);  /* very light tint     */
  --lm-accent-border:       rgba(19,236,91, 0.35);  /* accent-tinted border*/
  --lm-on-accent:           #102216;   /* label on solid bg-primary / emerald CTA */

  /* ── Action (click affordances — cyan, distinct from brand green) ─── */
  --lm-action:              #67e8f9;
  --lm-action-hover:        #a5f3fc;
  --lm-action-ring:         rgba(103, 232, 249, 0.50);
  --lm-action-muted:        rgba(103, 232, 249, 0.80);
  --lm-action-border:       rgba(103, 232, 249, 0.35);
  --lm-action-bg-weak:      rgba(103, 232, 249, 0.10);
  --lm-link:                var(--lm-action);
  --lm-link-hover:          var(--lm-action-hover);
  --lm-interactive-border:  var(--lm-action-border);
  --lm-interactive-border-hover: var(--lm-action-muted);

  /* ── State colours ──────────────────────────────────────────────────── */
  --lm-danger:              #fca5a5;   /* text-red-300 equivalent          */
  --lm-danger-strong:       #ef4444;   /* text-red-500                     */
  --lm-danger-bg:           rgba(239,68,68, 0.10);
  --lm-danger-border:       rgba(239,68,68, 0.30);
  --lm-injury-mark-tile:    #b91c1c;
  --lm-injury-mark-disc:    #ffffff;
  --lm-card-mark-yellow:    #facc15;
  --lm-card-mark-red:       #dc2626;
  --lm-warning:             #fbbf24;   /* amber/yellow                     */
  --lm-warning-text:        #fde68a;   /* amber-200 text                   */
  --lm-warning-bg:          rgba(245,158,11, 0.10);
  --lm-warning-border:      rgba(245,158,11, 0.40);
  --lm-success:             #059669;   /* emerald-600                      */
  --lm-success-text:        #6ee7b7;   /* emerald-300                      */
  --lm-success-bg:          rgba(16,185,129, 0.12);
  --lm-success-border:      rgba(16,185,129, 0.40);
  --lm-info:                #2563eb;   /* blue-600                         */

  /* yellow for bench indicators */
  --lm-bench:               #facc15;   /* yellow-400                       */
  --lm-bench-bg:            rgba(234,179,8, 0.15);

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --lm-shadow-sm:           0 1px 2px rgba(0,0,0,0.3);
  --lm-shadow-md:           0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --lm-shadow-xl:           0 20px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4);
  --lm-shadow-2xl:          0 25px 50px -12px rgba(0,0,0,0.6);

  /* ── News-Feed-Kacheln (news.php, Dashboard Liga-News + Transfer-News) ─ */
  --lm-news-feed-row-pad-y-compact:       0.75rem;  /* py-3 */
  --lm-news-feed-row-pad-x-compact:       1.25rem;  /* px-5 */
  --lm-news-feed-row-pad-x-compact-sm:    1.5rem;   /* sm:px-6 */
  --lm-news-feed-row-pad-y:               1rem;     /* py-4 */
  --lm-news-feed-row-pad-x:               1.5rem;   /* px-6 */
  --lm-news-feed-row-pad-x-sm:            1.75rem;  /* sm:px-7 */

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --lm-radius-sm:           0.5rem;    /* 8px  – buttons, inputs          */
  --lm-radius-md:           0.75rem;   /* 12px – cards                    */
  --lm-radius-lg:           1rem;      /* 16px – sections                 */
  --lm-radius-xl:           1.5rem;    /* 24px – modals                   */
  --lm-radius-full:         9999px;    /* pills, avatars                  */

  /* ── Typography scale (reference, Tailwind handles via font-size) ─── */
  --lm-font-family:         'Lexend', sans-serif;

  /* Auth pages (index / forgot / reset) — panel over hero image */
  --lm-auth-panel-bg:       rgba(16, 34, 22, 0.60);
  --lm-auth-field-bg:       rgba(0, 0, 0, 0.20);

  /* dashboard.php — „Nächstes Spiel“ crest / logo panel (left column) */
  --lm-dash-next-crest-1:   #0f1a14;
  --lm-dash-next-crest-2:   #1c271f;
  --lm-dash-next-crest-3:   #143924;
  --lm-dash-next-crest-logo-opacity: 0.22;
  --lm-dash-next-crest-scrim-1: rgba(0, 0, 0, 0.50);
  --lm-dash-next-crest-scrim-2: rgba(0, 0, 0, 0.20);
  --lm-dash-next-crest-scrim-3: rgba(0, 0, 0, 0.35);
  --lm-dash-next-emblem-bg: rgba(0, 0, 0, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME  (manager preference — `data-theme="light"` on <html>)
   Layering: page (--lm-bg) slightly darker sage; cards (--lm-surface-raised)
   lighter/tinted — avoid #fff on #f6f8f6 (too flat). Dark theme uses white rgba overlays.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --lm-bg:                  #d4ddd7;   /* page canvas — clearly not white        */
  --lm-surface:             #f2f6f3;   /* sheets, dropdowns, modals            */
  --lm-surface-input:       #e6ede9;   /* inputs, filters                      */
  --lm-surface-raised:      #fafcf9;   /* KPI tiles, list rows (solid, lifted) */
  --lm-surface-overlay:     #e8efeb;
  --lm-surface-thead:       #e2eae5;
  --lm-surface-hover:       #e4ebe6;
  --lm-surface-hover-strong: #d8e3dc;
  --lm-surface-active:      #cfd9d3;
  --lm-surface-highlight:   #dae4de;   /* table row highlight                  */
  --lm-surface-deep:        #c8d4cd;   /* code blocks, nested admin strips     */
  --lm-backdrop:            rgba(0, 0, 0, 0.45);

  --lm-border:              #b5c5bb;
  --lm-border-subtle:       #c8d6cc;

  --lm-text:                #102216;
  --lm-text-secondary:      #2a3d32;
  --lm-text-muted:          #4a6356;
  --lm-text-faint:          #6d8278;
  --lm-text-placeholder:    #8a9f96;
  --lm-text-icon:           #3b5443;
  --lm-text-dot:            #9db9a6;
  --lm-text-disabled:       #8a9f96;
  --lm-text-code:           #1a3324;

  --lm-accent:              #0d9e42;
  --lm-accent-hover:        #0bb84c;
  --lm-accent-bg:           rgba(13, 158, 66, 0.12);
  --lm-accent-bg-hover:     rgba(13, 158, 66, 0.20);
  --lm-accent-ring:         rgba(13, 158, 66, 0.45);
  --lm-accent-muted:        rgba(13, 158, 66, 0.75);
  --lm-accent-bg-weak:      rgba(13, 158, 66, 0.08);
  --lm-accent-border:       rgba(13, 158, 66, 0.30);

  --lm-on-accent:           #ffffff;   /* label on solid bg-primary / emerald CTA */

  --lm-action:              #0e7490;
  --lm-action-hover:        #0891b2;
  --lm-action-ring:         rgba(14, 116, 144, 0.45);
  --lm-action-muted:        rgba(14, 116, 144, 0.75);
  --lm-action-border:       rgba(14, 116, 144, 0.35);
  --lm-action-bg-weak:      rgba(14, 116, 144, 0.08);

  --lm-danger:              #b91c1c;
  --lm-danger-strong:       #dc2626;
  --lm-danger-bg:           rgba(220, 38, 38, 0.08);
  --lm-danger-border:       rgba(220, 38, 38, 0.25);

  /* Warntext / Rang „unverändert“ — orange-700, lesbar auf hellen Flächen */
  --lm-warning-text:        #c2410c;
  --lm-warning-bg:          rgba(245, 158, 11, 0.12);
  --lm-warning-border:      rgba(245, 158, 11, 0.35);

  /* Bench / Bank — darker amber on light surfaces (yellow-400 was too pale) */
  --lm-bench:               #92400e;
  --lm-bench-bg:            rgba(180, 83, 9, 0.14);

  --lm-success-text:        #047857;
  --lm-success-bg:          rgba(16, 185, 129, 0.10);
  --lm-success-border:      rgba(16, 185, 129, 0.35);

  --lm-shadow-sm:           0 1px 2px rgba(16, 34, 22, 0.07);
  --lm-shadow-md:           0 2px 8px rgba(16, 34, 22, 0.08), 0 1px 2px rgba(16, 34, 22, 0.05);
  --lm-shadow-xl:           0 12px 28px rgba(16, 34, 22, 0.12), 0 4px 10px rgba(16, 34, 22, 0.06);
  --lm-shadow-2xl:          0 20px 40px rgba(16, 34, 22, 0.14);

  --lm-auth-panel-bg:       rgba(250, 252, 249, 0.92);
  --lm-auth-field-bg:       rgba(0, 0, 0, 0.05);

  --lm-dash-next-crest-1:   #dce8e0;
  --lm-dash-next-crest-2:   #d0e0d6;
  --lm-dash-next-crest-3:   #c5d9ce;
  --lm-dash-next-crest-logo-opacity: 0.55;
  /* Light scrim — heavy white wash made the cyan SVG disappear */
  --lm-dash-next-crest-scrim-1: rgba(255, 255, 255, 0.18);
  --lm-dash-next-crest-scrim-2: rgba(255, 255, 255, 0.06);
  --lm-dash-next-crest-scrim-3: rgba(255, 255, 255, 0.12);
  --lm-dash-next-emblem-bg: rgba(250, 252, 249, 0.92);
}
