/* ============================================================================
   ILM DESIGN TOKENS — single source of truth
   Neutral enterprise palette, one accent, no chrome gradients.
   ============================================================================ */

:root {
    /* ---- Brand accent (single hue, used sparingly) ---- */
    --primary-blue:          #2563eb;
    --primary-blue-dark:     #1d4ed8;
    --primary-blue-light:    #3b82f6;
    --primary-blue-lighter:  #dbeafe;
    --primary-blue-rgb:      37, 99, 235;

    /* Legacy aliases kept for templates that still reference them.
       Mapped to neutral / single accent so nothing renders purple. */
    --accent-purple:         #2563eb;
    --secondary-purple:      #1d4ed8;
    --accent-teal:           #0d9488;
    --accent-orange:         #ea580c;

    /* ---- Neutral scale (Tailwind slate) ---- */
    --neutral-50:   #f8fafc;
    --neutral-100:  #f1f5f9;
    --neutral-200:  #e2e8f0;
    --neutral-300:  #cbd5e1;
    --neutral-400:  #94a3b8;
    --neutral-500:  #64748b;
    --neutral-600:  #475569;
    --neutral-700:  #334155;
    --neutral-800:  #1e293b;
    --neutral-900:  #0f172a;
    --neutral-950:  #020617;

    /* ---- Status (flat, single-hue) ---- */
    --success:  #16a34a;
    --warning:  #d97706;
    --error:    #dc2626;
    --info:     #2563eb;

    /* ---- Corporate brand accent ----
       Used only for the corporate wordmark, never for UI chrome.
       White-label deployments can override these. */
    --corp-brand:         #3b82f6;
    --corp-brand-dark:    #2563eb;

    /* ---- Radius ---- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   8px;
    --radius-xl:   12px;
    --radius-2xl:  16px;

    /* ---- Spacing (4-pt grid) ---- */
    --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;

    /* ---- Typography ---- */
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;

    --text-xs:    12px;
    --text-sm:    14px;
    --text-base:  15px;
    --text-md:    16px;
    --text-lg:    20px;
    --text-xl:    24px;
    --text-2xl:   30px;

    --leading-tight:  1.25;
    --leading-normal: 1.5;

    /* ---- Motion ---- */
    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Layout ---- */
    --header-height:        56px;
    --sidebar-width:        240px;
    --sidebar-collapsed:    64px;
    --z-header:             100;
    --z-sidebar:            90;
    --z-dropdown:           200;
    --z-modal:              1000;
}

/* ============================================================================
   LIGHT THEME (default)
   ============================================================================ */
:root,
:root[data-theme="light"] {
    /* Surfaces */
    --surface-bg:        var(--neutral-50);
    --surface-elevated:  #ffffff;
    --surface-sunken:    var(--neutral-100);
    --surface-hover:     var(--neutral-100);

    /* Compatibility aliases used by existing templates */
    --bg-primary:        var(--neutral-50);
    --bg-secondary:      #ffffff;
    --bg-tertiary:       var(--neutral-100);
    --bg-card:           #ffffff;
    --card-bg:           #ffffff;
    --bg-header:         #ffffff;
    --bg-sidebar:        #ffffff;
    --bg-hover:          var(--neutral-100);

    /* Text */
    --text-primary:    var(--neutral-900);
    --text-secondary:  var(--neutral-700);
    --text-tertiary:   var(--neutral-500);
    --text-muted:      var(--neutral-400);
    --text-on-card:    var(--neutral-900);
    --text-on-accent:  #ffffff;

    /* Borders */
    --border-subtle:   var(--neutral-200);
    --border-default:  var(--neutral-300);
    --border-strong:   var(--neutral-400);
    /* aliases */
    --border-primary:  var(--neutral-200);
    --border-secondary:var(--neutral-100);
    --border-card:     var(--neutral-200);
    --border-color:    var(--neutral-200);

    /* Inputs */
    --input-bg:          #ffffff;
    --input-border:      var(--neutral-300);
    --input-focus-bg:    #ffffff;
    --focus-ring:        rgba(37, 99, 235, 0.20);

    /* Tables */
    --table-row-even:   #ffffff;
    --table-row-odd:    var(--neutral-50);
    --table-row-hover:  rgba(37, 99, 235, 0.06);

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-md:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-lg:  0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-xl:  0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-2xl: 0 24px 48px rgba(15, 23, 42, 0.16);

    color-scheme: light;
}

/* ============================================================================
   DARK THEME — quiet, professional, low-eye-strain
   ============================================================================ */
:root[data-theme="dark"] {
    /* Surfaces */
    --surface-bg:        #0b1220;
    --surface-elevated:  #111827;
    --surface-sunken:    #060a14;
    --surface-hover:     #1f2937;

    --bg-primary:        #0b1220;
    --bg-secondary:      #111827;
    --bg-tertiary:       #1f2937;
    --bg-card:           #111827;
    --card-bg:           #111827;
    --bg-header:         #0f172a;
    --bg-sidebar:        #0f172a;
    --bg-hover:          #1f2937;

    /* Text */
    --text-primary:    #f1f5f9;
    --text-secondary:  #cbd5e1;
    --text-tertiary:   #94a3b8;
    --text-muted:      #64748b;
    --text-on-card:    #f1f5f9;
    --text-on-accent:  #ffffff;

    /* Borders */
    --border-subtle:   #1f2937;
    --border-default:  #334155;
    --border-strong:   #475569;
    --border-primary:  #1f2937;
    --border-secondary:#111827;
    --border-card:     #1f2937;
    --border-color:    #1f2937;

    /* Inputs */
    --input-bg:          #0f172a;
    --input-border:      #334155;
    --input-focus-bg:    #0f172a;
    --focus-ring:        rgba(59, 130, 246, 0.30);

    /* Tables */
    --table-row-even:   #111827;
    --table-row-odd:    #0f172a;
    --table-row-hover:  rgba(59, 130, 246, 0.10);

    /* Accent gets slight lift in dark mode for better contrast */
    --primary-blue:        #3b82f6;
    --primary-blue-dark:   #2563eb;
    --primary-blue-light:  #60a5fa;
    --primary-blue-rgb:    59, 130, 246;
    --accent-purple:       #3b82f6;
    --secondary-purple:    #2563eb;

    /* Shadows — softer, deeper */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-xl:  0 12px 24px rgba(0, 0, 0, 0.50);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.60);

    color-scheme: dark;
}