/*
 * 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
 * (see themes/*.css).
 *
 * 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*/

  /* ── 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;
}
