/* ==========================================================================
   Shondalai Template - Design Tokens
   Swiss-minimal design system with light/dark theme support
   ========================================================================== */

:root {
    /* ── Color: Neutral ── */
    --sh-neutral-25:  #fcfcfd;
    --sh-neutral-50:  #f8f9fa;
    --sh-neutral-100: #f1f3f5;
    --sh-neutral-200: #e9ecef;
    --sh-neutral-300: #dee2e6;
    --sh-neutral-400: #ced4da;
    --sh-neutral-500: #adb5bd;
    --sh-neutral-600: #868e96;
    --sh-neutral-700: #495057;
    --sh-neutral-800: #343a40;
    --sh-neutral-900: #212529;
    --sh-neutral-950: #0d1117;

    /* ── Color: Primary (configurable via layout builder) ── */
    --sh-color-primary: #0f172a;
    --sh-color-primary-hover: #1e293b;
    --sh-color-primary-hsl: 222 47% 11%;
    --sh-color-accent:  #2563eb;
    --sh-color-accent-hsl: 217 91% 53%;

    /* ── Color: Status ── */
    --sh-color-success: #16a34a;
    --sh-color-success-hsl: 142 72% 37%;
    --sh-color-warning: #d97706;
    --sh-color-warning-hsl: 32 95% 44%;
    --sh-color-danger:  #dc2626;
    --sh-color-danger-hsl: 0 84% 50%;
    --sh-color-error:   #dc2626;
    --sh-color-info:    #0284c7;
    --sh-color-info-hsl: 200 98% 39%;

    /* ── Typography ── */
    --sh-font-family:         system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --sh-font-family-heading: var(--sh-font-family);
    --sh-font-family-mono:    'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

    --sh-font-size-xs:   0.75rem;
    --sh-font-size-sm:   0.8125rem;
    --sh-font-size-base: 1rem;
    --sh-font-size-md:   1.125rem;
    --sh-font-size-lg:   1.25rem;
    --sh-font-size-xl:   1.5rem;
    --sh-font-size-2xl:  1.875rem;
    --sh-font-size-3xl:  2.25rem;
    --sh-font-size-4xl:  3rem;

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

    --sh-line-height-tight:  1.25;
    --sh-line-height-normal: 1.5;
    --sh-line-height-loose:  1.75;

    /* ── Spacing (4px grid) ── */
    --sh-space-0:   0;
    --sh-space-1:   0.25rem;
    --sh-space-2:   0.5rem;
    --sh-space-3:   0.75rem;
    --sh-space-4:   1rem;
    --sh-space-5:   1.25rem;
    --sh-space-6:   1.5rem;
    --sh-space-8:   2rem;
    --sh-space-10:  2.5rem;
    --sh-space-12:  3rem;
    --sh-space-16:  4rem;
    --sh-space-20:  5rem;

    /* ── Layout ── */
    --sh-container-max-width:  1280px;
    --sh-container-narrow:     960px;
    --sh-container-wide:       1400px;
    --sh-container-padding:    1.5rem;
    --sh-sidebar-width:        280px;
    --sh-header-height:        64px;

    /* ── Border ── */
    --sh-radius:    6px;
    --sh-radius-sm: 4px;
    --sh-radius-lg: 12px;
    --sh-radius-xl: 16px;
    --sh-radius-full: 9999px;

    /* ── Transition ── */
    --sh-transition-fast:   150ms ease;
    --sh-transition-normal: 200ms ease;
    --sh-transition-slow:   300ms ease;

    /* ── Z-index ── */
    --sh-z-dropdown:  100;
    --sh-z-sticky:    200;
    --sh-z-overlay:   300;
    --sh-z-offcanvas: 400;
    --sh-z-modal:     500;
    --sh-z-tooltip:   600;
}

/* ── Light Theme (default) ── */
:root,
[data-sh-theme="light"] {
    --sh-bg:            #ffffff;
    --sh-bg-subtle:     var(--sh-neutral-50);
    --sh-bg-muted:      var(--sh-neutral-100);
    --sh-bg-raised:     #ffffff;

    --sh-text:          var(--sh-neutral-900);
    --sh-text-secondary: var(--sh-neutral-600);
    --sh-text-muted:    var(--sh-neutral-500);
    --sh-text-inverse:  #ffffff;

    --sh-border:        var(--sh-neutral-200);
    --sh-border-strong: var(--sh-neutral-300);

    --sh-shadow-xs:  0 1px 2px rgba(0,0,0,.04);
    --sh-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --sh-shadow-md:  0 4px 6px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.04);
    --sh-shadow-lg:  0 10px 15px rgba(0,0,0,.05), 0 4px 6px rgba(0,0,0,.03);
    --sh-shadow-xl:  0 20px 25px rgba(0,0,0,.06), 0 8px 10px rgba(0,0,0,.03);

    --sh-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Dark Theme ── */
[data-sh-theme="dark"] {
    --sh-bg:            var(--sh-neutral-950);
    --sh-bg-subtle:     #161b22;
    --sh-bg-muted:      #1c2128;
    --sh-bg-raised:     #1c2128;

    --sh-text:          var(--sh-neutral-100);
    --sh-text-secondary: var(--sh-neutral-400);
    --sh-text-muted:    var(--sh-neutral-500);
    --sh-text-inverse:  var(--sh-neutral-900);

    --sh-border:        #30363d;
    --sh-border-strong: #484f58;

    --sh-shadow-xs:  0 1px 2px rgba(0,0,0,.2);
    --sh-shadow-sm:  0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
    --sh-shadow-md:  0 4px 6px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.2);
    --sh-shadow-lg:  0 10px 15px rgba(0,0,0,.3), 0 4px 6px rgba(0,0,0,.2);
    --sh-shadow-xl:  0 20px 25px rgba(0,0,0,.35), 0 8px 10px rgba(0,0,0,.2);

    --sh-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
}