/**
 * Racket365 - Sports Management Platform
 * Copyright (c) 2026 iGEN Service LLC. All rights reserved.
 *
 * This source code is proprietary and confidential.
 * Unauthorized copying, modification, or distribution is strictly prohibited.
 */
/* ─── RACKET365 DESIGN TOKENS ─────────────────────────────────────────────── */
/* Single source of truth for all design decisions.                            */

:root {
  /* ── Brand Palette ── */
  --clr-primary-50:  #ecfdf5;
  --clr-primary-100: #d1fae5;
  --clr-primary-200: #a7f3d0;
  --clr-primary-300: #6ee7b7;   /* was referenced by nav active state but never defined */
  --clr-primary-400: #34d399;
  --clr-primary-500: #10b981;
  --clr-primary-600: #059669;
  --clr-primary-700: #047857;
  --clr-primary-800: #065f46;
  --clr-primary-900: #064e3b;   /* button active/pressed — distinct from hover */

  --clr-navy-800: #1e293b;
  --clr-navy-900: #0f172a;
  --clr-navy-950: #080f1e;

  --clr-amber-400: #fbbf24;
  --clr-amber-500: #f59e0b;
  --clr-amber-600: #d97706;

  --clr-rose-400: #fb7185;
  --clr-rose-500: #ef4444;
  --clr-rose-600: #dc2626;
  --clr-rose-700: #b91c1c;

  /* Secondary brand color — blue, used for links (kept distinct from primary/CTA green) */
  --clr-blue-400: #60a5fa;
  --clr-blue-500: #3b82f6;
  --clr-blue-600: #2563eb;
  --clr-blue-700: #1d4ed8;

  /* ── Neutral Surfaces ── */
  --clr-white:    #ffffff;
  --clr-gray-50:  #f8fafc;
  --clr-gray-100: #f1f5f9;
  --clr-gray-200: #e2e8f0;
  --clr-gray-300: #cbd5e1;
  --clr-gray-400: #94a3b8;
  --clr-gray-500: #64748b;
  --clr-gray-600: #475569;
  --clr-gray-700: #334155;
  --clr-gray-800: #1e293b;
  --clr-gray-900: #0f172a;

  /* ── Semantic Aliases ── */
  --color-bg-base:      var(--clr-gray-50);   /* alias for older references */
  --color-bg:           var(--clr-gray-50);
  --color-bg-elevated:  var(--clr-white);
  --color-sidebar:      var(--clr-navy-900);
  --color-sidebar-hover:var(--clr-navy-800);
  --color-border:       var(--clr-gray-200);
  --color-border-focus: var(--clr-primary-600);
  --color-text:         var(--clr-gray-900);
  --color-text-muted:   var(--clr-gray-600);      /* was gray-500 (4.55:1 on card bg — too close to the 4.5:1 cutoff); gray-600 gives 7.2–7.6:1 */
  --color-text-inverse: var(--clr-white);
  --color-accent:       var(--clr-primary-600);   /* #059669 — sufficient contrast with white (3.8:1) on large elements */
  --color-accent-hover: var(--clr-primary-700);   /* #047857 — deeper on hover */
  /* Button-specific: primary-700 gives white text 5.5:1 contrast */
  --color-btn-primary:        var(--clr-primary-700);  /* #047857 */
  --color-btn-primary-hover:  var(--clr-primary-800);  /* #065f46 — 7.7:1 */
  --color-btn-primary-active: var(--clr-primary-900);  /* #064e3b — 9.7:1, distinct from hover */
  --color-btn-primary-text:   var(--clr-white);
  --color-danger:       var(--clr-rose-600);      /* #dc2626 — white text at 5.3:1 ✓ */
  --color-danger-hover: var(--clr-rose-700);      /* #b91c1c */
  --color-warning:      var(--clr-amber-500);
  --color-info:         var(--clr-blue-500);
  --color-success:      var(--clr-primary-600);

  /* Links — secondary blue, kept distinct from primary/CTA green */
  --color-link:         var(--clr-blue-600);      /* #2563eb — 4.9–5.2:1 */
  --color-link-hover:   var(--clr-blue-700);      /* #1d4ed8 — 6.4–6.7:1 */

  --color-table-zebra:  var(--clr-gray-50);       /* alternate row tint */

  /* ── Typography ── */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  --font-normal:  400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* ── Spacing (4px grid) ── */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-9:  2.25rem;  /* 36px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ── Animation ── */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  /* ── Layout ── */
  --sidebar-width:       240px;
  --sidebar-collapsed:   68px;
  --topbar-height:       60px;
  --content-max-width:   1280px;
  --card-border-radius:  var(--radius-lg);
}

/* Dark mode is intentionally not auto-enabled via prefers-color-scheme: the app is
   designed as Clean Light Mode end-to-end (buttons, links, tables, badges all assume
   a light canvas). A partial override here previously swapped only 5 base tokens,
   which broke contrast for OS-dark-mode visitors instead of fixing it. A real dark
   theme needs its own full token set, not a media-query patch. */