/* ============================================================
   EliteDrive — Design Tokens
   Single source of truth for colors, type, spacing, motion, glass.
   Every component style MUST consume variables from this file.

   Theming model:
     1. :root           → light theme defaults (black/gray pastel)
     2. [data-theme=dark] → dark variant
     3. [data-user-theme] → per-user override layer emitted inline
        by the Razor layout from the user's profile (font, size,
        primary accent). Those overrides MUST be written as
        CSS custom properties so they cascade over this file.
   ============================================================ */

/* -------- Fonts (local, offline LAN) --------------------------
   Drop the four .woff2 files under wwwroot/fonts/baloo-thambi-2/
   (see that folder's README.txt for filenames/sources), then UNCOMMENT
   the @font-face block below. Until then we fall back to system-ui
   through --font-family-base so nothing breaks and the browser
   doesn't emit 404s for missing woff2 files on every request.

@font-face {
    font-family: "Baloo Thambi 2";
    src: url("../fonts/baloo-thambi-2/BalooThambi2-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Baloo Thambi 2";
    src: url("../fonts/baloo-thambi-2/BalooThambi2-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Baloo Thambi 2";
    src: url("../fonts/baloo-thambi-2/BalooThambi2-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Baloo Thambi 2";
    src: url("../fonts/baloo-thambi-2/BalooThambi2-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
*/

/* ============================================================
   LIGHT THEME (default) — black/gray pastel, soft glass
   ============================================================ */
:root {
    color-scheme: light;

    /* -------- Typography ------------------------------------- */
    --font-family-base: "Baloo Thambi 2", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --font-size-base: 16px;   /* user-configurable */
    --font-scale-ratio: 1.125;

    --font-size-xs:  calc(var(--font-size-base) * 0.75);   /* 12 */
    --font-size-sm:  calc(var(--font-size-base) * 0.875);  /* 14 */
    --font-size-md:  var(--font-size-base);                /* 16 */
    --font-size-lg:  calc(var(--font-size-base) * 1.125);  /* 18 */
    --font-size-xl:  calc(var(--font-size-base) * 1.25);   /* 20 */
    --font-size-2xl: calc(var(--font-size-base) * 1.5);    /* 24 */
    --font-size-3xl: calc(var(--font-size-base) * 1.875);  /* 30 */
    --font-size-4xl: calc(var(--font-size-base) * 2.25);   /* 36 */

    --font-weight-regular: 400;
    --font-weight-medium:  500;
    --font-weight-semibold: 600;
    --font-weight-bold:    700;

    --line-height-tight: 1.25;
    --line-height-snug:  1.4;
    --line-height-base:  1.6;

    --letter-spacing-tight:  -0.01em;
    --letter-spacing-normal:  0;
    --letter-spacing-wide:    0.02em;

    /* -------- Spacing (4px base) ----------------------------- */
    --space-0:   0;
    --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;
    --space-20:  80px;
    --space-24:  96px;

    /* -------- Radius ----------------------------------------- */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-2xl: 28px;
    --radius-pill: 9999px;

    /* -------- Colors: neutral pastel scale (grayscale) ------- */
    --gray-50:  #F6F7F9;
    --gray-100: #EDEFF3;
    --gray-150: #E3E6EC;
    --gray-200: #D8DCE4;
    --gray-300: #C1C6D0;
    --gray-400: #9AA0AC;
    --gray-500: #6E7482;
    --gray-600: #4E5460;
    --gray-700: #363B45;
    --gray-800: #24282F;
    --gray-900: #14171C;
    --gray-950: #0B0D10;

    /* -------- Semantic colors (light) ------------------------ */
    --color-background:      var(--gray-100);
    --color-background-soft: var(--gray-50);
    --color-surface:         #FFFFFF;
    --color-surface-alt:     var(--gray-50);
    --color-surface-sunken:  var(--gray-150);

    --color-foreground:         var(--gray-900);
    --color-foreground-muted:   var(--gray-600);
    --color-foreground-subtle:  var(--gray-500);
    --color-foreground-inverse: #FFFFFF;

    --color-border:         var(--gray-200);
    --color-border-strong:  var(--gray-300);
    --color-divider:        var(--gray-150);

    --color-primary:         var(--gray-900);
    --color-primary-hover:   var(--gray-800);
    --color-primary-active:  var(--gray-950);
    --color-on-primary:      #FFFFFF;

    --color-accent:          var(--gray-700);   /* monochrome accent */
    --color-accent-muted:    var(--gray-200);

    --color-focus-ring:      rgba(20, 23, 28, 0.35);

    /* Functional (kept desaturated to match pastel aesthetic) */
    --color-success: #4E7A5C;
    --color-warning: #9C7A3A;
    --color-danger:  #9C4A4A;
    --color-info:    #4A6A8A;

    --color-success-bg: #E6EFE9;
    --color-warning-bg: #F4EDDD;
    --color-danger-bg:  #F2E1E1;
    --color-info-bg:    #E2E9F1;

    /* -------- Shadows (soft, low-opacity) -------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 17, 21, 0.05);
    --shadow-sm: 0 2px 6px rgba(15, 17, 21, 0.06);
    --shadow-md: 0 6px 16px rgba(15, 17, 21, 0.08);
    --shadow-lg: 0 14px 32px rgba(15, 17, 21, 0.10);
    --shadow-xl: 0 24px 48px rgba(15, 17, 21, 0.12);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

    /* -------- Glass surface ---------------------------------- */
    --glass-blur:         14px;
    --glass-blur-strong:  22px;
    --glass-bg:           rgba(255, 255, 255, 0.55);
    --glass-bg-strong:    rgba(255, 255, 255, 0.72);
    --glass-bg-sunken:    rgba(246, 247, 249, 0.65);
    --glass-border:       rgba(255, 255, 255, 0.55);
    --glass-border-soft:  rgba(20, 23, 28, 0.08);
    --glass-highlight:    linear-gradient(180deg,
                              rgba(255, 255, 255, 0.65) 0%,
                              rgba(255, 255, 255, 0.15) 100%);

    /* -------- Motion ----------------------------------------- */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);

    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   320ms;
    --duration-slower: 480ms;

    /* -------- Layout ----------------------------------------- */
    --layout-navbar-height:  64px;
    --layout-sidebar-width:  260px;
    --layout-content-max:    1280px;
    --layout-gutter:         var(--space-6);

    --z-base:    1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-navbar:   300;
    --z-overlay:  900;
    --z-modal:    1000;
    --z-toast:    1100;
}

