/* ============================================================
   BACK9OPS — CANONICAL DESIGN TOKENS  (tokens.css)
   Single source of truth for ALL design decisions.

   LOAD ORDER (App.razor):
     1. tokens.css          ← this file
     2. components.css      ← component classes
     3. app.css             ← Bootstrap overrides
     4. GolfTournament.Web.styles.css  ← Blazor scoped

   RULE: Never hardcode colors, spacing, or radii anywhere.
         Always reference a token from this file.
   ============================================================ */

:root {

  /* ───────────────────────────────────────────────────────────
     BACKGROUNDS
     Depth scale: app (deepest) → sidebar → surface → elevated
     Use the correct level for each surface.
  ─────────────────────────────────────────────────────────── */
  --bg-app:          #020617;   /* page background / deepest */
  --bg-sidebar:      #0B1220;   /* sidebar (always dark)     */
  --bg-surface:      #0F172A;   /* cards, panels             */
  --bg-elevated:     #111827;   /* table headers, sub-panels */
  --bg-raised:       #1E293B;   /* popovers, tooltips        */

  /* ───────────────────────────────────────────────────────────
     TEXT
  ─────────────────────────────────────────────────────────── */
   --text-primary:    #F3F6FB;   /* body copy, headings       */
   --text-secondary:  #C2CFDF;   /* supporting labels         */
   --text-muted:      #9FB0C4;   /* placeholders, meta        */
   --text-helper:     #B3C0D2;   /* helper/instructional copy */

  /* ───────────────────────────────────────────────────────────
     BORDERS
  ─────────────────────────────────────────────────────────── */
  --border-subtle:   rgba(255,255,255,0.06);   /* default card edge     */
  --border-default:  rgba(255,255,255,0.10);   /* inputs, dividers      */
  --border-strong:   rgba(255,255,255,0.18);   /* focused / hover edges */

  /* ───────────────────────────────────────────────────────────
     BRAND (Blue)
  ─────────────────────────────────────────────────────────── */
  --brand:           #1D4ED8;
  --brand-hover:     #2563EB;
  --brand-active:    #1E40AF;
  --brand-soft:      rgba(29,78,216,0.15);
  --brand-ring:      rgba(29,78,216,0.30);
  --brand-text:      #93C5FD;   /* readable brand on dark    */

  /* ───────────────────────────────────────────────────────────
     STATUS COLORS
  ─────────────────────────────────────────────────────────── */
  --success:         #22C55E;
  --success-soft:    rgba(34,197,94,0.14);
  --success-text:    #86EFAC;

  --warning:         #F59E0B;
  --warning-soft:    rgba(245,158,11,0.14);
  --warning-text:    #FCD34D;

  --danger:          #EF4444;
  --danger-soft:     rgba(239,68,68,0.14);
  --danger-text:     #FCA5A5;

  --info:            #38BDF8;
  --info-soft:       rgba(56,189,248,0.12);
  --info-text:       #7DD3FC;

  /* Accent green (golf-specific) */
  --green:           #22C55E;
  --green-soft:      rgba(34,197,94,0.14);
  --green-text:      #86EFAC;

  /* ───────────────────────────────────────────────────────────
     BORDER RADIUS
  ─────────────────────────────────────────────────────────── */
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-full:     9999px;

  /* ───────────────────────────────────────────────────────────
     SPACING (4-point scale)
  ─────────────────────────────────────────────────────────── */
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-16:        64px;

  /* ───────────────────────────────────────────────────────────
     TRANSITIONS
  ─────────────────────────────────────────────────────────── */
  --transition-fast: 160ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ───────────────────────────────────────────────────────────
     SHADOWS
  ─────────────────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.10);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08);

  /* ───────────────────────────────────────────────────────────
     FOCUS RING (single canonical definition)
  ─────────────────────────────────────────────────────────── */
  --focus-ring:  0 0 0 3px var(--brand-ring);

  /* ───────────────────────────────────────────────────────────
     Z-INDEX SCALE
  ─────────────────────────────────────────────────────────── */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  200;
  --z-sticky:    400;
  --z-fixed:     600;
  --z-overlay:   800;
  --z-modal:     1000;
  --z-toast:     1200;

  /* ───────────────────────────────────────────────────────────
     TYPOGRAPHY
  ─────────────────────────────────────────────────────────── */
  --font-sans:   Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono:   "JetBrains Mono", "Fira Code", "Cascadia Code", monospace;
   --font-size-base: 1rem;
   --font-size-sm: 14px;
   --touch-target-min: 48px;
   --color-gray-400: #94A3B8;

  /* ───────────────────────────────────────────────────────────
     COMPONENT SIZE CONSTANTS
  ─────────────────────────────────────────────────────────── */
  --header-height:    56px;
  --sidebar-width:    250px;
  --content-max-w:    1280px;
  --form-max-w:       640px;

  /* ───────────────────────────────────────────────────────────
     BACKWARD-COMPAT ALIASES  (brand-tokens.css equivalents)
     These map the old b9-* naming onto the canonical tokens.
     Use the canonical names above in all new code.
  ─────────────────────────────────────────────────────────── */
  --b9-card-shadow:       var(--shadow-sm);
  --b9-card-shadow-md:    var(--shadow-md);
  --b9-card-shadow-hover: var(--shadow-lg);
  --b9-card-radius:       var(--radius-lg);
  --b9-focus-ring:        var(--focus-ring);
  --b9-font-sans:         var(--font-sans);
  --b9-font-mono:         var(--font-mono);
}

