/* ============================================================
   LIS Design System — LINEAR ULTRA (indigo accent)
   Reference: Linear app 2025, Vercel dashboard, Resend
   Density: 4px grid, 13px body, 32px controls, table 36px row
   Border: hsl(240 5% 10% / 0.06) gần invisible — phẳng tuyệt đối
   Primary: indigo-500 #6366f1 (Linear signature)
   ============================================================ */

:root {
    color-scheme: light dark;

    /* === Color (Light) — uniform white surface, 1px border phân tách card === */
    --sd-background:           0 0% 99.2%;             /* #FDFDFD — Linear off-white */
    --sd-foreground:           240 6% 10%;             /* #18181B zinc-900 */

    --sd-card:                 0 0% 100%;
    --sd-card-foreground:      240 6% 10%;

    --sd-popover:              0 0% 100%;
    --sd-popover-foreground:   240 6% 10%;

    --sd-primary:              239 84% 60%;             /* indigo-500 #6366F1 — Linear Ultra */
    --sd-primary-foreground:   0 0% 100%;

    --sd-secondary:            240 5% 96%;
    --sd-secondary-foreground: 240 6% 10%;

    --sd-muted:                240 5% 96%;             /* #F4F4F5 hover bg */
    --sd-muted-foreground:     240 4% 46%;             /* #71717A zinc-500 secondary text */

    --sd-accent:               240 5% 96%;
    --sd-accent-foreground:    240 6% 10%;

    --sd-destructive:          0 72% 51%;               /* red-500 #EF4444 */
    --sd-destructive-foreground: 0 0% 100%;

    --sd-success:              160 84% 39%;             /* emerald-500 dot indicator */
    --sd-success-foreground:   0 0% 100%;

    --sd-warning:              38 92% 50%;              /* amber-500 #F59E0B */
    --sd-warning-foreground:   0 0% 100%;

    --sd-info:                 199 89% 48%;             /* sky-500 #0EA5E9 */
    --sd-info-foreground:      0 0% 100%;

    --sd-border:               240 5% 10%;              /* alpha 0.06 set qua --sd-border-c */
    --sd-input:                240 6% 88%;              /* #DEDEE0 input border (rõ hơn để dễ thấy field) */
    --sd-ring:                 239 84% 60%;             /* indigo focus ring */

    --sd-radius: 0.375rem;                              /* 6px Linear standard (nhỏ hơn shadcn 8px) */

    /* === Convenience aliases === */
    --sd-bg:                   hsl(var(--sd-background));
    --sd-fg:                   hsl(var(--sd-foreground));
    --sd-card-bg:              hsl(var(--sd-card));
    --sd-card-fg:              hsl(var(--sd-card-foreground));
    --sd-popover-bg:           hsl(var(--sd-popover));
    --sd-popover-fg:           hsl(var(--sd-popover-foreground));
    --sd-primary-bg:           hsl(var(--sd-primary));
    --sd-primary-fg:           hsl(var(--sd-primary-foreground));
    --sd-primary-bg-hover:     hsl(239 84% 50%);
    --sd-secondary-bg:         hsl(var(--sd-secondary));
    --sd-secondary-fg:         hsl(var(--sd-secondary-foreground));
    --sd-muted-bg:             hsl(var(--sd-muted));
    --sd-muted-fg:             hsl(var(--sd-muted-foreground));
    --sd-accent-bg:            hsl(var(--sd-accent));
    --sd-accent-fg:            hsl(var(--sd-accent-foreground));
    --sd-destructive-bg:       hsl(var(--sd-destructive));
    --sd-destructive-fg:       hsl(var(--sd-destructive-foreground));
    --sd-success-bg:           hsl(var(--sd-success));
    --sd-success-fg:           hsl(var(--sd-success-foreground));
    --sd-warning-bg:           hsl(var(--sd-warning));
    --sd-warning-fg:           hsl(var(--sd-warning-foreground));
    --sd-info-bg:              hsl(var(--sd-info));
    --sd-info-fg:              hsl(var(--sd-info-foreground));

    /* Border cực nhạt — chỉ thấy khi cần phân tách */
    --sd-border-c:             hsl(0 0% 0% / 0.06);
    --sd-border-strong:        hsl(0 0% 0% / 0.10);
    --sd-input-c:              hsl(var(--sd-input));
    --sd-ring-c:               hsl(var(--sd-ring));

    /* Soft variants (cho dot/pill/icon-bg) */
    --sd-primary-soft:         hsl(239 84% 60% / 0.10);
    --sd-success-soft:         hsl(160 84% 39% / 0.12);
    --sd-warning-soft:         hsl(38 92% 50% / 0.12);
    --sd-destructive-soft:     hsl(0 72% 51% / 0.10);
    --sd-info-soft:             hsl(199 89% 48% / 0.10);

    /* === Spacing 4px grid === */
    --sd-space-1: 0.25rem;     /* 4 */
    --sd-space-2: 0.5rem;      /* 8 */
    --sd-space-3: 0.75rem;     /* 12 */
    --sd-space-4: 1rem;        /* 16 */
    --sd-space-5: 1.25rem;     /* 20 */
    --sd-space-6: 1.5rem;      /* 24 */
    --sd-space-8: 2rem;        /* 32 */
    --sd-space-10: 2.5rem;     /* 40 */
    --sd-space-12: 3rem;

    /* === Radius (Linear: 6px standard) === */
    --sd-radius-xs:  3px;
    --sd-radius-sm:  4px;
    --sd-radius-md:  6px;       /* default */
    --sd-radius-lg:  8px;
    --sd-radius-xl:  10px;
    --sd-radius-2xl: 12px;
    --sd-radius-pill: 9999px;

    /* === Shadow (chỉ dùng cho dialog/popover) === */
    --sd-shadow-xs: 0 1px 1px 0 hsl(0 0% 0% / 0.04);
    --sd-shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
    --sd-shadow:    0 1px 3px 0 hsl(0 0% 0% / 0.06), 0 1px 2px -1px hsl(0 0% 0% / 0.04);
    --sd-shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.08), 0 2px 4px -2px hsl(0 0% 0% / 0.06);
    --sd-shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.08), 0 4px 6px -4px hsl(0 0% 0% / 0.04);
    --sd-shadow-xl: 0 16px 24px -4px hsl(0 0% 0% / 0.10), 0 4px 8px -2px hsl(0 0% 0% / 0.06);

    /* === Typography === */
    --sd-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sd-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --sd-text-xs:   0.6875rem;     /* 11px (Linear caption/section title uppercase) */
    --sd-text-sm:   0.75rem;       /* 12px (label, meta) */
    --sd-text-base: 0.8125rem;     /* 13px (body) — Linear DEFAULT */
    --sd-text-md:   0.875rem;      /* 14px (h3 / card title) */
    --sd-text-lg:   1rem;          /* 16px (h2 / page subtitle) */
    --sd-text-xl:   1.125rem;      /* 18px (h1 page title) */
    --sd-text-2xl:  1.375rem;      /* 22px (large numbers / stat) */
    --sd-text-3xl:  1.75rem;       /* 28px (display) */
    --sd-text-4xl:  2.25rem;

    --sd-leading-tight:  1.2;
    --sd-leading-snug:   1.35;
    --sd-leading-normal: 1.5;
    --sd-leading-relaxed:1.625;

    /* === Motion === */
    --sd-duration-fast: 80ms;
    --sd-duration:      120ms;
    --sd-duration-slow: 180ms;
    --sd-ease:          cubic-bezier(0.4, 0, 0.2, 1);

    /* === Control sizes (Linear compact) === */
    --sd-h-xs: 1.5rem;          /* 24px (tag/badge) */
    --sd-h-sm: 1.75rem;         /* 28px (sm button) */
    --sd-h:    2rem;            /* 32px (default) */
    --sd-h-md: 2.25rem;         /* 36px (lg / table-row) */
    --sd-h-lg: 2.5rem;          /* 40px (xl) */

    /* === Z-index === */
    --sd-z-dropdown: 1000;
    --sd-z-sticky:   1020;
    --sd-z-overlay:  1040;
    --sd-z-modal:    1050;
    --sd-z-popover:  1060;
    --sd-z-toast:    1080;

    /* ===========================================================
       LEGACY ALIASES — map --m3-* sang shadcn
       =========================================================== */
    --m3-primary:               var(--sd-primary-bg);
    --m3-primary-hover:         var(--sd-primary-bg-hover);
    --m3-primary-pressed:       hsl(239 84% 42%);
    --m3-on-primary:            var(--sd-primary-fg);
    --m3-primary-container:     var(--sd-primary-soft);
    --m3-on-primary-container:  var(--sd-primary-bg);

    --m3-secondary:             var(--sd-muted-fg);
    --m3-on-secondary:          var(--sd-bg);

    --m3-success:               var(--sd-success-bg);
    --m3-warning:               var(--sd-warning-bg);
    --m3-danger:                var(--sd-destructive-bg);
    --m3-info:                  var(--sd-info-bg);

    --m3-success-container:     var(--sd-success-soft);
    --m3-warning-container:     var(--sd-warning-soft);
    --m3-danger-container:      var(--sd-destructive-soft);
    --m3-info-container:        var(--sd-info-soft);

    --m3-surface:               var(--sd-card-bg);
    --m3-surface-1:             var(--sd-muted-bg);
    --m3-surface-2:             var(--sd-bg);
    --m3-surface-3:             var(--sd-accent-bg);
    --m3-surface-tonal:         var(--sd-primary-soft);

    --m3-text:                  var(--sd-fg);
    --m3-text-secondary:        hsl(240 4% 35%);
    --m3-text-muted:            var(--sd-muted-fg);
    --m3-text-disabled:         hsl(240 4% 65%);
    --m3-text-on-dark:          var(--sd-bg);

    --m3-outline:               var(--sd-border-c);
    --m3-outline-strong:        var(--sd-border-strong);
    --m3-outline-focus:         hsl(239 84% 60% / 0.30);

    --m3-radius-xs:  var(--sd-radius-xs);
    --m3-radius-sm:  var(--sd-radius-sm);
    --m3-radius-md:  var(--sd-radius-md);
    --m3-radius-lg:  var(--sd-radius-lg);
    --m3-radius-xl:  var(--sd-radius-xl);
    --m3-radius-pill: var(--sd-radius-pill);

    --m3-elev-1: none;
    --m3-elev-2: var(--sd-shadow-xs);
    --m3-elev-3: var(--sd-shadow);
    --m3-elev-4: var(--sd-shadow-md);
    --m3-elev-5: var(--sd-shadow-lg);

    --m3-space-1: var(--sd-space-1);
    --m3-space-2: var(--sd-space-2);
    --m3-space-3: var(--sd-space-3);
    --m3-space-4: var(--sd-space-4);
    --m3-space-5: var(--sd-space-5);
    --m3-space-6: var(--sd-space-6);
    --m3-space-7: var(--sd-space-8);
    --m3-space-8: var(--sd-space-10);

    --m3-font-display: var(--sd-font-sans);
    --m3-font-body:    var(--sd-font-sans);
    --m3-font-mono:    var(--sd-font-mono);

    --m3-text-display-lg: var(--sd-text-3xl);
    --m3-text-headline-lg: var(--sd-text-2xl);
    --m3-text-headline-md: var(--sd-text-xl);
    --m3-text-headline-sm: var(--sd-text-lg);
    --m3-text-title-lg: var(--sd-text-md);
    --m3-text-title-md: var(--sd-text-base);
    --m3-text-title-sm: var(--sd-text-sm);
    --m3-text-body-lg: var(--sd-text-md);
    --m3-text-body-md: var(--sd-text-base);
    --m3-text-body-sm: var(--sd-text-sm);
    --m3-text-label-lg: var(--sd-text-base);
    --m3-text-label-md: var(--sd-text-sm);
    --m3-text-label-sm: var(--sd-text-xs);

    --m3-line-tight:  var(--sd-leading-tight);
    --m3-line-snug:   var(--sd-leading-snug);
    --m3-line-normal: var(--sd-leading-normal);
    --m3-line-loose:  var(--sd-leading-relaxed);

    --m3-motion-fast: var(--sd-duration-fast);
    --m3-motion-std:  var(--sd-duration);
    --m3-motion-emph: var(--sd-duration-slow);
    --m3-easing-std:  var(--sd-ease);
    --m3-easing-emph: var(--sd-ease);
    --m3-easing-decel:var(--sd-ease);

    --m3-control-h-sm: var(--sd-h-sm);
    --m3-control-h-md: var(--sd-h);
    --m3-control-h-lg: var(--sd-h-md);
    --m3-control-h-xl: var(--sd-h-lg);

    --m3-z-dropdown: var(--sd-z-dropdown);
    --m3-z-sticky:   var(--sd-z-sticky);
    --m3-z-overlay:  var(--sd-z-overlay);
    --m3-z-modal:    var(--sd-z-modal);
    --m3-z-popover:  var(--sd-z-popover);
    --m3-z-toast:    var(--sd-z-toast);

    /* === Legacy --sh-* customizer aliases === */
    --sh-brand:                hsl(var(--sd-primary));
    --sh-brand-hover:          var(--sd-primary-bg-hover);
    --sh-brand-foreground:     hsl(var(--sd-primary-foreground));
    --sh-background:           hsl(var(--sd-background));
    --sh-foreground:           hsl(var(--sd-foreground));
    --sh-card:                 hsl(var(--sd-card));
    --sh-muted:                hsl(var(--sd-muted));
    --sh-muted-foreground:     hsl(var(--sd-muted-foreground));
    --sh-border:               var(--sd-border-c);
    --sh-ring:                 hsl(var(--sd-ring));
    --sh-success:              var(--sd-success-bg);
    --sh-warning:              var(--sd-warning-bg);
    --sh-danger:               var(--sd-destructive-bg);
    --sh-info:                 var(--sd-info-bg);
}