/* ============================================================
   DARK THEME — engage with <html data-theme="dark">
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --color-background:      #0E1013;
    --color-background-soft: #12151A;
    --color-surface:         #181B21;
    --color-surface-alt:     #1E222A;
    --color-surface-sunken:  #0B0D10;

    --color-foreground:         #EAECEF;
    --color-foreground-muted:   #A4ABB6;
    --color-foreground-subtle:  #7A8191;
    --color-foreground-inverse: #14171C;

    --color-border:         #272B34;
    --color-border-strong:  #343945;
    --color-divider:        #20242C;

    --color-primary:         #EAECEF;
    --color-primary-hover:   #FFFFFF;
    --color-primary-active:  #C7CCD4;
    --color-on-primary:      #14171C;

    --color-accent:          #A4ABB6;
    --color-accent-muted:    #272B34;

    --color-focus-ring:      rgba(234, 236, 239, 0.35);

    --color-success: #7FA78E;
    --color-warning: #C6A56A;
    --color-danger:  #C77F7F;
    --color-info:    #7F9CC0;

    --color-success-bg: rgba(127, 167, 142, 0.12);
    --color-warning-bg: rgba(198, 165, 106, 0.12);
    --color-danger-bg:  rgba(199, 127, 127, 0.12);
    --color-info-bg:    rgba(127, 156, 192, 0.12);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.50);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.55);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    --glass-bg:          rgba(24, 27, 33, 0.55);
    --glass-bg-strong:   rgba(24, 27, 33, 0.75);
    --glass-bg-sunken:   rgba(11, 13, 16, 0.60);
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-border-soft: rgba(255, 255, 255, 0.05);
    --glass-highlight:   linear-gradient(180deg,
                             rgba(255, 255, 255, 0.06) 0%,
                             rgba(255, 255, 255, 0.01) 100%);
}

/* ============================================================
   Accessibility: respect reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:   0ms;
        --duration-base:   0ms;
        --duration-slow:   0ms;
        --duration-slower: 0ms;
    }
}