/* ═══════════════════════════════════════════════════════════
   icBIM · Design System — CSS Custom Properties
   Precision Instrument aesthetic: deep navy × electric cyan
   ═══════════════════════════════════════════════════════════ */

/* ─── Dark Theme (default) ─────────────────────────────── */
:root {
  /* Backgrounds — deep midnight navy, not pure black */
  --bg-deep:     #07090f;   /* App shell base         */
  --bg-base:     #0c0f1a;   /* Main background        */
  --bg-surface:  #11152280; /* Panel fills            */
  --bg-panel:    #111522;   /* Panel solid            */
  --bg-raised:   #171d2e;   /* Cards, inputs          */
  --bg-hover:    #1c2338;   /* Hover state            */
  --bg-active:   #222a44;   /* Active / pressed       */
  --bg-selected: #263255;   /* Selected item          */

  /* Borders */
  --bd-dim:    rgba(130, 150, 220, 0.05);
  --bd-subtle: rgba(130, 150, 220, 0.09);
  --bd:        rgba(130, 150, 220, 0.14);
  --bd-strong: rgba(130, 150, 220, 0.26);
  --bd-focus:  rgba(34, 211, 238, 0.55);

  /* Text */
  --tx-primary:   #dde2f4;
  --tx-secondary: #6b7499;
  --tx-muted:     #3d4465;
  --tx-disabled:  #252d48;
  --tx-inverse:   #07090f;
  --tx-on-accent: #ffffff;

  /* Accent — electric cyan (IFC viewer identity) */
  --accent:         #22d3ee;
  --accent-h:       #45dff3;   /* hover  */
  --accent-a:       #0fb8d4;   /* active */
  --accent-subtle:  rgba(34, 211, 238, 0.10);
  --accent-dim:     rgba(34, 211, 238, 0.05);
  --accent-glow:    0 0 16px rgba(34, 211, 238, 0.28);

  /* Module accent — amber (Planon identity) */
  --mod:         #f59e0b;
  --mod-h:       #fbbf24;
  --mod-subtle:  rgba(245, 158, 11, 0.11);

  /* Semantic */
  --success:        #10b981;
  --success-subtle: rgba(16, 185, 129, 0.10);
  --warning:        #f59e0b;
  --warning-subtle: rgba(245, 158, 11, 0.10);
  --error:          #ef4444;
  --error-subtle:   rgba(239, 68, 68, 0.10);
  --info:           #3b82f6;
  --info-subtle:    rgba(59, 130, 246, 0.10);

  /* Shadows */
  --sh-sm:     0 1px 3px rgba(0, 0, 0, 0.55);
  --sh-md:     0 4px 16px rgba(0, 0, 0, 0.65);
  --sh-lg:     0 8px 32px rgba(0, 0, 0, 0.75);
  --sh-xl:     0 20px 60px rgba(0, 0, 0, 0.80);
  --sh-panel:  4px 0 24px rgba(0, 0, 0, 0.50);
  --sh-drawer: 8px 0 48px rgba(0, 0, 0, 0.70);
  --sh-float:  0 4px 20px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(130,150,220,0.10);

  /* Overlays & Backdrops */
  --overlay-bg:   rgba(7, 9, 15, 0.75);
  --overlay-heavy: rgba(7, 9, 15, 0.88);
  --backdrop-bg:  rgba(7, 9, 15, 0.50);

  /* Toast backgrounds */
  --toast-bg-success: #0f2a1a;
  --toast-bg-error:   #2a0f0f;
  --toast-bg-warning: #2a200f;
  --toast-bg-info:    #0f1a2a;

  /* Glass / frosted surfaces */
  --bg-glass: rgba(23, 29, 46, 0.88);

  /* Ambient glow */
  --ambient-glow:
    radial-gradient(ellipse 70% 50% at 20% -10%, rgba(34, 211, 238, 0.028) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 100%,  rgba(34,  80, 220, 0.03) 0%, transparent 50%);

  /* ─── Layout dims ─────────────────────────────── */
  --topbar-h:    44px;
  --rail-w:      44px;
  --lpanel-w:    280px;
  --rpanel-w:    292px;
  --drawer-w:    384px;
  --drawer-lg-w: 700px;

  /* ─── Typography ──────────────────────────────── */
  --font:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  --tx-2xs:  10px;
  --tx-xs:   11px;
  --tx-sm:   12px;
  --tx-base: 13px;
  --tx-md:   14px;
  --tx-lg:   16px;
  --tx-xl:   20px;

  /* ─── Spacing ─────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px;
  --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px;

  /* ─── Radius ──────────────────────────────────── */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   9px;
  --r-xl:   13px;
  --r-full: 9999px;

  /* ─── Transitions ─────────────────────────────── */
  --t-fast:   80ms ease;
  --t-base:   140ms ease;
  --t-slow:   220ms ease;
  --t-panel:  210ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-drawer: 270ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Light Theme ─────────────────────────────────────── */
[data-theme="light"] {
  --bg-deep:     #d8deee;
  --bg-base:     #e5e9f6;
  --bg-surface:  rgba(240, 243, 255, 0.85);
  --bg-panel:    #f0f3ff;
  --bg-raised:   #ffffff;
  --bg-hover:    #eaecfa;
  --bg-active:   #dfe3f8;
  --bg-selected: #d2d8f5;

  --bd-dim:    rgba(40, 55, 130, 0.05);
  --bd-subtle: rgba(40, 55, 130, 0.08);
  --bd:        rgba(40, 55, 130, 0.13);
  --bd-strong: rgba(40, 55, 130, 0.24);
  --bd-focus:  rgba(8, 145, 178, 0.55);

  --tx-primary:   #101426;
  --tx-secondary: #48527e;
  --tx-muted:     #8890b8;
  --tx-disabled:  #bcc2dc;
  --tx-inverse:   #ffffff;

  --accent:        #0891b2;
  --accent-h:      #0e7490;
  --accent-a:      #0c6882;
  --accent-subtle: rgba(8, 145, 178, 0.09);
  --accent-dim:    rgba(8, 145, 178, 0.04);
  --accent-glow:   0 0 14px rgba(8, 145, 178, 0.20);

  --mod:        #d97706;
  --mod-h:      #b45309;
  --mod-subtle: rgba(217, 119, 6, 0.09);

  --success: #059669;
  --warning: #d97706;
  --error:   #dc2626;
  --info:    #2563eb;

  --sh-sm:     0 1px 2px rgba(0,0,0,0.07);
  --sh-md:     0 3px 12px rgba(0,0,0,0.09);
  --sh-lg:     0 6px 24px rgba(0,0,0,0.11);
  --sh-xl:     0 14px 48px rgba(0,0,0,0.13);
  --sh-panel:  3px 0 16px rgba(0,0,0,0.07);
  --sh-drawer: 6px 0 32px rgba(0,0,0,0.12);
  --sh-float:  0 4px 16px rgba(0,0,0,0.10), 0 0 0 1px rgba(40,55,130,0.10);

  --overlay-bg:   rgba(30, 35, 70, 0.40);
  --overlay-heavy: rgba(30, 35, 70, 0.60);
  --backdrop-bg:  rgba(30, 35, 70, 0.25);

  --toast-bg-success: #f0fdf4;
  --toast-bg-error:   #fef2f2;
  --toast-bg-warning: #fffbeb;
  --toast-bg-info:    #eff6ff;

  --ambient-glow:
    radial-gradient(ellipse 70% 50% at 20% -10%, rgba(8, 145, 178, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 90% 100%,  rgba(40, 55, 130, 0.03) 0%, transparent 50%);

  --bg-glass: rgba(255, 255, 255, 0.92);
}

/* ─── Theme toggle icon visibility (CSS-driven) ─────────── */
[data-theme="dark"]  .icon-light,
:root                .icon-light  { display: none; }
[data-theme="dark"]  .icon-dark,
:root                .icon-dark   { display: block; }
[data-theme="light"] .icon-light  { display: block; }
[data-theme="light"] .icon-dark   { display: none; }

/* ─── Smooth theme transition ────────────────────────────── */
html {
  color-scheme: dark;
  transition: background 0.2s ease, color 0.2s ease;
}
[data-theme="light"] { color-scheme: light; }