/* === Theme presets — 20 colors ===
   Dùng :root[data-sh-preset=...] để có specificity (0,1,1,0) — cao hơn [data-theme=...] (0,1,0)
   nên preset luôn thắng dù [data-theme=light/dark] có set lại --sd-primary. */
:root[data-sh-preset="emerald"]   { --sd-primary: 161 94% 30%; --sd-ring: 161 94% 30%; --sd-primary-bg-hover: hsl(163 94% 24%); }
:root[data-sh-preset="indigo"]    { --sd-primary: 239 84% 60%; --sd-ring: 239 84% 60%; --sd-primary-bg-hover: hsl(239 84% 50%); }
:root[data-sh-preset="ocean"]     { --sd-primary: 199 89% 48%; --sd-ring: 199 89% 48%; --sd-primary-bg-hover: hsl(201 96% 32%); }
:root[data-sh-preset="sunset"]    { --sd-primary: 24 95% 53%;  --sd-ring: 24 95% 53%;  --sd-primary-bg-hover: hsl(20 91% 48%); }
:root[data-sh-preset="rose"]      { --sd-primary: 346 77% 50%; --sd-ring: 346 77% 50%; --sd-primary-bg-hover: hsl(347 77% 40%); }
:root[data-sh-preset="violet"]    { --sd-primary: 262 83% 58%; --sd-ring: 262 83% 58%; --sd-primary-bg-hover: hsl(263 70% 50%); }
:root[data-sh-preset="amber"]     { --sd-primary: 32 95% 44%;  --sd-ring: 32 95% 44%;  --sd-primary-bg-hover: hsl(26 90% 37%); }
:root[data-sh-preset="teal"]      { --sd-primary: 173 80% 36%; --sd-ring: 173 80% 36%; --sd-primary-bg-hover: hsl(175 84% 30%); }
:root[data-sh-preset="graphite"]  { --sd-primary: 240 6% 10%;  --sd-ring: 240 6% 10%;  --sd-primary-bg-hover: hsl(240 6% 16%); }
:root[data-sh-preset="blue"]      { --sd-primary: 221 83% 53%; --sd-ring: 221 83% 53%; --sd-primary-bg-hover: hsl(224 76% 45%); }
:root[data-sh-preset="cyan"]      { --sd-primary: 188 91% 42%; --sd-ring: 188 91% 42%; --sd-primary-bg-hover: hsl(192 91% 36%); }
:root[data-sh-preset="lime"]      { --sd-primary: 84 81% 44%;  --sd-ring: 84 81% 44%;  --sd-primary-bg-hover: hsl(86 85% 35%); }
:root[data-sh-preset="green"]     { --sd-primary: 142 71% 45%; --sd-ring: 142 71% 45%; --sd-primary-bg-hover: hsl(144 76% 38%); }
:root[data-sh-preset="red"]       { --sd-primary: 0 72% 51%;   --sd-ring: 0 72% 51%;   --sd-primary-bg-hover: hsl(0 75% 42%); }
:root[data-sh-preset="orange"]    { --sd-primary: 21 90% 48%;  --sd-ring: 21 90% 48%;  --sd-primary-bg-hover: hsl(17 88% 40%); }
:root[data-sh-preset="yellow"]    { --sd-primary: 45 93% 47%;  --sd-ring: 45 93% 47%;  --sd-primary-bg-hover: hsl(40 93% 40%); }
:root[data-sh-preset="pink"]      { --sd-primary: 333 71% 51%; --sd-ring: 333 71% 51%; --sd-primary-bg-hover: hsl(335 75% 42%); }
:root[data-sh-preset="fuchsia"]   { --sd-primary: 292 84% 51%; --sd-ring: 292 84% 51%; --sd-primary-bg-hover: hsl(293 88% 42%); }
:root[data-sh-preset="slate"]     { --sd-primary: 215 25% 30%; --sd-ring: 215 25% 30%; --sd-primary-bg-hover: hsl(217 28% 22%); }
:root[data-sh-preset="brown"]     { --sd-primary: 28 65% 35%;  --sd-ring: 28 65% 35%;  --sd-primary-bg-hover: hsl(28 65% 28%); }

