/* ==========================================================================
   calakan.work Enterprise Portal - Design Tokens
   Centralized CSS variables for colors, spacing, typography, shadows,
   radii, motion and z-index. Premium dark theme is the default.
   ========================================================================== */

:root {
    /* ---- Brand palette (premium electric) ---- */
    --brand-1: #5b8def;       /* electric blue   */
    --brand-2: #8b6dff;       /* royal violet    */
    --brand-3: #2bd98a;       /* emerald         */
    --brand-4: #ff8a4c;       /* amber           */
    --brand-5: #ff5c6c;       /* coral red       */
    --brand-gold: #d4a843;    /* premium gold    */
    --accent:  #5b8def;

    /* ---- Gradients ---- */
    --grad-brand: linear-gradient(135deg, #5b8def 0%, #8b6dff 50%, #c46bff 100%);
    --grad-warm:  linear-gradient(135deg, #ff8a4c 0%, #ff5e8a 100%);
    --grad-cool:  linear-gradient(135deg, #2bd98a 0%, #2bb6c9 100%);
    --grad-gold:  linear-gradient(135deg, #d4a843 0%, #e8c873 100%);
    --grad-bg-1:  linear-gradient(135deg, #060912 0%, #0a1024 30%, #0e0a28 60%, #120a20 100%);
    --grad-bg-2:  linear-gradient(125deg, #050810 0%, #080d1c 50%, #0a0820 100%);

    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;
    --fs-4xl:  3rem;
    --fw-light:  300;
    --fw-reg:    400;
    --fw-med:    500;
    --fw-semi:   600;
    --fw-bold:   700;
    --fw-black:  900;
    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-norm:   1.55;

    /* ---- Spacing scale ---- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  32px;
    --sp-8:  40px;
    --sp-9:  56px;
    --sp-10: 72px;

    /* ---- Radii ---- */
    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-pill: 999px;

    /* ---- Motion ---- */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:  160ms;
    --dur:       280ms;
    --dur-slow:  520ms;

    /* ---- Z-index ---- */
    --z-bg:       0;
    --z-base:     1;
    --z-card:     2;
    --z-nav:      50;
    --z-drawer:   60;
    --z-dropdown: 70;
    --z-modal:    100;
    --z-toast:    120;

    /* ---- Layout ---- */
    --shell-max: 1200px;
    --topbar-h:  72px;
}

/* ==========================================================================
   PREMIUM DARK THEME (DEFAULT)
   Deep midnight navy with electric accents and gold highlights.
   Inspired by Linear, Vercel, and high-end SaaS dashboards.
   ========================================================================== */
:root,
[data-theme="dark"] {
    /* ---- Background layers ---- */
    --bg-base:      #060912;
    --bg-grad-a:    #0a1228;
    --bg-grad-b:    #0e0a28;
    --bg-grad-c:    #08121c;

    /* ---- Glass surfaces ---- */
    --surface:      rgba(14, 20, 40, 0.60);
    --surface-2:    rgba(18, 26, 52, 0.82);
    --surface-solid:#0c1224;
    --glass-border: rgba(120, 140, 200, 0.12);
    --glass-blur:   24px;

    /* ---- Text ---- */
    --text:         #eef2ff;
    --text-soft:    #a8b4d8;
    --text-muted:   #6a7898;
    --text-invert:  #060912;

    /* ---- Borders ---- */
    --border:       rgba(120, 140, 200, 0.10);
    --border-strong:rgba(120, 140, 200, 0.22);

    /* ---- Shadows (deep, layered) ---- */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.40);
    --shadow:    0 12px 36px rgba(0, 0, 0, 0.50);
    --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.60);
    --shadow-glow: 0 0 0 1px rgba(91, 141, 239, 0.25), 0 20px 50px rgba(91, 141, 239, 0.25);

    /* ---- Status colors (vibrant on dark) ---- */
    --ok:    #2bd98a;
    --warn:  #ffc14f;
    --err:   #ff5c6c;
    --info:  #5b8def;

    /* ---- Chips ---- */
    --chip-bg:    rgba(120, 140, 200, 0.08);
    --chip-active:rgba(91, 141, 239, 0.18);

    /* ---- Premium accents ---- */
    --gold:        #d4a843;
    --gold-soft:   rgba(212, 168, 67, 0.15);
    --electric:    #5b8def;
    --electric-glow: rgba(91, 141, 239, 0.35);
}

/* ==========================================================================
   LIGHT THEME (alternative)
   Clean, bright, professional — for daytime / outdoor use.
   ========================================================================== */
[data-theme="light"] {
    --bg-base:      #f0f3fa;
    --bg-grad-a:    #dbe7ff;
    --bg-grad-b:    #e7dcff;
    --bg-grad-c:    #d6f4ec;

    --surface:      rgba(255, 255, 255, 0.70);
    --surface-2:    rgba(255, 255, 255, 0.88);
    --surface-solid:#ffffff;
    --glass-border: rgba(255, 255, 255, 0.60);
    --glass-blur:   18px;

    --text:         #0a1020;
    --text-soft:    #3a4868;
    --text-muted:   #6a7898;
    --text-invert:  #ffffff;

    --border:       rgba(10, 16, 32, 0.08);
    --border-strong:rgba(10, 16, 32, 0.14);

    --shadow-sm: 0 2px 8px rgba(20, 30, 70, 0.06);
    --shadow:    0 10px 30px rgba(20, 30, 70, 0.10);
    --shadow-lg: 0 24px 60px rgba(20, 30, 70, 0.16);
    --shadow-glow: 0 0 0 1px rgba(91, 141, 239, 0.18), 0 18px 40px rgba(91, 141, 239, 0.22);

    --ok:    #16b97c;
    --warn:  #f5a623;
    --err:   #e63946;
    --info:  #5b8def;

    --chip-bg:    rgba(10, 16, 32, 0.06);
    --chip-active:rgba(91, 141, 239, 0.14);

    --gold:        #c99a2e;
    --gold-soft:   rgba(201, 154, 46, 0.12);
    --electric:    #4f7de0;
    --electric-glow: rgba(79, 125, 224, 0.25);
}

/* ==========================================================================
   HIGH CONTRAST (forced colors / accessibility)
   ========================================================================== */
@media (forced-colors: active) {
    :root {
        --glass-blur: 0;
        --surface:    Canvas;
        --surface-2:  Canvas;
        --text:       CanvasText;
        --border:     CanvasText;
    }
}