/* ============================================================
   ManagerInsight Design Tokens v4.0
   ============================================================
   Design System: Swiss Grid + Floating Panels
   Inspired by: Linear · Vercel · Notion · Arc Browser
   Font: Geist (Vercel) + system CJK fallback
   Style: Glass Rail + Centered Content + Bento Grid + Micro-motion
   Grid: 8px base unit
   ============================================================ */

/* Google Fonts — Geist + Plus Jakarta Sans */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/geist@1.2.2/dist/fonts/geist-sans/style.min.css');
@import url('https://cdn.jsdelivr.net/npm/geist@1.2.2/dist/fonts/geist-mono/style.min.css');

:root {
    /* ================================================================
       1. COLOR SYSTEM — Refined Neutral + Single Accent
       ================================================================ */

    /* ---- Brand / Primary (Deep Slate) ---- */
    --mi-primary:           #0F172A;
    --mi-primary-light:     #1E293B;
    --mi-primary-lighter:   #334155;
    --mi-primary-dark:      #020617;
    --mi-primary-bg:        #F0F4FF;

    /* ---- CTA Accent (Sky Blue — brand accent color) ---- */
    --mi-cta:               #38BDF8;
    --mi-cta-hover:         #0EA5E9;
    --mi-cta-light:         #7DD3FC;
    --mi-cta-bg:            #F0F9FF;
    --mi-cta-ring:          rgba(56, 189, 248, 0.15);

    /* ---- Product Theme Colors (muted, used sparingly) ---- */
    --mi-system:            #0F172A;
    --mi-system-light:      #334155;

    --mi-questionnaire:     #D97706;
    --mi-questionnaire-light: #F59E0B;
    --mi-questionnaire-bg:  #FFFBEB;
    --mi-questionnaire-text: #92400E;

    --mi-analysis:          #059669;
    --mi-analysis-light:    #10B981;
    --mi-analysis-bg:       #ECFDF5;
    --mi-analysis-text:     #065F46;

    --mi-coach:             #7C3AED;
    --mi-coach-light:       #8B5CF6;
    --mi-coach-bg:          #F5F3FF;
    --mi-coach-text:        #4C1D95;

    /* ---- Gradients (subtle, used for hero/accent only) ---- */
    --mi-gradient-primary:  linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    --mi-gradient-cta:      linear-gradient(135deg, #0EA5E9 0%, #38BDF8 100%);
    --mi-gradient-page:     linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    --mi-gradient-glass:    linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);

    /* ================================================================
       2. SEMANTIC COLORS
       ================================================================ */
    --mi-success:           #059669;
    --mi-success-light:     #10B981;
    --mi-success-bg:        #D1FAE5;
    --mi-success-text:      #065F46;
    --mi-success-hover:     #047857;

    --mi-warning:           #D97706;
    --mi-warning-light:     #F59E0B;
    --mi-warning-bg:        #FEF3C7;
    --mi-warning-text:      #92400E;

    --mi-error:             #DC2626;
    --mi-error-light:       #EF4444;
    --mi-error-bg:          #FEE2E2;
    --mi-error-text:        #991B1B;

    --mi-info:              #0EA5E9;
    --mi-info-light:        #60A5FA;
    --mi-info-bg:           #EFF6FF;
    --mi-info-text:         #1E40AF;
    --mi-info-hover:        #1D4ED8;
    --mi-info-pale-bg:      #F0F9FF;
    --mi-info-deep:         #1E3A8A;

    --mi-warning-hint-bg:   #FFFBEB;
    --mi-warning-hint-border: #F59E0B;
    --mi-warning-hint-text: #92400E;
    --mi-terminal-bg:       #0F172A;
    --mi-terminal-text:     #34D399;

    /* ================================================================
       3. NEUTRAL PALETTE (Slate)
       ================================================================ */
    --mi-gray-50:           #F8FAFC;
    --mi-gray-100:          #F1F5F9;
    --mi-gray-200:          #E2E8F0;
    --mi-gray-300:          #CBD5E1;
    --mi-gray-400:          #94A3B8;
    --mi-gray-500:          #64748B;
    --mi-gray-600:          #475569;
    --mi-gray-700:          #334155;
    --mi-gray-800:          #1E293B;
    --mi-gray-900:          #0F172A;
    --mi-gray-950:          #020617;

    /* ================================================================
       4. BACKGROUNDS
       ================================================================ */
    --mi-bg-page:           #FAFBFC;
    --mi-bg-card:           #FFFFFF;
    --mi-bg-elevated:       #FFFFFF;
    --mi-bg-sunken:         #F1F5F9;
    --mi-bg-portal:         linear-gradient(160deg, #F0F4FF 0%, #E8F0FE 50%, #F0F9FF 100%);

    /* ================================================================
       5. TEXT
       ================================================================ */
    --mi-text-primary:      #0F172A;
    --mi-text-secondary:    #334155;
    --mi-text-muted:        #64748B;
    --mi-text-light:        #94A3B8;
    --mi-text-inverse:      #FFFFFF;

    /* ================================================================
       6. BORDERS
       ================================================================ */
    --mi-border-color:      #E8ECF1;
    --mi-border-light:      #F1F5F9;
    --mi-border-strong:     #CBD5E1;
    --mi-border-focus:      #38BDF8;

    /* ================================================================
       7. TYPOGRAPHY
       ================================================================ */
    --mi-font-sans:         'Geist', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
    --mi-font-mono:         'Geist Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;

    /* Type Scale — base values (scaled by JS via --mi-font-scale) */
    --mi-text-2xs:          10px;
    --mi-text-xs:           11px;
    --mi-text-sm:           12px;
    --mi-text-base:         14px;
    --mi-text-md:           15px;
    --mi-text-lg:           17px;
    --mi-text-xl:           20px;
    --mi-text-2xl:          24px;
    --mi-text-3xl:          30px;
    --mi-text-4xl:          36px;

    /* Letter Spacing */
    --mi-tracking-tighter:  -0.03em;
    --mi-tracking-tight:    -0.015em;
    --mi-tracking-normal:   0;
    --mi-tracking-wide:     0.02em;
    --mi-tracking-wider:    0.05em;

    /* Line Height */
    --mi-leading-none:      1;
    --mi-leading-tight:     1.25;
    --mi-leading-snug:      1.375;
    --mi-leading-normal:    1.5;
    --mi-leading-relaxed:   1.625;
    --mi-leading-loose:     1.8;

    /* ================================================================
       8. BORDER RADIUS
       ================================================================ */
    --mi-radius-xs:         4px;
    --mi-radius-sm:         6px;
    --mi-radius-md:         8px;
    --mi-radius-lg:         12px;
    --mi-radius-xl:         16px;
    --mi-radius-2xl:        20px;
    --mi-radius-3xl:        24px;
    --mi-radius-full:       9999px;

    /* ================================================================
       9. SHADOWS (layered, color-tinted)
       ================================================================ */
    --mi-shadow-xs:         0 1px 2px rgba(15, 23, 42, 0.03);
    --mi-shadow-sm:         0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
    --mi-shadow-md:         0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
    --mi-shadow-lg:         0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --mi-shadow-xl:         0 20px 25px -5px rgba(15, 23, 42, 0.07), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
    --mi-shadow-2xl:        0 25px 50px -12px rgba(15, 23, 42, 0.15);
    --mi-shadow-inner:      inset 0 2px 4px rgba(15, 23, 42, 0.04);
    --mi-shadow-ring:       0 0 0 3px var(--mi-cta-ring);
    --mi-shadow-cta:        0 4px 14px rgba(56, 189, 248, 0.25);
    --mi-shadow-primary:    0 4px 14px rgba(56, 189, 248, 0.25);
    --mi-shadow-float:      0 8px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);

    /* ================================================================
       10. SPACING (8px base grid)
       ================================================================ */
    --mi-space-0:           0;
    --mi-space-px:          1px;
    --mi-space-0_5:         2px;
    --mi-space-1:           4px;
    --mi-space-xs:          4px;
    --mi-space-1_5:         6px;
    --mi-space-2:           8px;
    --mi-space-sm:          8px;
    --mi-space-2_5:         10px;
    --mi-space-3:           12px;
    --mi-space-4:           16px;
    --mi-space-md:          16px;
    --mi-space-5:           20px;
    --mi-space-6:           24px;
    --mi-space-lg:          24px;
    --mi-space-8:           32px;
    --mi-space-xl:          32px;
    --mi-space-10:          40px;
    --mi-space-12:          48px;
    --mi-space-2xl:         48px;
    --mi-space-16:          64px;
    --mi-space-3xl:         64px;
    --mi-space-20:          80px;
    --mi-space-24:          96px;

    /* ================================================================
       11. TRANSITIONS & ANIMATION
       ================================================================ */

    /* Duration */
    --mi-duration-instant:  50ms;
    --mi-duration-fast:     120ms;
    --mi-duration-normal:   200ms;
    --mi-duration-moderate: 300ms;
    --mi-duration-slow:     400ms;
    --mi-duration-slower:   600ms;
    --mi-duration-glacial:  1000ms;

    /* Easing Curves */
    --mi-ease-linear:       linear;
    --mi-ease-in:           cubic-bezier(0.4, 0, 1, 1);
    --mi-ease-out:          cubic-bezier(0, 0, 0.2, 1);
    --mi-ease-in-out:       cubic-bezier(0.4, 0, 0.2, 1);
    --mi-ease-spring:       cubic-bezier(0.22, 0.68, 0, 1.2);
    --mi-ease-bounce:       cubic-bezier(0.34, 1.56, 0.64, 1);
    --mi-ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
    --mi-ease-out-back:     cubic-bezier(0.34, 1.3, 0.64, 1);

    /* Shorthand transitions */
    --mi-transition-fast:   120ms var(--mi-ease-out);
    --mi-transition:        200ms var(--mi-ease-out);
    --mi-transition-slow:   400ms var(--mi-ease-out);
    --mi-transition-spring: 500ms var(--mi-ease-spring);

    /* Stagger delay (for list items) */
    --mi-stagger-delay:     30ms;
    --mi-stagger-max:       12;

    /* ================================================================
       12. LAYOUT TOKENS (Rail + TopBar + Content)
       ================================================================ */

    /* Sidebar Navigation (expanded with labels) */
    --mi-rail-width:        230px;
    --mi-rail-width-collapsed: 64px;
    --mi-rail-icon-size:    18px;
    --mi-rail-item-size:    36px;
    --mi-rail-padding:      12px;

    /* Top Bar */
    --mi-topbar-height:     48px;

    /* Content Area — full width for PC backend */
    --mi-content-max-width: 100%;
    --mi-content-padding-x: 32px;
    --mi-content-padding-y: 28px;

    /* Bento Grid */
    --mi-bento-gap:         16px;
    --mi-bento-radius:      var(--mi-radius-xl);

    /* Container widths */
    --mi-container-xs:      480px;
    --mi-container-sm:      600px;
    --mi-container-md:      900px;
    --mi-container-lg:      1080px;
    --mi-container-xl:      1280px;
    --mi-container-2xl:     1600px;

    /* ================================================================
       13. Z-INDEX LAYERS
       ================================================================ */
    --mi-z-base:            0;
    --mi-z-dropdown:        100;
    --mi-z-sticky:          200;
    --mi-z-rail:            300;
    --mi-z-topbar:          400;
    --mi-z-drawer-backdrop: 800;
    --mi-z-drawer:          850;
    --mi-z-modal-backdrop:  900;
    --mi-z-modal:           1000;
    --mi-z-command:         1100;
    --mi-z-toast:           1200;
    --mi-z-tooltip:         1300;

    /* ================================================================
       14. GLASS MORPHISM
       ================================================================ */
    --mi-glass-bg:          rgba(255, 255, 255, 0.80);
    --mi-glass-border:      rgba(255, 255, 255, 0.25);
    --mi-glass-blur:        16px;
    --mi-glass-dark-bg:     rgba(15, 23, 42, 0.88);
    --mi-glass-dark-border: rgba(255, 255, 255, 0.06);

    /* Rail Glass */
    --mi-rail-bg:           rgba(255, 255, 255, 0.85);
    --mi-rail-border:       rgba(226, 232, 240, 0.60);
    --mi-rail-blur:         20px;
    --mi-rail-item-hover:   rgba(15, 23, 42, 0.04);
    --mi-rail-item-active:  rgba(37, 99, 235, 0.08);
    --mi-rail-icon-color:   var(--mi-gray-400);
    --mi-rail-icon-hover:   var(--mi-gray-700);
    --mi-rail-icon-active:  var(--mi-cta);
    --mi-rail-indicator:    var(--mi-cta);

    /* TopBar Glass */
    --mi-topbar-bg:         rgba(250, 251, 252, 0.85);
    --mi-topbar-border:     var(--mi-border-color);
    --mi-topbar-blur:       16px;

    /* ================================================================
       15. SIDEBAR LEGACY (backward compat)
       ================================================================ */
    --mi-bg-sidebar:        #0B1120;
    --mi-sidebar-bg:        #0B1120;
    --mi-sidebar-bg-hover:  rgba(255, 255, 255, 0.06);
    --mi-sidebar-bg-active: rgba(37, 99, 235, 0.12);
    --mi-sidebar-text:      rgba(255, 255, 255, 0.55);
    --mi-sidebar-text-hover: rgba(255, 255, 255, 0.85);
    --mi-sidebar-text-active: #60A5FA;
    --mi-sidebar-border:    rgba(255, 255, 255, 0.06);
    --mi-sidebar-accent:    #60A5FA;
    --mi-sidebar-group-text: rgba(255, 255, 255, 0.30);
}

/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

/* Fade in + slide up (primary entrance) */
@keyframes mi-fade-in-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fade in only */
@keyframes mi-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scale in (modals, popovers) */
@keyframes mi-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Slide in from right (drawers, toasts) */
@keyframes mi-slide-in-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Slide in from left (rail expand) */
@keyframes mi-slide-in-left {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Slide up (bottom sheets, floating bars) */
@keyframes mi-slide-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide down (dropdowns) */
@keyframes mi-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pulse glow (status indicators) */
@keyframes mi-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Spin (loading) */
@keyframes mi-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Skeleton shimmer */
@keyframes mi-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Bounce subtle (attention) */
@keyframes mi-bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* Counter increment (number animation) */
@keyframes mi-count-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger entrance helper — use with animation-delay */
@keyframes mi-stagger-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}