/* === Dark mode (Linear/Vercel: zinc-900 base) === */
@media (prefers-color-scheme: dark) {
    :root {
        --sd-background:           240 10% 6%;          /* #0F0F11 */
        --sd-foreground:           0 0% 95%;
        --sd-card:                 240 6% 10%;          /* #18181B */
        --sd-card-foreground:      0 0% 95%;
        --sd-popover:              240 6% 10%;
        --sd-popover-foreground:   0 0% 95%;
        --sd-primary:              239 84% 67%;          /* indigo-400 cho dark — lighter cho contrast */
        --sd-primary-foreground:   0 0% 100%;
        --sd-secondary:            240 4% 16%;
        --sd-secondary-foreground: 0 0% 95%;
        --sd-muted:                240 4% 16%;
        --sd-muted-foreground:     240 5% 65%;
        --sd-accent:               240 4% 16%;
        --sd-accent-foreground:    0 0% 95%;
        --sd-destructive:          0 65% 50%;
        --sd-input:                240 4% 22%;
        --sd-ring:                 239 84% 67%;
        --sd-primary-bg-hover:     hsl(239 84% 76%);
        --sd-border-c:             hsl(0 0% 100% / 0.08);
        --sd-border-strong:        hsl(0 0% 100% / 0.14);
        --sd-primary-soft:         hsl(239 84% 67% / 0.18);
        --m3-text-secondary:       hsl(240 5% 80%);
        --m3-text-disabled:        hsl(240 5% 40%);
    }
}

