/* assets/css/tokens.css */
/* Design Tokens - PadelSystem Principal Engineer Mandate */

:root {
    /* ========================================
       BACKGROUNDS
       ======================================== */
    --ps-bg-main: #020617;
    /* slate-950 - Main page background */
    --ps-bg-panel: #0f172a;
    /* slate-900 - Panels, sections */
    --ps-bg-header: #1e293b;
    /* slate-800 - Headers, elevated surfaces */
    --ps-bg-navbar: #0f172a;
    /* slate-900 - Navigation bar */
    --ps-bg-card: #1e293b;
    /* slate-800 - Cards, containers */
    --ps-bg-card-hover: #334155;
    /* slate-700 - Card hover state */
    --ps-bg-hover: #334155;
    /* slate-700 - General hover background */
    --ps-bg-input: #0f172a;
    /* slate-900 - Form inputs */
    --ps-bg-disabled: #1e293b;
    /* slate-800 - Disabled elements */
    --ps-bg-empty-state: rgba(15, 23, 42, 0.5);
    /* Empty states, placeholders */
    --ps-bg-overlay: rgba(15, 23, 42, 0.95);
    /* Modal overlays */

    /* ========================================
       TEXT COLORS
       ======================================== */
    --ps-text-primary: #f1f5f9;
    /* slate-100 - Primary text */
    --ps-text-secondary: #cbd5e1;
    /* slate-300 - Secondary text */
    --ps-text-muted: #94a3b8;
    /* slate-400 - Muted, less important text */
    --ps-text-disabled: #64748b;
    /* slate-500 - Disabled text */
    --ps-text-inverse: #0f172a;
    /* slate-900 - Text on light backgrounds */
    --ps-text-bold: #ffffff;
    /* white - Bold, emphasized text */
    --ps-text-empty-state: #64748b;
    /* slate-500 - Empty state messages */
    --ps-text-navbar: #ffffff;
    /* white - Navbar text */

    /* ========================================
       BORDERS
       ======================================== */
    --ps-border-default: #334155;
    /* slate-700 - Default borders */
    --ps-border-strong: #475569;
    /* slate-600 - Emphasized borders */
    --ps-border-subtle: #1e293b;
    /* slate-800 - Subtle borders */
    --ps-border-accent: #3b82f6;
    /* blue-500 - Accent borders */
    --ps-border-dashed: #1e293b;
    /* slate-800 - Dashed borders */

    /* ========================================
       INTERACTIVE STATES
       ======================================== */
    --ps-hover-bg: rgba(255, 255, 255, 0.05);
    /* Hover overlay */
    --ps-active-bg: rgba(255, 255, 255, 0.1);
    /* Active/pressed state */
    --ps-focus-ring: #3b82f6;
    /* Focus ring color */
    --ps-focus-ring-offset: #0f172a;
    /* Focus ring offset */

    /* ========================================
       SEMANTIC COLORS
       ======================================== */
    --ps-accent-primary: #3b82f6;
    /* blue-500 - Primary actions */
    --ps-accent-secondary: #6366f1;
    /* indigo-500 - Secondary actions */
    --ps-accent-success: #22c55e;
    /* green-500 - Success states */
    --ps-accent-warning: #eab308;
    /* yellow-500 - Warning states */
    --ps-accent-error: #ef4444;
    /* red-500 - Error states */
    --ps-accent-info: #3b82f6;
    /* blue-500 - Info states */

    /* ========================================
       NAVBAR SPECIFIC
       ======================================== */
    --ps-navbar-bg: #0f172a;
    /* Navbar background */
    --ps-navbar-text: #ffffff;
    /* Navbar text */
    --ps-navbar-hover: #1e293b;
    /* Navbar hover */
    --ps-navbar-active-bg: #1e293b;
    /* Active menu item bg */
    --ps-navbar-active-text: #3b82f6;
    /* Active menu item text */

    /* ========================================
       GRADIENTS
       ======================================== */
    --ps-gradient-primary-start: #3b82f6;
    /* blue-500 */
    --ps-gradient-primary-end: #1d4ed8;
    /* blue-700 */
    --ps-gradient-secondary-start: #6366f1;
    /* indigo-500 */
    --ps-gradient-secondary-end: #4338ca;
    /* indigo-700 */
    --ps-gradient-header-start: #4f46e5;
    /* indigo-600 */
    --ps-gradient-header-end: #4338ca;
    /* indigo-700 */

    /* ========================================
       SPACING, TYPOGRAPHY, LAYOUT
       ======================================== */
    --ps-sp-0: 0px;
    --ps-sp-2: 2px;
    --ps-sp-4: 4px;
    --ps-sp-8: 8px;
    --ps-sp-12: 12px;
    --ps-sp-16: 16px;
    --ps-sp-20: 20px;
    --ps-sp-24: 24px;
    --ps-sp-32: 32px;
    --ps-sp-48: 48px;

    --ps-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --ps-size-xs: 0.75rem;
    --ps-size-sm: 0.875rem;
    --ps-size-base: 1rem;
    --ps-size-lg: 1.125rem;
    --ps-size-xl: 1.25rem;
    --ps-size-2xl: 1.5rem;
    --ps-size-3xl: 2rem;

    --ps-navbar-h: 64px;
    --ps-radius: 0px !important;

    --ps-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --ps-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05);
}