/* ============================================================
   DARK THEME  (explicit override — matches :root above)
   Declared so [data-theme="dark"] is always a valid selector
   even if :root is overridden by a parent scope.
   ============================================================ */
html[data-theme="dark"] {
  --bg-app:          #020617;
  --bg-sidebar:      #0B1220;
  --bg-surface:      #0F172A;
  --bg-elevated:     #111827;
  --bg-raised:       #1E293B;

   --text-primary:    #F3F6FB;
   --text-secondary:  #C2CFDF;
   --text-muted:      #9FB0C4;
   --text-helper:     #B3C0D2;

  --border-subtle:   rgba(255,255,255,0.06);
  --border-default:  rgba(255,255,255,0.10);
  --border-strong:   rgba(255,255,255,0.18);

  --brand:           #1D4ED8;
  --brand-hover:     #2563EB;
  --brand-active:    #1E40AF;
  --brand-soft:      rgba(29,78,216,0.15);
  --brand-ring:      rgba(29,78,216,0.30);
  --brand-text:      #93C5FD;

  --success:         #22C55E;
  --success-soft:    rgba(34,197,94,0.14);
  --success-text:    #86EFAC;

  --warning:         #F59E0B;
  --warning-soft:    rgba(245,158,11,0.14);
  --warning-text:    #FCD34D;

  --danger:          #EF4444;
  --danger-soft:     rgba(239,68,68,0.14);
  --danger-text:     #FCA5A5;

  --info:            #38BDF8;
  --info-soft:       rgba(56,189,248,0.12);
  --info-text:       #7DD3FC;

  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.07);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08);
}

/* ============================================================
   LIGHT THEME
   Only semantic tokens change. Non-color tokens (spacing, radius,
   transitions, z-index) are identical in both themes.

   Design decisions:
   - Sidebar stays dark (#1E293B) — legibility + identity.
   - Brand color identical — do not tint differently per theme.
   - Status soft backgrounds use lower opacity for light surfaces.
   - Shadows use black base with low opacity (natural on light).
   ============================================================ */
html[data-theme="light"] {
   --bg-app:          #F8F9FA;
  --bg-sidebar:      #1E293B;   /* intentionally dark */
  --bg-surface:      #FFFFFF;
  --bg-elevated:     #F1F5F9;
  --bg-raised:       #E2E8F0;

   --text-primary:    #1A1A1A;
  --text-secondary:  #475569;
  --text-muted:      #94A3B8;

  --border-subtle:   rgba(0,0,0,0.06);
  --border-default:  rgba(0,0,0,0.12);
  --border-strong:   rgba(0,0,0,0.20);

  --brand:           #1D4ED8;
  --brand-hover:     #1E40AF;
  --brand-active:    #1E3A8A;
  --brand-soft:      rgba(29,78,216,0.10);
  --brand-ring:      rgba(29,78,216,0.25);
  --brand-text:      #1D4ED8;

  --success:         #16A34A;
  --success-soft:    rgba(22,163,74,0.10);
  --success-text:    #15803D;

  --warning:         #D97706;
  --warning-soft:    rgba(217,119,6,0.10);
  --warning-text:    #B45309;

  --danger:          #DC2626;
  --danger-soft:     rgba(220,38,38,0.10);
  --danger-text:     #B91C1C;

  --info:            #0EA5E9;
  --info-soft:       rgba(14,165,233,0.10);
  --info-text:       #0369A1;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.07);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08);
  --shadow-xl:  0 20px 48px rgba(0,0,0,0.20), 0 0 0 1px rgba(0,0,0,0.06);
}

/* ============================================================
   LIGHT THEME — component-level overrides
   Items that need additional tuning beyond raw token swaps.
   ============================================================ */

/* Inputs: white fill on light, same border */
html[data-theme="light"] .ui-input,
html[data-theme="light"] .ui-select,
html[data-theme="light"] .ui-textarea {
  background: #FFFFFF;
  color: var(--text-primary);
  border-color: var(--border-default);
}

html[data-theme="light"] .ui-input:focus,
html[data-theme="light"] .ui-select:focus,
html[data-theme="light"] .ui-textarea:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

/* Placeholder text */
html[data-theme="light"] .ui-input::placeholder,
html[data-theme="light"] .ui-textarea::placeholder {
  color: var(--text-muted);
}

/* Form section header: slightly elevated */
html[data-theme="light"] .ui-form-section-header {
  background: var(--bg-elevated);
  border-bottom-color: var(--border-subtle);
}

/* Table rows */
html[data-theme="light"] .ui-table tbody tr:hover {
  background: var(--bg-elevated);
}

/* Nav items in sidebar stay dark-themed */
html[data-theme="light"] .ui-nav-item {
  color: #94A3B8;
}
html[data-theme="light"] .ui-nav-item:hover,
html[data-theme="light"] .ui-nav-item--active {
  color: #E5E7EB;
  background: rgba(255,255,255,0.08);
}