[data-theme="dark"] {
    --sd-background:           240 10% 6%;
    --sd-foreground:           0 0% 95%;
    --sd-card:                 240 6% 10%;
    --sd-card-foreground:      0 0% 95%;
    --sd-popover:              240 6% 10%;
    --sd-popover-foreground:   0 0% 95%;
    --sd-primary:              239 84% 67%;
    --sd-secondary:            240 4% 16%;
    --sd-muted:                240 4% 16%;
    --sd-muted-foreground:     240 5% 65%;
    --sd-accent:               240 4% 16%;
    --sd-input:                240 4% 22%;
    --sd-ring:                 239 84% 67%;
    --sd-primary-bg-hover:     hsl(239 84% 76%);
    --sd-primary-soft:         hsl(239 84% 67% / 0.18);
    --sd-border-c:             hsl(0 0% 100% / 0.08);
    --sd-border-strong:        hsl(0 0% 100% / 0.14);
}

[data-theme="light"] {
    --sd-background:           0 0% 99.2%;
    --sd-foreground:           240 6% 10%;
    --sd-card:                 0 0% 100%;
    --sd-primary:              239 84% 60%;
    --sd-ring:                 239 84% 60%;
    --sd-primary-bg-hover:     hsl(239 84% 50%);
    --sd-primary-soft:         hsl(239 84% 60% / 0.10);
    --sd-border-c:             hsl(240 5% 10% / 0.06);
}