/* MANDATORY: Zero-Radius Standard */
*,
*::before,
*::after {
    border-radius: var(--ps-radius) !important;
}

/* ========================================
   LIGHT THEME OVERRIDES
   ======================================== */
[data-theme="light"] {
    /* ========================================
       BACKGROUNDS
       ======================================== */
    --ps-bg-main: #f8fafc;
    /* slate-50 - Main page background */
    --ps-bg-panel: #ffffff;
    /* white - Panels, sections */
    --ps-bg-header: #f1f5f9;
    /* slate-100 - Headers, elevated surfaces */
    --ps-bg-navbar: #0f172a;
    /* Keep navbar dark in light theme */
    --ps-bg-card: #ffffff;
    /* white - Cards, containers */
    --ps-bg-card-hover: #f1f5f9;
    /* slate-100 - Card hover state */
    --ps-bg-hover: #f1f5f9;
    /* slate-100 - General hover background */
    --ps-bg-input: #ffffff;
    /* white - Form inputs */
    --ps-bg-disabled: #f1f5f9;
    /* slate-100 - Disabled elements */
    --ps-bg-empty-state: rgba(241, 245, 249, 0.8);
    /* Empty states */
    --ps-bg-overlay: rgba(248, 250, 252, 0.95);
    /* Modal overlays */

    /* ========================================
       TEXT COLORS
       ======================================== */
    --ps-text-primary: #0f172a;
    /* slate-900 - Primary text */
    --ps-text-secondary: #334155;
    /* slate-700 - Secondary text */
    --ps-text-muted: #64748b;
    /* slate-500 - Muted text */
    --ps-text-disabled: #94a3b8;
    /* slate-400 - Disabled text */
    --ps-text-inverse: #ffffff;
    /* white - Text on dark backgrounds */
    --ps-text-bold: #0f172a;
    /* slate-900 - Bold text */
    --ps-text-empty-state: #94a3b8;
    /* slate-400 - Empty state messages */
    --ps-text-navbar: #ffffff;
    /* Keep navbar text white */

    /* ========================================
       BORDERS
       ======================================== */
    --ps-border-default: #e2e8f0;
    /* slate-200 - Default borders */
    --ps-border-strong: #cbd5e1;
    /* slate-300 - Emphasized borders */
    --ps-border-subtle: #f1f5f9;
    /* slate-100 - Subtle borders */
    --ps-border-accent: #3b82f6;
    /* blue-500 - Accent borders */
    --ps-border-dashed: #e2e8f0;
    /* slate-200 - Dashed borders */

    /* ========================================
       INTERACTIVE STATES
       ======================================== */
    --ps-hover-bg: rgba(0, 0, 0, 0.05);
    /* Hover overlay */
    --ps-active-bg: rgba(0, 0, 0, 0.1);
    /* Active/pressed state */
    --ps-focus-ring: #3b82f6;
    /* Focus ring color */
    --ps-focus-ring-offset: #ffffff;
    /* Focus ring offset */

    /* Navbar stays dark in light theme */
    --ps-navbar-bg: #0f172a;
    --ps-navbar-text: #ffffff;
    --ps-navbar-hover: #1e293b;
    --ps-navbar-active-bg: #1e293b;
    --ps-navbar-active-text: #3b82f6;

    /* Gradients remain same for consistency */
    --ps-gradient-primary-start: #3b82f6;
    --ps-gradient-primary-end: #1d4ed8;
    --ps-gradient-secondary-start: #6366f1;
    --ps-gradient-secondary-end: #4338ca;
    --ps-gradient-header-start: #4f46e5;
    --ps-gradient-header-end: #4338ca;
}