/* ==========================================================================
   NextRide Design Tokens
   Migrated from Figma design system (nextride-figma-make)
   
   This file defines the core design tokens for the NextRide application.
   All colors, spacing, radii, and semantic tokens live here.
   
   The existing site.css variables are preserved for backward compatibility;
   components can progressively adopt the new tokens below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light-mode palette (default)
   -------------------------------------------------------------------------- */
:root {
    /* --- Surface & text --------------------------------------------------- */
    --nr-background: #ffffff;
    --nr-foreground: #0a0a0a;           /* oklch(0.145 0 0) ≈ #0a0a0a */
    --nr-card: #ffffff;
    --nr-card-foreground: #0a0a0a;

    /* --- Brand / Primary -------------------------------------------------- */
    --nr-primary: #030213;
    --nr-primary-foreground: #ffffff;

    /* --- Secondary -------------------------------------------------------- */
    --nr-secondary: #ededf3;            /* oklch(0.95 0.0058 264.53) ≈ #ededf3 */
    --nr-secondary-foreground: #030213;

    /* --- Muted ------------------------------------------------------------- */
    --nr-muted: #ececf0;
    --nr-muted-foreground: #717182;

    /* --- Accent ------------------------------------------------------------ */
    --nr-accent: #e9ebef;
    --nr-accent-foreground: #030213;

    /* --- Destructive / Error ----------------------------------------------- */
    --nr-destructive: #d4183d;
    --nr-destructive-foreground: #ffffff;

    /* --- Borders & inputs -------------------------------------------------- */
    --nr-border: rgba(0, 0, 0, 0.1);
    --nr-input-background: #f3f3f5;
    --nr-switch-background: #cbced4;
    --nr-ring: #b5b5b5;                 /* oklch(0.708 0 0) ≈ #b5b5b5 */

    /* --- Sidebar ----------------------------------------------------------- */
    --nr-sidebar-gradient-start: #4338ca; /* Tailwind indigo-700 */
    --nr-sidebar-gradient-end:   #312e81; /* Tailwind indigo-900 */
    --nr-sidebar-foreground: #ffffff;
    --nr-sidebar-active-bg: rgba(99, 102, 241, 0.30); /* indigo-500/30 */
    --nr-sidebar-hover-bg: rgba(255, 255, 255, 0.10);

    /* --- Content area background gradient --------------------------------- */
    --nr-content-bg: linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #faf5ff 100%);

    /* --- App bar ----------------------------------------------------------- */
    --nr-appbar-bg: rgba(255, 255, 255, 0.85);
    --nr-appbar-border: rgba(0, 0, 0, 0.08);
    --nr-appbar-text: #374151;
    --nr-appbar-muted: #6b7280;
    --nr-brand-from: #4f46e5; /* indigo-600 */
    --nr-brand-to:   #7c3aed; /* purple-600 */

    /* --- Charts ------------------------------------------------------------ */
    --nr-chart-1: #d97706;              /* oklch(0.646 0.222 41.116) */
    --nr-chart-2: #0d9488;              /* oklch(0.6 0.118 184.704) */
    --nr-chart-3: #334155;              /* oklch(0.398 0.07 227.392) */
    --nr-chart-4: #eab308;              /* oklch(0.828 0.189 84.429) */
    --nr-chart-5: #ca8a04;              /* oklch(0.769 0.188 70.08) */

    /* --- Score colours (ride cards) ---------------------------------------- */
    --nr-score-excellent: #10b981;      /* emerald-500 */
    --nr-score-excellent-end: #059669;
    --nr-score-good: #3b82f6;           /* blue-500 */
    --nr-score-good-end: #1d4ed8;
    --nr-score-fair: #f59e0b;           /* amber-500 */
    --nr-score-fair-end: #d97706;
    --nr-score-poor: #6b7280;           /* gray-500 */
    --nr-score-poor-end: #475569;

    /* --- Gradients --------------------------------------------------------- */
    --nr-gradient-hero: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
    --nr-gradient-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --nr-gradient-accent: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    /* --- Surface / text aliases (used as var(--nr-surface, ...) fallbacks) - */
    --nr-surface: #ffffff;             /* white card / panel background */
    --nr-surface-alt: #f8fafc;        /* subtle secondary background */
    --nr-text: #111827;               /* primary body text */
    --nr-text-muted: #6b7280;         /* secondary / hint text */
}

/* --------------------------------------------------------------------------
   Dark-mode palette
   Triggered by body.dark-mode (existing toggle mechanism)
   Source of truth: Figma nextride-figma-make dark mode
   Uses the Tailwind slate/indigo navy palette, NOT neutral near-blacks.
   -------------------------------------------------------------------------- */
body.dark-mode {
    /* --- Surface & text --------------------------------------------------- */
    --nr-background: #0f172a;           /* slate-900  – dark navy base */
    --nr-foreground: #f1f5f9;           /* slate-100  – near-white text */
    --nr-card: #1e293b;                 /* slate-800  – card / panel bg */
    --nr-card-foreground: #f1f5f9;

    /* --- Brand / Primary -------------------------------------------------- */
    --nr-primary: #f1f5f9;
    --nr-primary-foreground: #0f172a;

    /* --- Secondary -------------------------------------------------------- */
    --nr-secondary: #1e293b;            /* slate-800 */
    --nr-secondary-foreground: #f1f5f9;

    /* --- Muted ------------------------------------------------------------- */
    --nr-muted: #334155;                /* slate-700 */
    --nr-muted-foreground: #94a3b8;     /* slate-400 */

    /* --- Accent ------------------------------------------------------------ */
    --nr-accent: #334155;               /* slate-700 */
    --nr-accent-foreground: #f1f5f9;

    /* --- Destructive / Error ----------------------------------------------- */
    --nr-destructive: #7f1d1d;
    --nr-destructive-foreground: #ef4444;

    /* --- Borders & inputs -------------------------------------------------- */
    --nr-border: rgba(255, 255, 255, 0.10);
    --nr-input-background: #1e293b;     /* slate-800 */
    --nr-ring: #4f46e5;                 /* indigo-600 */

    /* --- Sidebar ----------------------------------------------------------- */
    --nr-sidebar-gradient-start: #312e81; /* indigo-900 */
    --nr-sidebar-gradient-end:   #1e1b4b; /* indigo-950 */

    /* --- Content area background gradient --------------------------------- */
    --nr-content-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e1b4b 100%);

    /* --- App bar ----------------------------------------------------------- */
    --nr-appbar-bg: rgba(15, 23, 42, 0.88);
    --nr-appbar-border: rgba(255, 255, 255, 0.08);
    --nr-appbar-text: #e2e8f0;          /* slate-200 */
    --nr-appbar-muted: #94a3b8;         /* slate-400 */

    /* --- Charts ------------------------------------------------------------ */
    --nr-chart-1: #6366f1;
    --nr-chart-2: #34d399;
    --nr-chart-3: #ca8a04;
    --nr-chart-4: #a855f7;
    --nr-chart-5: #f43f5e;

    /* --- Surface / text aliases ------------------------------------------- */
    --nr-surface: #1e293b;            /* slate-800 card / panel background */
    --nr-surface-alt: #334155;        /* slate-700 subtle secondary background */
    --nr-text: #f1f5f9;               /* slate-100 primary body text */
    --nr-text-muted: #94a3b8;         /* slate-400 secondary / hint text */
}

/* --------------------------------------------------------------------------
   Border-radius scale
   -------------------------------------------------------------------------- */
:root {
    --nr-radius: 0.625rem;             /* 10px – base */
    --nr-radius-sm: 0.375rem;          /* 6px */
    --nr-radius-md: 0.5rem;            /* 8px */
    --nr-radius-lg: 0.625rem;          /* 10px */
    --nr-radius-xl: 1.0rem;            /* 16px */
    --nr-radius-2xl: 1.375rem;         /* 22px – hero cards */
    --nr-radius-full: 9999px;          /* pill shapes */
}

/* --------------------------------------------------------------------------
   Spacing scale  (matches Tailwind conventions)
   -------------------------------------------------------------------------- */
:root {
    --nr-space-0: 0;
    --nr-space-0-5: 0.125rem;  /*  2px */
    --nr-space-1: 0.25rem;     /*  4px */
    --nr-space-1-5: 0.375rem;  /*  6px */
    --nr-space-2: 0.5rem;      /*  8px */
    --nr-space-3: 0.75rem;     /* 12px */
    --nr-space-4: 1rem;        /* 16px */
    --nr-space-5: 1.25rem;     /* 20px */
    --nr-space-6: 1.5rem;      /* 24px */
    --nr-space-8: 2rem;        /* 32px */
    --nr-space-10: 2.5rem;     /* 40px */
    --nr-space-12: 3rem;       /* 48px */
    --nr-space-16: 4rem;       /* 64px */
    --nr-space-20: 5rem;       /* 80px */
    --nr-space-24: 6rem;       /* 96px */
}

/* --------------------------------------------------------------------------
   Shadow scale
   -------------------------------------------------------------------------- */
:root {
    --nr-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --nr-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --nr-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --nr-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --nr-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   Transition presets
   -------------------------------------------------------------------------- */
:root {
    --nr-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --nr-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --nr-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}