@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── DESIGN TOKENS — LIGHT THEME (default) ── */
:root {
  /* Backgrounds */
  --bg:         #f0f2f5;
  --surface:    #ffffff;
  --panel:      #f0f2f5;
  --raised:     #e4e8ef;
  --hover-bg:   rgba(0,0,0,0.03);

  /* Borders */
  --border:     #dce1ea;
  --border-md:  #c4ccd8;
  --border-dk:  #b8c0cc;

  /* Surface steps */
  --surface-alt: #edf0f5;

  /* Radius */
  --radius-sm:   4px;   /* small: badges, chips, inline tags */
  --radius:      6px;   /* default: buttons, inputs, cards, panels */
  --radius-lg:   10px;  /* large: modals, drawers, bigger panels */
  --radius-pill: 999px; /* pill: account chip, toggle pills */

  /* Text */
  --text:       #151516;
  --text2:      #4a5568;
  --muted:      #8896a8;

  /* Accent */
  --accent:     #0095ff;
  --accent2:    #0080dd;
  --accent-soft: rgba(0,149,255,0.08);

  /* Semantic */
  --success:    #059669;
  --success-soft: rgba(5,150,105,0.1);
  --success-border: rgba(16,185,129,0.18);
  --success-border-strong: rgba(16,185,129,0.25);
  --error:      #c62828;
  --error-soft: rgba(198,40,40,0.08);
  --error-border: rgba(239,68,68,0.25);
  --error-border-soft: rgba(239,68,68,0.2);
  --warning:    #f59e0b;
  --warning-soft: rgba(245,158,11,0.1);
  --warning-bg-soft: rgba(245,158,11,0.09);
  --warning-border: rgba(245,158,11,0.35);
  --warning-border-strong: rgba(245,158,11,0.3);
  --warning-border-soft: rgba(245,158,11,0.25);
  --error-border-strong: rgba(239,68,68,0.5);

  /* Accent (extra) */
  --accent-bg-soft:   rgba(0,149,255,0.12);
  --accent-bg-soft-2: rgba(0,149,255,0.15);
  --accent-bg-tint:   rgba(0,149,255,0.05);
  --accent-bg-input:  rgba(0,149,255,0.04);
  --accent-border:    rgba(0,149,255,0.25);
  --accent-border-strong: rgba(0,149,255,0.35);
  --accent-glow:      0 0 30px rgba(0,149,255,0.08);
  --accent-focus-ring: 0 0 0 3px rgba(0,149,255,0.1);
  --error-text-on-soft: #c62828;
  --warning-text-on-soft: #b45309;
  --shadow-xs-border: 0 1px 3px rgba(0,0,0,0.1);

  /* Dashboard revenue chart tokens */
  --chart-axis:         rgba(0,0,0,0.08);
  --chart-tooltip-bg:   #ffffff;
  --chart-tooltip-fg:   #151516;

  /* Toast / sd-modal tokens (authenticated pages only) */
  --toast-shadow:    0 8px 24px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  --toast-ok-bg:     #10b981;
  --toast-ok-fg:     #fff;
  --toast-err-bg:    #ef4444;
  --toast-err-fg:    #fff;
  --toast-warn-bg:   #f59e0b;
  --toast-warn-fg:   #1a1d27;
  --toast-info-bg:   #0095ff;
  --toast-info-fg:   #fff;
  --sd-modal-bg:        #ffffff;
  --sd-modal-border:    rgba(0,0,0,0.08);
  --sd-modal-shadow:    0 24px 60px rgba(0,0,0,0.18);
  --sd-modal-text:      #1a1d27;
  --sd-modal-title:     #0b0d12;
  --sd-modal-msg:       #4a5568;
  --sd-cancel-fg:       #64748b;
  --sd-cancel-border:   rgba(0,0,0,0.12);
  --sd-cancel-hover-bg: rgba(0,0,0,0.04);
  --sd-primary-hover:   #0080e0;
  --sd-danger-bg:       #ef4444;
  --sd-danger-hover:    #dc2626;
  --sd-form-input-bg:   #f6f7f9;
  --sd-pill-border:     rgba(0,0,0,0.14);
  --sd-pill-fg:         #475569;
  --sd-success-fg:      #10b981;
  --sd-code-fg:         #0095ff;

  /* Super-admin specific (uses app.css tokens on superadmin-themed pages) */
  --sa-err-bg:            #0f1117;
  --sa-err-fg:            #fff;
  --sa-err-sub:           #666;
  --sa-badge-gradient:    linear-gradient(135deg, var(--accent), #6366f1);
  --sa-badge-fg:          #fff;
  --sa-violet:            #8b5cf6;
  --sa-violet-bg:         rgba(139,92,246,0.12);
  --sa-violet-border:     rgba(139,92,246,0.3);
  --sa-violet-soft:       rgba(139,92,246,0.06);
  --sa-preview-bg:        #f4f6f8;
  --sa-preview-email-bg:  #fff;
  --sa-ws-danger-bg:      rgba(239,68,68,0.08);
  --sa-ws-danger-fg:      #fca5a5;
  --sa-ws-danger-border:  rgba(239,68,68,0.3);
  --sa-ws-danger-outline: rgba(239,68,68,0.45);
  --sa-ws-danger-inset:   rgba(239,68,68,0.15);
  --sa-ticket-new-bg:     rgba(239,68,68,0.12);
  --sa-ticket-replied-bg: rgba(245,158,11,0.12);
  --sa-ticket-closed-bg:  rgba(16,185,129,0.12);
  --sa-ticket-num-bg:     rgba(0,149,255,0.1);
  --sa-code-bg-opaque:    rgba(0,0,0,0.25);
  --sa-flash-bg:          rgba(0,149,255,0.25);
  --sa-shadow-tab:        0 1px 3px rgba(0,0,0,0.08);
  --sa-shadow-card-hover: 0 4px 16px rgba(0,0,0,0.08);
  --sa-storage-heavy-bg:  rgba(245,158,11,0.06);
  --sa-storage-warn-bg:   rgba(245,158,11,0.08);
  --sa-storage-warn-border: rgba(245,158,11,0.3);
  --sa-storage-expired-fg: #ef4444;
  --sa-storage-saved-fg:  #22c55e;
  --sa-storage-purge-bg:  rgba(239,68,68,0.06);
  --sa-storage-purge-border: rgba(239,68,68,0.25);
  --sa-storage-purge-h4:  #ef4444;
  --sa-storage-err-bg:    rgba(239,68,68,0.08);
  --sa-storage-err-border: rgba(239,68,68,0.3);
  --sa-storage-err-fg:    #ef8080;

  /* Auth violet (plan team badge) */
  --auth-violet:           #8b5cf6;
  --auth-violet-fg:        #a78bfa;
  --auth-violet-soft:      rgba(139,92,246,0.04);
  --auth-violet-bg-soft:   rgba(139,92,246,0.15);
  --auth-violet-border:    rgba(139,92,246,0.35);

  /* Shadows (extra) */
  --shadow-auth-card: 0 24px 64px rgba(0,0,0,0.5);

  /* Edge types */
  --fin:        #2979ff;
  --seam:       #ef4444;
  --cut:        #f97316;
  --miter:      #8b5cf6;
  --ref:        #6b7280;
  --lam:        #c8850a;

  /* Canvas */
  --canvas-bg:       #eef1f6;
  --canvas-grid:     rgba(44,95,46,0.14);
  --canvas-grid-mid: rgba(0,0,0,0.06);
  --canvas-grid-fine: rgba(0,0,0,0.03);
  --canvas-ruler-bg: #f9f7f0;
  --canvas-ruler-alt: #ede9dc;
  --canvas-ruler-corner: #1e2a3a;

  /* Header */
  --hdr-bg:     #0d0e14;
  --hdr-text:   rgba(255,255,255,0.82);
  --hdr-muted:  rgba(255,255,255,0.45);
  --hdr-border: rgba(255,255,255,0.08);
  --hdr-hover:  rgba(255,255,255,0.12);

  /* App header height = shared .sd-topbar (56px) + canvas hrow-2 file-tools
     (34px). The fixed canvas views (Yard / 3D / Bid overlays) offset their top
     by this so they sit flush below the header. ONE source of truth — bump here
     if the header height changes. (Mobile / immersive override per-context.) */
  --sd-app-header-h: 90px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.15);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.25);
  --shadow-modal-lg: 0 24px 64px rgba(0,0,0,0.35);

  /* Modal overlay */
  --overlay:    rgba(0,0,0,0.45);
  --overlay-strong: rgba(0,0,0,0.55);

  /* Danger button surfaces */
  --danger-bg:        rgba(239,68,68,0.08);
  --danger-bg-hover:  rgba(239,68,68,0.16);
  --danger-border:    rgba(239,68,68,0.2);

  /* Solid-button foreground (white on accent/error/success button surfaces) */
  --on-accent: #fff;

  /* ── Status pill identity tokens (bg + fg) ── */
  --status-draft-bg:     rgba(148,163,184,0.12);
  --status-draft-fg:     #94a3b8;
  --status-estimate-bg:  rgba(245,158,11,0.15);
  --status-estimate-fg:  #fbbf24;
  --status-accepted-bg:  rgba(16,185,129,0.15);
  --status-accepted-fg:  #34d399;
  --status-invoiced-bg:  rgba(59,130,246,0.15);
  --status-invoiced-fg:  #93c5fd;
  --status-invsent-bg:   rgba(6,182,212,0.15);
  --status-invsent-fg:   #67e8f9;
  --status-deposit-bg:   rgba(217,119,6,0.18);
  --status-deposit-fg:   #fcd34d;
  --status-complete-bg:  rgba(139,92,246,0.15);
  --status-complete-fg:  #c4b5fd;
  --status-onhold-bg:    rgba(148,163,184,0.1);
  --status-onhold-fg:    #94a3b8;
  --status-followup-bg:  rgba(244,63,94,0.14);
  --status-followup-fg:  #fb7185;
  --status-cancelled-bg: rgba(239,68,68,0.12);
  --status-cancelled-fg: #f87171;
  --status-custom-bg:    rgba(139,92,246,0.12);
  --status-custom-fg:    #a78bfa;
  --status-paid-bg:      rgba(16,185,129,0.2);
  --status-paid-fg:      #6ee7b7;

  /* ── Status pill border tokens (for outlined .ip-st-* pills) ── */
  --status-draft-border:     rgba(148,163,184,0.3);
  --status-estimate-border:  rgba(245,158,11,0.4);
  --status-accepted-border:  rgba(16,185,129,0.4);
  --status-invoiced-border:  rgba(59,130,246,0.4);
  --status-invsent-border:   rgba(6,182,212,0.4);
  --status-deposit-border:   rgba(217,119,6,0.45);
  --status-paid-border:      rgba(16,185,129,0.45);
  --status-onhold-border:    rgba(148,163,184,0.2);
  --status-followup-border:  rgba(244,63,94,0.3);
  --status-cancelled-border: rgba(239,68,68,0.3);
  --status-custom-border:    rgba(100,116,139,0.25);

  /* ── Kanban column identity stripes (border-left-color) ── */
  --kanban-draft:     #94a3b8;
  --kanban-estimate:  #f59e0b;
  --kanban-accepted:  #10b981;
  --kanban-invoiced:  #3b82f6;
  --kanban-invsent:   #06b6d4;
  --kanban-deposit:   #d97706;
  --kanban-complete:  #8b5cf6;
  --kanban-onhold:    #94a3b8;
  --kanban-followup:  #f43f5e;
  --kanban-cancelled: #ef4444;
  --kanban-custom:    #8b5cf6;

  /* ── Priority pill tokens ── */
  --priority-low-bg:     rgba(148,163,184,0.12);
  --priority-low-fg:     #94a3b8;
  --priority-medium-bg:  rgba(245,158,11,0.15);
  --priority-medium-fg:  #fbbf24;
  --priority-high-bg:    rgba(239,68,68,0.15);
  --priority-high-fg:    #f87171;

  /* ── Badge tokens ── */
  --badge-repeat-bg:     rgba(139,92,246,0.12);
  --badge-repeat-fg:     #7c3aed;
  --badge-archive-bg:    rgba(148,163,184,0.12);
  --badge-archive-fg:    #94a3b8;
  --badge-archive-toggle-bg: rgba(100,116,139,0.15);

  /* ── Upsell / pro-lock gradient accent ── */
  --pro-gradient-start:  #0095ff;
  --pro-gradient-end:    #6366f1;
  --free-banner-mix:     rgba(99,102,241,0.07);
  --upgrade-modal-bg:    #1e2538;
  --upgrade-modal-backdrop: rgba(0,0,0,0.45);
  --upgrade-modal-shadow: 0 20px 60px rgba(0,0,0,0.6);

  /* ── Component semantic tokens (tokenization pass) ── */
  /* Black overlays / shadows (alpha steps) */
  --black-a02:  rgba(0,0,0,0.02);
  --black-a03:  rgba(0,0,0,0.03);
  --black-a04:  rgba(0,0,0,0.04);
  --black-a05:  rgba(0,0,0,0.05);
  --black-a06:  rgba(0,0,0,0.06);
  --black-a08:  rgba(0,0,0,0.08);
  --black-a10:  rgba(0,0,0,0.10);
  --black-a12:  rgba(0,0,0,0.12);
  --black-a15:  rgba(0,0,0,0.15);
  --black-a18:  rgba(0,0,0,0.18);
  --black-a25:  rgba(0,0,0,0.25);
  --black-a30:  rgba(0,0,0,0.30);
  --black-a35:  rgba(0,0,0,0.35);
  --black-a40:  rgba(0,0,0,0.40);
  --black-a42:  rgba(0,0,0,0.42);
  --black-a45:  rgba(0,0,0,0.45);
  --black-a50:  rgba(0,0,0,0.50);
  --black-a55:  rgba(0,0,0,0.55);
  --black-a60:  rgba(0,0,0,0.60);
  --black-a65:  rgba(0,0,0,0.65);
  --black-a70:  rgba(0,0,0,0.70);
  --black-a72:  rgba(0,0,0,0.72);
  --black-a80:  rgba(0,0,0,0.80);
  --black-a92:  rgba(10,14,24,0.92);
  /* White overlays (alpha steps on dark surfaces) */
  --white-a03:  rgba(255,255,255,0.03);
  --white-a06:  rgba(255,255,255,0.06);
  --white-a08:  rgba(255,255,255,0.08);
  --white-a10:  rgba(255,255,255,0.10);
  --white-a12:  rgba(255,255,255,0.12);
  --white-a18:  rgba(255,255,255,0.18);
  --white-a20:  rgba(255,255,255,0.20);
  --white-a28:  rgba(255,255,255,0.28);
  --white-a35:  rgba(255,255,255,0.35);
  --white-a40:  rgba(255,255,255,0.40);
  --white-a45:  rgba(255,255,255,0.45);
  --white-a50:  rgba(255,255,255,0.50);
  --white-a55:  rgba(255,255,255,0.55);
  --white-a70:  rgba(255,255,255,0.70);
  --white-a80:  rgba(255,255,255,0.80);
  --white-a85:  rgba(255,255,255,0.85);
  --white-a90:  rgba(255,255,255,0.90);
  --white-a92:  rgba(255,255,255,0.92);
  /* Accent-blue alpha family (site primary 0,149,255) */
  --accent-a04: rgba(0,149,255,0.04);
  --accent-a05: rgba(0,149,255,0.05);
  --accent-a06: rgba(0,149,255,0.06);
  --accent-a07: rgba(0,149,255,0.07);
  --accent-a08: rgba(0,149,255,0.08);
  --accent-a10: rgba(0,149,255,0.10);
  --accent-a12: rgba(0,149,255,0.12);
  --accent-a13: rgba(0,149,255,0.13);
  --accent-a14: rgba(0,149,255,0.14);
  --accent-a15: rgba(0,149,255,0.15);
  --accent-a16: rgba(0,149,255,0.16);
  --accent-a18: rgba(0,149,255,0.18);
  --accent-a20: rgba(0,149,255,0.20);
  --accent-a22: rgba(0,149,255,0.22);
  --accent-a25: rgba(0,149,255,0.25);
  --accent-a28: rgba(0,149,255,0.28);
  --accent-a30: rgba(0,149,255,0.30);
  --accent-a32: rgba(0,149,255,0.32);
  --accent-a35: rgba(0,149,255,0.35);
  --accent-a40: rgba(0,149,255,0.40);
  --accent-a45: rgba(0,149,255,0.45);
  --accent-a50: rgba(0,149,255,0.50);
  --accent-a55: rgba(0,149,255,0.55);
  --accent-a85: rgba(0,149,255,0.85);
  --accent-alt: #0080dd;
  /* Error-red alpha family (brick 198,40,40) */
  --error-a04:  rgba(198,40,40,0.04);
  --error-a05:  rgba(198,40,40,0.05);
  --error-a06:  rgba(198,40,40,0.06);
  --error-a08:  rgba(198,40,40,0.08);
  --error-a10:  rgba(198,40,40,0.10);
  --error-a12:  rgba(198,40,40,0.12);
  --error-a18:  rgba(198,40,40,0.18);
  --error-a20:  rgba(198,40,40,0.20);
  --error-a30:  rgba(198,40,40,0.30);
  --error-a35:  rgba(198,40,40,0.35);
  --error-a40:  rgba(198,40,40,0.40);
  /* Danger (220,38,38) */
  --danger-a07: rgba(220,38,38,0.07);
  --danger-a10: rgba(220,38,38,0.10);
  --danger-a25: rgba(220,38,38,0.25);
  --danger-a30: rgba(220,38,38,0.30);
  /* Success (5,150,105) */
  --success-a07: rgba(5,150,105,0.07);
  --success-a08: rgba(5,150,105,0.08);
  --success-a10: rgba(5,150,105,0.10);
  --success-a12: rgba(5,150,105,0.12);
  --success-a15: rgba(5,150,105,0.15);
  --success-a25: rgba(5,150,105,0.25);
  --success-a35: rgba(5,150,105,0.35);
  --success-a40: rgba(5,150,105,0.40);
  --success-a50: rgba(5,150,105,0.50);
  --success-a60: rgba(5,150,105,0.60);
  /* Warning amber (245,158,11) */
  --warning-a07: rgba(245,158,11,0.07);
  --warning-a10: rgba(245,158,11,0.10);
  --warning-a12: rgba(245,158,11,0.12);
  --warning-a25: rgba(245,158,11,0.25);
  --warning-a40: rgba(245,158,11,0.40);
  /* Follow-up red (239,68,68) */
  --red2-a06:    rgba(239,68,68,0.06);
  --red2-a10:    rgba(239,68,68,0.10);
  --red2-a15:    rgba(239,68,68,0.15);
  --red2-a18:    rgba(239,68,68,0.18);
  --red2-a20:    rgba(239,68,68,0.20);
  --red2-a30:    rgba(239,68,68,0.30);
  --red2-a35:    rgba(239,68,68,0.35);
  --red2-a45:    rgba(239,68,68,0.45);
  --red2-a55:    rgba(239,68,68,0.55);
  --red2-a60:    rgba(239,68,68,0.60);
  /* Purple/violet (168,85,247 — quote badge) */
  --violet-a14:  rgba(168,85,247,0.14);
  --violet-a18:  rgba(168,85,247,0.18);
  --violet-a26:  rgba(168,85,247,0.26);
  --violet-a30:  rgba(168,85,247,0.30);
  --violet-a35:  rgba(168,85,247,0.35);
  --violet-a50:  rgba(168,85,247,0.50);
  --violet-a60:  rgba(168,85,247,0.60);
  --violet-a80:  rgba(168,85,247,0.80);
  /* Teal (15,118,110 — invoice hbtn) */
  --teal-a08:    rgba(15,118,110,0.08);
  --teal-a10:    rgba(15,118,110,0.10);
  --teal-a12:    rgba(15,118,110,0.12);
  --teal-a14:    rgba(15,118,110,0.14);
  --teal-a28:    rgba(15,118,110,0.28);
  --teal-a30:    rgba(15,118,110,0.30);
  --teal-a50:    rgba(15,118,110,0.50);
  /* Indigo (99,102,241 — upsell banner) */
  --indigo-a08:  rgba(99,102,241,0.08);
  --indigo-a15:  rgba(99,102,241,0.15);
  --indigo-a16:  rgba(99,102,241,0.16);
  --indigo-a30:  rgba(99,102,241,0.30);
  --indigo-a50:  rgba(99,102,241,0.50);
  /* Bid gold / lam (184,134,11 + 234,179,8) */
  --bid-gold-a08: rgba(184,134,11,0.08);
  --bid-gold-a12: rgba(184,134,11,0.12);
  --bid-gold-a30: rgba(184,134,11,0.30);
  --bid-gold-a50: rgba(234,179,8,0.10);
  --bid-gold-border-a40: rgba(180,83,9,0.40);
  /* Secondary palette colors used inline */
  --accent-deep-a08:  rgba(21,101,192,0.08);
  --accent-deep-a12:  rgba(21,101,192,0.12);
  --accent-deep-a20:  rgba(21,101,192,0.20);
  --accent-cta-a20:   rgba(0,87,217,0.12);
  --cut-orange-a12:   rgba(230,81,0,0.12);
  --cut-sink-a15:     rgba(0,120,255,0.15);
  --cut-cooktop-a15:  rgba(255,80,0,0.15);
  --cut-faucet-a15:   rgba(180,140,0,0.15);
  --cut-faucet-a180-a30: rgba(180,140,0,0.30);
  --cut-custom-a15:   rgba(130,0,200,0.15);
  --cut-sink-fg:      #0070ee;
  --cut-cooktop-fg:   #d44000;
  --cut-faucet-fg:    #8a6a00;
  --cut-custom-fg:    #7800cc;
  --cut-link-a07:     rgba(0,128,221,0.07);
  --cut-link-a13:     rgba(0,128,221,0.13);
  --cut-link-a20:     rgba(0,128,221,0.20);
  --cut-link-a30:     rgba(0,128,221,0.30);
  --cut-link-fg:      #0080dd;
  --cut-lock-a12:     rgba(255,140,0,0.12);
  --cut-lock-a22:     rgba(255,140,0,0.22);
  --cut-lock-a50:     rgba(255,165,0,0.50);
  --cut-lock-a70:     rgba(255,140,0,0.70);
  --cut-lock-fg:      #cc7700;
  --miter-a12:        rgba(123,31,162,0.12);
  --ref-a12:          rgba(85,85,85,0.12);
  --lam-a12:          rgba(200,133,10,0.12);
  --lam-a15:          rgba(200,133,10,0.15);
  --seam-conn-bg:     rgba(198,40,40,0.06);
  --seam-conn-border: rgba(198,40,40,0.18);
  --seam-ok-fg:       #16a34a;
  --seam-ok-bg:       rgba(22,163,74,0.08);
  --seam-ok-border:   rgba(22,163,74,0.30);
  --seam-err-fg:      #ef4444;
  --seam-reset-fg:    #b45309;
  --seam-cutout-link: var(--cut-link-a07);
  --cutout-link-row-border: var(--cut-link-a20);
  /* 3D assembly canvas */
  --asm3d-toolbar-bg:  rgba(15,15,28,0.85);
  --asm3d-y-a06:       rgba(34,197,94,0.06);
  --asm3d-y-a18:       rgba(34,197,94,0.18);
  --asm3d-y-a30:       rgba(34,197,94,0.30);
  --asm3d-y-a35:       rgba(34,197,94,0.35);
  --asm3d-y-a60:       rgba(34,197,94,0.60);
  --asm3d-y-lbl:       rgba(134,239,172,0.85);
  --asm3d-y-icon:      rgba(187,247,208,0.95);
  --asm3d-x-a06:       rgba(239,68,68,0.06);
  --asm3d-x-a18:       rgba(239,68,68,0.18);
  --asm3d-x-a30:       rgba(239,68,68,0.30);
  --asm3d-x-a35:       rgba(239,68,68,0.35);
  --asm3d-x-a60:       rgba(239,68,68,0.60);
  --asm3d-x-lbl:       rgba(252,165,165,0.85);
  --asm3d-x-icon:      rgba(254,202,202,0.95);
  --asm3d-z-a06:       rgba(59,130,246,0.06);
  --asm3d-z-a18:       rgba(59,130,246,0.18);
  --asm3d-z-a30:       rgba(59,130,246,0.30);
  --asm3d-z-a35:       rgba(59,130,246,0.35);
  --asm3d-z-a60:       rgba(59,130,246,0.60);
  --asm3d-z-lbl:       rgba(147,197,253,0.85);
  --asm3d-z-icon:      rgba(191,219,254,0.95);
  --asm3d-cut-label:   rgba(124,58,237,0.40);
  /* Quote card selected in dark theme */
  --quote-card-sel-bg: #261f3a;
  /* CRM job card header / bid-hdr-row3 */
  --crm-hdr-row-bg:    rgba(0,0,0,0.04);
  /* Payment milestone badges */
  --pay-violet-a06:    rgba(139,92,246,0.06);
  --pay-violet-a08:    rgba(139,92,246,0.08);
  --pay-violet-a12:    rgba(139,92,246,0.12);
  --pay-violet-fg:     #8b5cf6;
  --pay-violet-fg2:    #7c3aed;
  --pay-violet-fg3:    #a78bfa;
  --pay-violet-border: #c4b5fd;
  /* Signout red-ish text */
  --signout-fg:        rgba(255,100,100,0.85);
  --signout-fg-muted:  rgba(220,100,100,0.80);
  --quotes-del-fg:     rgba(255,100,100,0.80);
  --quotes-del-strong: #ff6b6b;
  --quotes-del-a10:    rgba(255,80,80,0.10);
  --quotes-del-a22:    rgba(255,80,80,0.22);
  --quotes-del-a25:    rgba(255,80,80,0.25);
  --quotes-del-border: rgba(255,80,80,0.22);
  /* Status dark-theme invoice pills */
  --inv-dark-draft-bg:     rgba(107,114,128,0.15);
  --inv-dark-draft-fg:     #9ca3af;
  --inv-dark-draft-border: rgba(107,114,128,0.30);
  --inv-dark-estimate-bg:     rgba(124,58,237,0.15);
  --inv-dark-estimate-fg:     #a78bfa;
  --inv-dark-estimate-border: rgba(124,58,237,0.30);
  --inv-dark-invoiced-bg:     rgba(3,105,161,0.15);
  --inv-dark-invoiced-fg:     #7dd3fc;
  --inv-dark-invoiced-border: rgba(3,105,161,0.30);
  --inv-dark-sent-bg:         rgba(2,132,199,0.15);
  --inv-dark-sent-fg:         #7dd3fc;
  --inv-dark-sent-border:     rgba(2,132,199,0.30);
  --inv-dark-deposit-bg:      rgba(217,119,6,0.15);
  --inv-dark-deposit-fg:      #fcd34d;
  --inv-dark-deposit-border:  rgba(217,119,6,0.30);
  --inv-dark-paid-bg:         rgba(5,150,105,0.15);
  --inv-dark-paid-fg:         #6ee7b7;
  --inv-dark-paid-border:     rgba(5,150,105,0.30);
  --inv-dark-accepted-bg:     rgba(5,150,105,0.12);
  --inv-dark-accepted-fg:     #6ee7b7;
  --inv-dark-accepted-border: rgba(5,150,105,0.25);
  --inv-dark-cancelled-bg:    rgba(153,27,27,0.15);
  --inv-dark-cancelled-fg:    #fca5a5;
  --inv-dark-cancelled-border:rgba(153,27,27,0.30);
  --inv-dark-paused-bg:       rgba(154,52,18,0.15);
  --inv-dark-paused-fg:       #fed7aa;
  --inv-dark-paused-border:   rgba(154,52,18,0.30);
  /* Settings OK/Err messages */
  --settings-ok-bg:     rgba(5,150,105,0.10);
  --settings-ok-border: rgba(5,150,105,0.25);
  --settings-ok-fg:     #6ee7b7;
  --settings-err-bg:    rgba(220,38,38,0.10);
  --settings-err-border:rgba(220,38,38,0.25);
  --settings-err-fg:    #fca5a5;
  /* Cost button override bar */
  --cost-btn-a15:    rgba(234,88,12,0.15);
  --cost-btn-a40:    rgba(234,88,12,0.40);
  --cost-btn-fg:     #ea580c;
  /* Admin avatar / invite amber */
  --admin-invite-bg:     rgba(245,158,11,0.12);
  --admin-invite-border: rgba(245,158,11,0.25);
  --admin-invite-fg:     #fbbf24;
  --admin-badge-fg:      #f59e0b;
  --admin-badge-bg:      rgba(245,158,11,0.10);
  --admin-badge-border:  rgba(245,158,11,0.25);
  /* Material & bid type badges */
  --mat-cat-bg:       rgba(0,149,255,0.10);
  --mat-type-bg:      rgba(139,92,246,0.12);
  --mat-type-fg:      #a78bfa;
  --mat-del-border:   rgba(220,38,38,0.30);
  --mat-instock-bg:   rgba(5,150,105,0.12);
  --mat-outstock-bg:  rgba(220,38,38,0.10);
  /* Bid PDF teal label */
  --bid-teal-fg:      #0f766e;
  --bid-teal-bg:      rgba(15,118,110,0.08);
  --bid-teal-border:  rgba(15,118,110,0.30);
  --bid-teal-ring-hi: #99d6cf;
  /* Autosave label colors */
  --asl-unsaved-fg:   rgba(255,165,60,0.85);
  --asl-fresh-fg:     rgba(80,220,120,0.90);
  /* Add-slab mint hint */
  --slab-mint-a08:    rgba(44,95,46,0.08);
  --cutout-link-mint: rgba(74,143,77,0.25);
  /* Bid sidebar accent strip */
  --bid-sidebar-strip: #1a2744;
  /* Trial/Grace header pills use warning alpha */
  --grace-pill-bg:    rgba(245,158,11,0.10);
  --grace-pill-border:rgba(245,158,11,0.40);
  --trial-pill-bg:    rgba(0,149,255,0.08);
  --trial-pill-border:rgba(0,149,255,0.30);
  /* Header border-bottom accent */
  --hdr-accent-line:  rgba(0,149,255,0.50);
  --hdr-dropdown-shadow: 0 6px 20px rgba(0,0,0,0.50);
  /* Mobile-specific overlays */
  --mob-scrim-a30:    rgba(0,0,0,0.30);
  --mob-drawer-shadow-r: rgba(0,0,0,0.35);
  --mob-drawer-shadow-l: rgba(0,0,0,0.35);
  --mob-drawer-shadow-deep: rgba(0,0,0,0.45);
  --mob-tap-accent:   rgba(0,149,255,0.20);
  --mob-tap-accent-soft: rgba(0,149,255,0.18);
  --mob-tap-accent-strong: rgba(0,149,255,0.30);
  /* Tokenization pass stragglers */
  --pay-violet-a12-deep: rgba(124,58,237,0.12);
  --violet-a26-b:        rgba(168,85,247,0.26);
  --accent-cta-a10:      rgba(0,87,217,0.10);

  /* Edge profile swatches (leg-line) */
  --edge-prof-polished:   #1565c0;
  --edge-prof-eased:      #0277bd;
  --edge-prof-half-bull:  #00838f;
  --edge-prof-demi-bull:  #2e7d32;
  --edge-prof-full-bull:  #6a1b9a;
  --edge-prof-ogee:       #ad1457;
  --edge-prof-dupont:     #c62828;
  --edge-prof-cove-dupont:#e65100;
  --edge-prof-mitered:    #7b1fa2;
  --edge-prof-waterfall:  #00695c;
  --edge-prof-chiseled:   #4e342e;

  /* Deep hover shades */
  --btn-danger-hover:     #b71c1c;
  --btn-pricing-hover:    #a07809;
  --accent-bright:        #00b4ff;

  /* Fallback defaults (used as the 2nd arg in var(--x, #fallback)) */
  --fallback-error:       #c62828;
  --fallback-success:     #059669;
  --fallback-bg-dark1:    #1a1a2e;
  --fallback-bg-dark2:    #0d0d1a;
  --fallback-surface2:    #f1f5f9;
  --fallback-hover-bg:    #f0f2f8;

  /* Invoice light-theme status pill palette */
  --inv-lt-draft-bg:      #f3f4f6;
  --inv-lt-draft-fg:      #6b7280;
  --inv-lt-draft-border:  #e2e8f0;
  --inv-lt-draft-alt-bg:  #f1f5f9;
  --inv-lt-draft-alt-fg:  #64748b;
  --inv-lt-draft-alt-border: #cbd5e1;
  --inv-lt-estimate-bg:   #ede9fe;
  --inv-lt-invoiced-bg:   #dbeafe;
  --inv-lt-invoiced-fg:   #0369a1;
  --inv-lt-invoiced-border: #93c5fd;
  --inv-lt-sent-bg:       #bfdbfe;
  --inv-lt-sent-fg:       #0284c7;
  --inv-lt-sent-alt-fg:   #1d4ed8;
  --inv-lt-deposit-bg:    #fef3c7;
  --inv-lt-deposit-fg:    #d97706;
  --inv-lt-paid-bg:       #dcfce7;
  --inv-lt-paid-alt-fg:   #15803d;
  --inv-lt-accepted-bg:   #f0fdf4;
  --inv-lt-accepted-fg:   #065f46;
  --inv-lt-cancelled-bg:  #fee2e2;
  --inv-lt-cancelled-fg:  #991b1b;
  --inv-lt-paused-bg:     #fff7ed;
  --inv-lt-paused-fg:     #9a3412;

  /* CRM job status selects (light) */
  --crm-st-active-bg:     #e8f5e9;
  --crm-st-active-fg:     #2e7d32;
  --crm-st-complete-bg:   #e3f2fd;
  --crm-st-complete-fg:   #1565c0;
  --crm-st-onhold-bg:     #fff8e1;
  --crm-st-onhold-fg:     #f57f17;
  --crm-st-cancelled-bg:  #fce4ec;

  /* Quote / template panels */
  --quote-badge-num-fg:   #d8b4fe;
  --quote-cb-accent:      #a855f7;
  --qsp-title-fg:         #d8b4fe;
  --qsp-save-hover:       #9333ea;
  --qsp-panel-bg:         #150e2a;
  --tpl-save-panel-bg:    #0f1a14;
  --tpl-panel-title-fg:   #86efac;
  --tpl-panel-save-bg:    #166534;
  --tpl-panel-save-hover: #15803d;

  /* Invoice hover / view-btn */
  --inv-copy-hover:       #0d5f58;
  --inv-view-btn-bg:      #f0faf9;
  --inv-view-btn-hover:   #ccfbf1;

  /* Miscellaneous tokens */
  --pay-flat-fg:          #10b981;
  --pay-validate-ok-fg:   #10b981;
  --nest-auto-fg:         #22c55e;
  --annot-green:          #10b981;
  --onboarding-accepted:  #34d399;
  --resume-label-fg:      #60b8ff;
  --override-active-border:#dc2626;
  --hero-gradient-bg:     #1e293b;
  --crm-accepted-badge-bg:#f0fdf4;
  --crm-accepted-badge-fg:#065f46;
  --bidhint-indigo-fg:    #4338ca;
  --bid-overlay-bg:       #1a1b26;
  --surface-222:          #222;
  --email-type-active-bg: #0369a1;

  /* Mobile FAB palette (deep-dark fills with accent-hued outlines + soft fg) */
  --fab-neutral-bg:       #111821;
  --fab-neutral-border:   #394655;
  --fab-neutral-fg:       #e8ecf1;
  --fab-save-bg:          #0f2e1c;
  --fab-save-border:      #22c55e;
  --fab-save-fg:          #bff5c6;
  --fab-bid-border:       #33a9ff;
  --fab-bid-gradient-b:   #0077cc;
  --fab-slabs-bg:         #0f2b2f;
  --fab-slabs-border:     #22d3a6;
  --fab-slabs-fg:         #bff5e4;
  --fab-3d-bg:            #261947;
  --fab-3d-fg:            #e4d9ff;
  --fab-qa-bg:            #2a1d0a;
  --fab-qa-fg:            #fce8bb;
  --fab-layers-bg:        #1a0f2e;
  --fab-canvas-bg:        #0a1628;
  --fab-canvas-fg:        #cfe6ff;
  --fab-fullscreen-bg:    #14202b;
  --fab-fullscreen-border:#6b7a8c;
  --fab-fullscreen-fg:    #d6dde6;
  --fab-fullscreen-svg:   #9aa6b6;
  --fab-delete-fg:        #f87171;
  --asm3d-tb-active:      #10b981;

  /* Fonts */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', 'SF Mono', monospace;
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg:         #0f1117;
  --surface:    #1a1d27;
  --panel:      #141620;
  --raised:     #252836;
  --hover-bg:   rgba(255,255,255,0.04);

  --border:     rgba(255,255,255,0.1);
  --border-md:  rgba(255,255,255,0.14);
  --border-dk:  rgba(255,255,255,0.18);

  --surface-alt: #232735;

  --text:       #e2e8f0;
  --text2:      #b0b8c8;
  --muted:      #64748b;

  --accent:     #38a3ff;
  --accent2:    #60b8ff;
  --accent-soft: rgba(56,163,255,0.12);

  --success:    #10b981;
  --success-soft: rgba(16,185,129,0.12);
  --success-border: rgba(16,185,129,0.22);
  --success-border-strong: rgba(16,185,129,0.3);
  --error:      #f87171;
  --error-soft: rgba(248,113,113,0.12);
  --error-border: rgba(248,113,113,0.35);
  --error-border-soft: rgba(248,113,113,0.25);
  --warning:    #fbbf24;
  --warning-soft: rgba(251,191,36,0.12);
  --warning-bg-soft: rgba(251,191,36,0.1);
  --warning-border: rgba(251,191,36,0.4);
  --warning-border-strong: rgba(251,191,36,0.35);
  --warning-border-soft: rgba(251,191,36,0.28);
  --error-border-strong: rgba(248,113,113,0.5);

  /* Accent (extra) */
  --accent-bg-soft:   rgba(56,163,255,0.14);
  --accent-bg-soft-2: rgba(56,163,255,0.18);
  --accent-bg-tint:   rgba(56,163,255,0.08);
  --accent-bg-input:  rgba(56,163,255,0.06);
  --accent-border:    rgba(56,163,255,0.3);
  --accent-border-strong: rgba(56,163,255,0.4);
  --accent-glow:      0 0 30px rgba(56,163,255,0.15);
  --accent-focus-ring: 0 0 0 3px rgba(56,163,255,0.18);
  --error-text-on-soft: #fca5a5;
  --warning-text-on-soft: #fcd34d;
  --shadow-xs-border: 0 1px 3px rgba(0,0,0,0.3);

  /* Dashboard revenue chart tokens (dark) */
  --chart-axis:         rgba(255,255,255,0.1);
  --chart-tooltip-bg:   #252836;
  --chart-tooltip-fg:   #e2e8f0;

  /* Toast / sd-modal tokens (dark) */
  --toast-shadow:    0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
  --toast-ok-bg:     #10b981;
  --toast-ok-fg:     #fff;
  --toast-err-bg:    #ef4444;
  --toast-err-fg:    #fff;
  --toast-warn-bg:   #f59e0b;
  --toast-warn-fg:   #1a1d27;
  --toast-info-bg:   #0095ff;
  --toast-info-fg:   #fff;
  --sd-modal-bg:        #1a1d27;
  --sd-modal-border:    rgba(255,255,255,0.08);
  --sd-modal-shadow:    0 24px 60px rgba(0,0,0,0.5);
  --sd-modal-text:      #e2e8f0;
  --sd-modal-title:     #fff;
  --sd-modal-msg:       #a1a5b7;
  --sd-cancel-fg:       #94a3b8;
  --sd-cancel-border:   rgba(255,255,255,0.12);
  --sd-cancel-hover-bg: rgba(255,255,255,0.05);
  --sd-primary-hover:   #0080e0;
  --sd-danger-bg:       #ef4444;
  --sd-danger-hover:    #dc2626;
  --sd-form-input-bg:   #0f1218;
  --sd-pill-border:     rgba(255,255,255,0.14);
  --sd-pill-fg:         #cbd5e1;
  --sd-success-fg:      #10b981;
  --sd-code-fg:         #60a5fa;

  /* Super-admin specific (dark) */
  --sa-err-bg:            #0f1117;
  --sa-err-fg:            #fff;
  --sa-err-sub:           #8896a8;
  --sa-badge-gradient:    linear-gradient(135deg, var(--accent), #8b5cf6);
  --sa-badge-fg:          #fff;
  --sa-violet:            #a78bfa;
  --sa-violet-bg:         rgba(167,139,250,0.18);
  --sa-violet-border:     rgba(167,139,250,0.4);
  --sa-violet-soft:       rgba(167,139,250,0.08);
  --sa-preview-bg:        #22252e;
  --sa-preview-email-bg:  #1a1d27;
  --sa-ws-danger-bg:      rgba(248,113,113,0.14);
  --sa-ws-danger-fg:      #fca5a5;
  --sa-ws-danger-border:  rgba(248,113,113,0.4);
  --sa-ws-danger-outline: rgba(248,113,113,0.5);
  --sa-ws-danger-inset:   rgba(248,113,113,0.2);
  --sa-ticket-new-bg:     rgba(248,113,113,0.2);
  --sa-ticket-replied-bg: rgba(251,191,36,0.2);
  --sa-ticket-closed-bg:  rgba(16,185,129,0.2);
  --sa-ticket-num-bg:     rgba(56,163,255,0.18);
  --sa-code-bg-opaque:    rgba(0,0,0,0.35);
  --sa-flash-bg:          rgba(56,163,255,0.3);
  --sa-shadow-tab:        0 1px 3px rgba(0,0,0,0.4);
  --sa-shadow-card-hover: 0 4px 16px rgba(0,0,0,0.35);
  --sa-storage-heavy-bg:  rgba(251,191,36,0.1);
  --sa-storage-warn-bg:   rgba(251,191,36,0.12);
  --sa-storage-warn-border: rgba(251,191,36,0.35);
  --sa-storage-expired-fg: #f87171;
  --sa-storage-saved-fg:  #4ade80;
  --sa-storage-purge-bg:  rgba(248,113,113,0.1);
  --sa-storage-purge-border: rgba(248,113,113,0.3);
  --sa-storage-purge-h4:  #f87171;
  --sa-storage-err-bg:    rgba(248,113,113,0.12);
  --sa-storage-err-border: rgba(248,113,113,0.35);
  --sa-storage-err-fg:    #fca5a5;

  /* Auth violet (plan team badge) */
  --auth-violet:           #a78bfa;
  --auth-violet-fg:        #c4b5fd;
  --auth-violet-soft:      rgba(167,139,250,0.08);
  --auth-violet-bg-soft:   rgba(167,139,250,0.2);
  --auth-violet-border:    rgba(167,139,250,0.4);

  /* Shadows (extra) */
  --shadow-auth-card: 0 24px 64px rgba(0,0,0,0.7);

  --canvas-bg:       #1a1d27;
  --canvas-grid:     rgba(100,180,100,0.1);
  --canvas-grid-mid: rgba(255,255,255,0.05);
  --canvas-grid-fine: rgba(255,255,255,0.02);
  --canvas-ruler-bg: #1e2028;
  --canvas-ruler-alt: #252836;
  --canvas-ruler-corner: #0d0e14;

  --hdr-bg:     #0a0b10;
  --hdr-text:   rgba(255,255,255,0.88);
  --hdr-muted:  rgba(255,255,255,0.45);
  --hdr-border: rgba(255,255,255,0.06);
  --hdr-hover:  rgba(255,255,255,0.1);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.6);
  --shadow-modal-lg: 0 24px 64px rgba(0,0,0,0.7);

  --overlay:    rgba(0,0,0,0.65);
  --overlay-strong: rgba(0,0,0,0.75);

  --danger-bg:        rgba(248,113,113,0.12);
  --danger-bg-hover:  rgba(248,113,113,0.2);
  --danger-border:    rgba(248,113,113,0.3);

  /* Solid-button foreground stays white in dark mode — accent is bright blue */
  --on-accent: #fff;

  /* Status identity tokens — these are semantic identity, not themed.
     Same values across light/dark so pills keep their recognizable color. */
  --status-draft-bg:     rgba(148,163,184,0.12);
  --status-draft-fg:     #94a3b8;
  --status-estimate-bg:  rgba(245,158,11,0.15);
  --status-estimate-fg:  #fbbf24;
  --status-accepted-bg:  rgba(16,185,129,0.15);
  --status-accepted-fg:  #34d399;
  --status-invoiced-bg:  rgba(59,130,246,0.15);
  --status-invoiced-fg:  #93c5fd;
  --status-invsent-bg:   rgba(6,182,212,0.15);
  --status-invsent-fg:   #67e8f9;
  --status-deposit-bg:   rgba(217,119,6,0.18);
  --status-deposit-fg:   #fcd34d;
  --status-complete-bg:  rgba(139,92,246,0.15);
  --status-complete-fg:  #c4b5fd;
  --status-onhold-bg:    rgba(148,163,184,0.1);
  --status-onhold-fg:    #94a3b8;
  --status-followup-bg:  rgba(244,63,94,0.14);
  --status-followup-fg:  #fb7185;
  --status-cancelled-bg: rgba(239,68,68,0.12);
  --status-cancelled-fg: #f87171;
  --status-custom-bg:    rgba(139,92,246,0.12);
  --status-custom-fg:    #a78bfa;
  --status-paid-bg:      rgba(16,185,129,0.2);
  --status-paid-fg:      #6ee7b7;

  --status-draft-border:     rgba(148,163,184,0.3);
  --status-estimate-border:  rgba(245,158,11,0.4);
  --status-accepted-border:  rgba(16,185,129,0.4);
  --status-invoiced-border:  rgba(59,130,246,0.4);
  --status-invsent-border:   rgba(6,182,212,0.4);
  --status-deposit-border:   rgba(217,119,6,0.45);
  --status-paid-border:      rgba(16,185,129,0.45);
  --status-onhold-border:    rgba(148,163,184,0.2);
  --status-followup-border:  rgba(244,63,94,0.3);
  --status-cancelled-border: rgba(239,68,68,0.3);
  --status-custom-border:    rgba(100,116,139,0.25);

  --kanban-draft:     #94a3b8;
  --kanban-estimate:  #f59e0b;
  --kanban-accepted:  #10b981;
  --kanban-invoiced:  #3b82f6;
  --kanban-invsent:   #06b6d4;
  --kanban-deposit:   #d97706;
  --kanban-complete:  #8b5cf6;
  --kanban-onhold:    #94a3b8;
  --kanban-followup:  #f43f5e;
  --kanban-cancelled: #ef4444;
  --kanban-custom:    #8b5cf6;

  --priority-low-bg:     rgba(148,163,184,0.12);
  --priority-low-fg:     #94a3b8;
  --priority-medium-bg:  rgba(245,158,11,0.15);
  --priority-medium-fg:  #fbbf24;
  --priority-high-bg:    rgba(239,68,68,0.15);
  --priority-high-fg:    #f87171;

  --badge-repeat-bg:     rgba(139,92,246,0.18);
  --badge-repeat-fg:     #c4b5fd;
  --badge-archive-bg:    rgba(148,163,184,0.18);
  --badge-archive-fg:    #94a3b8;
  --badge-archive-toggle-bg: rgba(100,116,139,0.2);

  --pro-gradient-start:  #38a3ff;
  --pro-gradient-end:    #6366f1;
  --free-banner-mix:     rgba(99,102,241,0.1);
  --upgrade-modal-bg:    #1e2538;
  --upgrade-modal-backdrop: rgba(0,0,0,0.6);
  --upgrade-modal-shadow: 0 20px 60px rgba(0,0,0,0.7);

  /* ── Component semantic token dark overrides ── */
  /* Black overlays keep same base but modal scrims are darker in dark theme */
  --black-a02:  rgba(0,0,0,0.02);
  --black-a03:  rgba(0,0,0,0.03);
  --black-a04:  rgba(0,0,0,0.04);
  --black-a05:  rgba(0,0,0,0.05);
  --black-a06:  rgba(0,0,0,0.06);
  --black-a08:  rgba(0,0,0,0.08);
  --black-a10:  rgba(0,0,0,0.10);
  --black-a12:  rgba(0,0,0,0.12);
  --black-a15:  rgba(0,0,0,0.15);
  --black-a18:  rgba(0,0,0,0.18);
  --black-a25:  rgba(0,0,0,0.25);
  --black-a30:  rgba(0,0,0,0.30);
  --black-a35:  rgba(0,0,0,0.35);
  --black-a40:  rgba(0,0,0,0.40);
  --black-a42:  rgba(0,0,0,0.42);
  --black-a45:  rgba(0,0,0,0.45);
  --black-a50:  rgba(0,0,0,0.50);
  --black-a55:  rgba(0,0,0,0.55);
  --black-a60:  rgba(0,0,0,0.60);
  --black-a65:  rgba(0,0,0,0.65);
  --black-a70:  rgba(0,0,0,0.70);
  --black-a72:  rgba(0,0,0,0.72);
  --black-a80:  rgba(0,0,0,0.80);
  --black-a92:  rgba(10,14,24,0.92);
  --white-a03:  rgba(255,255,255,0.03);
  --white-a06:  rgba(255,255,255,0.06);
  --white-a08:  rgba(255,255,255,0.08);
  --white-a10:  rgba(255,255,255,0.10);
  --white-a12:  rgba(255,255,255,0.12);
  --white-a18:  rgba(255,255,255,0.18);
  --white-a20:  rgba(255,255,255,0.20);
  --white-a28:  rgba(255,255,255,0.28);
  --white-a35:  rgba(255,255,255,0.35);
  --white-a40:  rgba(255,255,255,0.40);
  --white-a45:  rgba(255,255,255,0.45);
  --white-a50:  rgba(255,255,255,0.50);
  --white-a55:  rgba(255,255,255,0.55);
  --white-a70:  rgba(255,255,255,0.70);
  --white-a80:  rgba(255,255,255,0.80);
  --white-a85:  rgba(255,255,255,0.85);
  --white-a90:  rgba(255,255,255,0.90);
  --white-a92:  rgba(255,255,255,0.92);
  --accent-a04: rgba(0,149,255,0.04);
  --accent-a05: rgba(0,149,255,0.05);
  --accent-a06: rgba(0,149,255,0.06);
  --accent-a07: rgba(0,149,255,0.07);
  --accent-a08: rgba(0,149,255,0.08);
  --accent-a10: rgba(0,149,255,0.10);
  --accent-a12: rgba(0,149,255,0.12);
  --accent-a13: rgba(0,149,255,0.13);
  --accent-a14: rgba(0,149,255,0.14);
  --accent-a15: rgba(0,149,255,0.15);
  --accent-a16: rgba(0,149,255,0.16);
  --accent-a18: rgba(0,149,255,0.18);
  --accent-a20: rgba(0,149,255,0.20);
  --accent-a22: rgba(0,149,255,0.22);
  --accent-a25: rgba(0,149,255,0.25);
  --accent-a28: rgba(0,149,255,0.28);
  --accent-a30: rgba(0,149,255,0.30);
  --accent-a32: rgba(0,149,255,0.32);
  --accent-a35: rgba(0,149,255,0.35);
  --accent-a40: rgba(0,149,255,0.40);
  --accent-a45: rgba(0,149,255,0.45);
  --accent-a50: rgba(0,149,255,0.50);
  --accent-a55: rgba(0,149,255,0.55);
  --accent-a85: rgba(0,149,255,0.85);
  --accent-alt: #0080dd;
  --error-a04:  rgba(198,40,40,0.04);
  --error-a05:  rgba(198,40,40,0.05);
  --error-a06:  rgba(198,40,40,0.06);
  --error-a08:  rgba(198,40,40,0.08);
  --error-a10:  rgba(198,40,40,0.10);
  --error-a12:  rgba(198,40,40,0.12);
  --error-a18:  rgba(198,40,40,0.18);
  --error-a20:  rgba(198,40,40,0.20);
  --error-a30:  rgba(198,40,40,0.30);
  --error-a35:  rgba(198,40,40,0.35);
  --error-a40:  rgba(198,40,40,0.40);
  --danger-a07: rgba(220,38,38,0.07);
  --danger-a10: rgba(220,38,38,0.10);
  --danger-a25: rgba(220,38,38,0.25);
  --danger-a30: rgba(220,38,38,0.30);
  --success-a07: rgba(5,150,105,0.07);
  --success-a08: rgba(5,150,105,0.08);
  --success-a10: rgba(5,150,105,0.10);
  --success-a12: rgba(5,150,105,0.12);
  --success-a15: rgba(5,150,105,0.15);
  --success-a25: rgba(5,150,105,0.25);
  --success-a35: rgba(5,150,105,0.35);
  --success-a40: rgba(5,150,105,0.40);
  --success-a50: rgba(5,150,105,0.50);
  --success-a60: rgba(5,150,105,0.60);
  --warning-a07: rgba(245,158,11,0.07);
  --warning-a10: rgba(245,158,11,0.10);
  --warning-a12: rgba(245,158,11,0.12);
  --warning-a25: rgba(245,158,11,0.25);
  --warning-a40: rgba(245,158,11,0.40);
  --red2-a06:    rgba(239,68,68,0.06);
  --red2-a10:    rgba(239,68,68,0.10);
  --red2-a15:    rgba(239,68,68,0.15);
  --red2-a18:    rgba(239,68,68,0.18);
  --red2-a20:    rgba(239,68,68,0.20);
  --red2-a30:    rgba(239,68,68,0.30);
  --red2-a35:    rgba(239,68,68,0.35);
  --red2-a45:    rgba(239,68,68,0.45);
  --red2-a55:    rgba(239,68,68,0.55);
  --red2-a60:    rgba(239,68,68,0.60);
  --violet-a14:  rgba(168,85,247,0.14);
  --violet-a18:  rgba(168,85,247,0.18);
  --violet-a26:  rgba(168,85,247,0.26);
  --violet-a30:  rgba(168,85,247,0.30);
  --violet-a35:  rgba(168,85,247,0.35);
  --violet-a50:  rgba(168,85,247,0.50);
  --violet-a60:  rgba(168,85,247,0.60);
  --violet-a80:  rgba(168,85,247,0.80);
  --teal-a08:    rgba(15,118,110,0.08);
  --teal-a10:    rgba(15,118,110,0.10);
  --teal-a12:    rgba(15,118,110,0.12);
  --teal-a14:    rgba(15,118,110,0.14);
  --teal-a28:    rgba(15,118,110,0.28);
  --teal-a30:    rgba(15,118,110,0.30);
  --teal-a50:    rgba(15,118,110,0.50);
  --indigo-a08:  rgba(99,102,241,0.08);
  --indigo-a15:  rgba(99,102,241,0.15);
  --indigo-a16:  rgba(99,102,241,0.16);
  --indigo-a30:  rgba(99,102,241,0.30);
  --indigo-a50:  rgba(99,102,241,0.50);
  --bid-gold-a08: rgba(184,134,11,0.08);
  --bid-gold-a12: rgba(184,134,11,0.12);
  --bid-gold-a30: rgba(184,134,11,0.30);
  --bid-gold-a50: rgba(234,179,8,0.10);
  --bid-gold-border-a40: rgba(180,83,9,0.40);
  --accent-deep-a08:  rgba(21,101,192,0.08);
  --accent-deep-a12:  rgba(21,101,192,0.12);
  --accent-deep-a20:  rgba(21,101,192,0.20);
  --accent-cta-a20:   rgba(0,87,217,0.12);
  --cut-orange-a12:   rgba(230,81,0,0.12);
  --cut-sink-a15:     rgba(0,120,255,0.15);
  --cut-cooktop-a15:  rgba(255,80,0,0.15);
  --cut-faucet-a15:   rgba(180,140,0,0.15);
  --cut-faucet-a180-a30: rgba(180,140,0,0.30);
  --cut-custom-a15:   rgba(130,0,200,0.15);
  --cut-sink-fg:      #0070ee;
  --cut-cooktop-fg:   #d44000;
  --cut-faucet-fg:    #8a6a00;
  --cut-custom-fg:    #7800cc;
  --cut-link-a07:     rgba(0,128,221,0.07);
  --cut-link-a13:     rgba(0,128,221,0.13);
  --cut-link-a20:     rgba(0,128,221,0.20);
  --cut-link-a30:     rgba(0,128,221,0.30);
  --cut-link-fg:      #0080dd;
  --cut-lock-a12:     rgba(255,140,0,0.12);
  --cut-lock-a22:     rgba(255,140,0,0.22);
  --cut-lock-a50:     rgba(255,165,0,0.50);
  --cut-lock-a70:     rgba(255,140,0,0.70);
  --cut-lock-fg:      #cc7700;
  --miter-a12:        rgba(123,31,162,0.12);
  --ref-a12:          rgba(85,85,85,0.12);
  --lam-a12:          rgba(200,133,10,0.12);
  --lam-a15:          rgba(200,133,10,0.15);
  --seam-conn-bg:     rgba(198,40,40,0.06);
  --seam-conn-border: rgba(198,40,40,0.18);
  --seam-ok-fg:       #16a34a;
  --seam-ok-bg:       rgba(22,163,74,0.08);
  --seam-ok-border:   rgba(22,163,74,0.30);
  --seam-err-fg:      #ef4444;
  --seam-reset-fg:    #b45309;
  --seam-cutout-link: var(--cut-link-a07);
  --cutout-link-row-border: var(--cut-link-a20);
  --asm3d-toolbar-bg:  rgba(15,15,28,0.85);
  --asm3d-y-a06:       rgba(34,197,94,0.06);
  --asm3d-y-a18:       rgba(34,197,94,0.18);
  --asm3d-y-a30:       rgba(34,197,94,0.30);
  --asm3d-y-a35:       rgba(34,197,94,0.35);
  --asm3d-y-a60:       rgba(34,197,94,0.60);
  --asm3d-y-lbl:       rgba(134,239,172,0.85);
  --asm3d-y-icon:      rgba(187,247,208,0.95);
  --asm3d-x-a06:       rgba(239,68,68,0.06);
  --asm3d-x-a18:       rgba(239,68,68,0.18);
  --asm3d-x-a30:       rgba(239,68,68,0.30);
  --asm3d-x-a35:       rgba(239,68,68,0.35);
  --asm3d-x-a60:       rgba(239,68,68,0.60);
  --asm3d-x-lbl:       rgba(252,165,165,0.85);
  --asm3d-x-icon:      rgba(254,202,202,0.95);
  --asm3d-z-a06:       rgba(59,130,246,0.06);
  --asm3d-z-a18:       rgba(59,130,246,0.18);
  --asm3d-z-a30:       rgba(59,130,246,0.30);
  --asm3d-z-a35:       rgba(59,130,246,0.35);
  --asm3d-z-a60:       rgba(59,130,246,0.60);
  --asm3d-z-lbl:       rgba(147,197,253,0.85);
  --asm3d-z-icon:      rgba(191,219,254,0.95);
  --asm3d-cut-label:   rgba(124,58,237,0.40);
  --quote-card-sel-bg: #261f3a;
  --crm-hdr-row-bg:    rgba(255,255,255,0.04);
  --pay-violet-a06:    rgba(139,92,246,0.06);
  --pay-violet-a08:    rgba(139,92,246,0.08);
  --pay-violet-a12:    rgba(139,92,246,0.12);
  --pay-violet-fg:     #8b5cf6;
  --pay-violet-fg2:    #7c3aed;
  --pay-violet-fg3:    #a78bfa;
  --pay-violet-border: #c4b5fd;
  --signout-fg:        rgba(255,100,100,0.85);
  --signout-fg-muted:  rgba(220,100,100,0.80);
  --quotes-del-fg:     rgba(255,100,100,0.80);
  --quotes-del-strong: #ff6b6b;
  --quotes-del-a10:    rgba(255,80,80,0.10);
  --quotes-del-a22:    rgba(255,80,80,0.22);
  --quotes-del-a25:    rgba(255,80,80,0.25);
  --quotes-del-border: rgba(255,80,80,0.22);
  --inv-dark-draft-bg:     rgba(107,114,128,0.15);
  --inv-dark-draft-fg:     #9ca3af;
  --inv-dark-draft-border: rgba(107,114,128,0.30);
  --inv-dark-estimate-bg:     rgba(124,58,237,0.15);
  --inv-dark-estimate-fg:     #a78bfa;
  --inv-dark-estimate-border: rgba(124,58,237,0.30);
  --inv-dark-invoiced-bg:     rgba(3,105,161,0.15);
  --inv-dark-invoiced-fg:     #7dd3fc;
  --inv-dark-invoiced-border: rgba(3,105,161,0.30);
  --inv-dark-sent-bg:         rgba(2,132,199,0.15);
  --inv-dark-sent-fg:         #7dd3fc;
  --inv-dark-sent-border:     rgba(2,132,199,0.30);
  --inv-dark-deposit-bg:      rgba(217,119,6,0.15);
  --inv-dark-deposit-fg:      #fcd34d;
  --inv-dark-deposit-border:  rgba(217,119,6,0.30);
  --inv-dark-paid-bg:         rgba(5,150,105,0.15);
  --inv-dark-paid-fg:         #6ee7b7;
  --inv-dark-paid-border:     rgba(5,150,105,0.30);
  --inv-dark-accepted-bg:     rgba(5,150,105,0.12);
  --inv-dark-accepted-fg:     #6ee7b7;
  --inv-dark-accepted-border: rgba(5,150,105,0.25);
  --inv-dark-cancelled-bg:    rgba(153,27,27,0.15);
  --inv-dark-cancelled-fg:    #fca5a5;
  --inv-dark-cancelled-border:rgba(153,27,27,0.30);
  --inv-dark-paused-bg:       rgba(154,52,18,0.15);
  --inv-dark-paused-fg:       #fed7aa;
  --inv-dark-paused-border:   rgba(154,52,18,0.30);
  --settings-ok-bg:     rgba(5,150,105,0.10);
  --settings-ok-border: rgba(5,150,105,0.25);
  --settings-ok-fg:     #6ee7b7;
  --settings-err-bg:    rgba(220,38,38,0.10);
  --settings-err-border:rgba(220,38,38,0.25);
  --settings-err-fg:    #fca5a5;
  --cost-btn-a15:    rgba(234,88,12,0.15);
  --cost-btn-a40:    rgba(234,88,12,0.40);
  --cost-btn-fg:     #ea580c;
  --admin-invite-bg:     rgba(245,158,11,0.12);
  --admin-invite-border: rgba(245,158,11,0.25);
  --admin-invite-fg:     #fbbf24;
  --admin-badge-fg:      #f59e0b;
  --admin-badge-bg:      rgba(245,158,11,0.10);
  --admin-badge-border:  rgba(245,158,11,0.25);
  --mat-cat-bg:       rgba(0,149,255,0.10);
  --mat-type-bg:      rgba(139,92,246,0.12);
  --mat-type-fg:      #a78bfa;
  --mat-del-border:   rgba(220,38,38,0.30);
  --mat-instock-bg:   rgba(5,150,105,0.12);
  --mat-outstock-bg:  rgba(220,38,38,0.10);
  --bid-teal-fg:      #0f766e;
  --bid-teal-bg:      rgba(15,118,110,0.08);
  --bid-teal-border:  rgba(15,118,110,0.30);
  --bid-teal-ring-hi: #99d6cf;
  --asl-unsaved-fg:   rgba(255,165,60,0.85);
  --asl-fresh-fg:     rgba(80,220,120,0.90);
  --slab-mint-a08:    rgba(44,95,46,0.08);
  --cutout-link-mint: rgba(74,143,77,0.25);
  --bid-sidebar-strip: #1a2744;
  --grace-pill-bg:    rgba(245,158,11,0.10);
  --grace-pill-border:rgba(245,158,11,0.40);
  --trial-pill-bg:    rgba(0,149,255,0.08);
  --trial-pill-border:rgba(0,149,255,0.30);
  --hdr-accent-line:  rgba(0,149,255,0.50);
  --hdr-dropdown-shadow: 0 6px 20px rgba(0,0,0,0.50);
  --mob-scrim-a30:    rgba(0,0,0,0.30);
  --mob-drawer-shadow-r: rgba(0,0,0,0.35);
  --mob-drawer-shadow-l: rgba(0,0,0,0.35);
  --mob-drawer-shadow-deep: rgba(0,0,0,0.45);
  --mob-tap-accent:   rgba(0,149,255,0.20);
  --mob-tap-accent-soft: rgba(0,149,255,0.18);
  --mob-tap-accent-strong: rgba(0,149,255,0.30);
  --pay-violet-a12-deep: rgba(124,58,237,0.12);
  --violet-a26-b:        rgba(168,85,247,0.26);
  --accent-cta-a10:      rgba(0,87,217,0.10);

  /* Edge profile swatches — identity, unchanged across themes */
  --edge-prof-polished:   #1565c0;
  --edge-prof-eased:      #0277bd;
  --edge-prof-half-bull:  #00838f;
  --edge-prof-demi-bull:  #2e7d32;
  --edge-prof-full-bull:  #6a1b9a;
  --edge-prof-ogee:       #ad1457;
  --edge-prof-dupont:     #c62828;
  --edge-prof-cove-dupont:#e65100;
  --edge-prof-mitered:    #7b1fa2;
  --edge-prof-waterfall:  #00695c;
  --edge-prof-chiseled:   #4e342e;
  --btn-danger-hover:     #b71c1c;
  --btn-pricing-hover:    #a07809;
  --accent-bright:        #00b4ff;
  --fallback-error:       #c62828;
  --fallback-success:     #059669;
  --fallback-bg-dark1:    #1a1a2e;
  --fallback-bg-dark2:    #0d0d1a;
  --fallback-surface2:    #1a1d27;
  --fallback-hover-bg:    #252836;
  --inv-lt-draft-bg:      #f3f4f6;
  --inv-lt-draft-fg:      #6b7280;
  --inv-lt-draft-border:  #e2e8f0;
  --inv-lt-draft-alt-bg:  #f1f5f9;
  --inv-lt-draft-alt-fg:  #64748b;
  --inv-lt-draft-alt-border: #cbd5e1;
  --inv-lt-estimate-bg:   #ede9fe;
  --inv-lt-invoiced-bg:   #dbeafe;
  --inv-lt-invoiced-fg:   #0369a1;
  --inv-lt-invoiced-border: #93c5fd;
  --inv-lt-sent-bg:       #bfdbfe;
  --inv-lt-sent-fg:       #0284c7;
  --inv-lt-sent-alt-fg:   #1d4ed8;
  --inv-lt-deposit-bg:    #fef3c7;
  --inv-lt-deposit-fg:    #d97706;
  --inv-lt-paid-bg:       #dcfce7;
  --inv-lt-paid-alt-fg:   #15803d;
  --inv-lt-accepted-bg:   #f0fdf4;
  --inv-lt-accepted-fg:   #065f46;
  --inv-lt-cancelled-bg:  #fee2e2;
  --inv-lt-cancelled-fg:  #991b1b;
  --inv-lt-paused-bg:     #fff7ed;
  --inv-lt-paused-fg:     #9a3412;
  --crm-st-active-bg:     #e8f5e9;
  --crm-st-active-fg:     #2e7d32;
  --crm-st-complete-bg:   #e3f2fd;
  --crm-st-complete-fg:   #1565c0;
  --crm-st-onhold-bg:     #fff8e1;
  --crm-st-onhold-fg:     #f57f17;
  --crm-st-cancelled-bg:  #fce4ec;
  --quote-badge-num-fg:   #d8b4fe;
  --quote-cb-accent:      #a855f7;
  --qsp-title-fg:         #d8b4fe;
  --qsp-save-hover:       #9333ea;
  --qsp-panel-bg:         #150e2a;
  --tpl-save-panel-bg:    #0f1a14;
  --tpl-panel-title-fg:   #86efac;
  --tpl-panel-save-bg:    #166534;
  --tpl-panel-save-hover: #15803d;
  --inv-copy-hover:       #0d5f58;
  --inv-view-btn-bg:      #f0faf9;
  --inv-view-btn-hover:   #ccfbf1;
  --pay-flat-fg:          #10b981;
  --pay-validate-ok-fg:   #10b981;
  --nest-auto-fg:         #22c55e;
  --annot-green:          #10b981;
  --onboarding-accepted:  #34d399;
  --resume-label-fg:      #60b8ff;
  --override-active-border:#dc2626;
  --hero-gradient-bg:     #1e293b;
  --crm-accepted-badge-bg:#f0fdf4;
  --crm-accepted-badge-fg:#065f46;
  --bidhint-indigo-fg:    #4338ca;
  --bid-overlay-bg:       #1a1b26;
  --surface-222:          #222;
  --email-type-active-bg: #0369a1;
  --fab-neutral-bg:       #111821;
  --fab-neutral-border:   #394655;
  --fab-neutral-fg:       #e8ecf1;
  --fab-save-bg:          #0f2e1c;
  --fab-save-border:      #22c55e;
  --fab-save-fg:          #bff5c6;
  --fab-bid-border:       #33a9ff;
  --fab-bid-gradient-b:   #0077cc;
  --fab-slabs-bg:         #0f2b2f;
  --fab-slabs-border:     #22d3a6;
  --fab-slabs-fg:         #bff5e4;
  --fab-3d-bg:            #261947;
  --fab-3d-fg:            #e4d9ff;
  --fab-qa-bg:            #2a1d0a;
  --fab-qa-fg:            #fce8bb;
  --fab-layers-bg:        #1a0f2e;
  --fab-canvas-bg:        #0a1628;
  --fab-canvas-fg:        #cfe6ff;
  --fab-fullscreen-bg:    #14202b;
  --fab-fullscreen-border:#6b7a8c;
  --fab-fullscreen-fg:    #d6dde6;
  --fab-fullscreen-svg:   #9aa6b6;
  --fab-delete-fg:        #f87171;
  --asm3d-tb-active:      #10b981;
}

/* Auto dark theme based on OS preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0f1117;
    --surface:    #1a1d27;
    --panel:      #141620;
    --raised:     #252836;
    --hover-bg:   rgba(255,255,255,0.04);
    --border:     rgba(255,255,255,0.1);
    --border-dk:  rgba(255,255,255,0.18);
    --text:       #e2e8f0;
    --text2:      #b0b8c8;
    --muted:      #64748b;
    --accent:     #38a3ff;
    --accent2:    #60b8ff;
    --accent-soft: rgba(56,163,255,0.12);
    --success:    #10b981;
    --success-soft: rgba(16,185,129,0.12);
    --success-border: rgba(16,185,129,0.22);
    --success-border-strong: rgba(16,185,129,0.3);
    --error:      #f87171;
    --error-soft: rgba(248,113,113,0.12);
    --error-border: rgba(248,113,113,0.35);
    --error-border-soft: rgba(248,113,113,0.25);
    --warning:    #fbbf24;
    --warning-soft: rgba(251,191,36,0.12);
    --warning-bg-soft: rgba(251,191,36,0.1);
    --warning-border: rgba(251,191,36,0.4);
    --warning-border-strong: rgba(251,191,36,0.35);
    --warning-border-soft: rgba(251,191,36,0.28);
    --error-border-strong: rgba(248,113,113,0.5);
    --accent-bg-soft:   rgba(56,163,255,0.14);
    --accent-bg-soft-2: rgba(56,163,255,0.18);
    --accent-bg-tint:   rgba(56,163,255,0.08);
    --accent-bg-input:  rgba(56,163,255,0.06);
    --accent-border:    rgba(56,163,255,0.3);
    --accent-border-strong: rgba(56,163,255,0.4);
    --accent-glow:      0 0 30px rgba(56,163,255,0.15);
    --accent-focus-ring: 0 0 0 3px rgba(56,163,255,0.18);
    --error-text-on-soft: #fca5a5;
    --warning-text-on-soft: #fcd34d;
    --shadow-xs-border: 0 1px 3px rgba(0,0,0,0.3);
    --toast-shadow:    0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.06);
    --toast-ok-bg:     #10b981;
    --toast-ok-fg:     #fff;
    --toast-err-bg:    #ef4444;
    --toast-err-fg:    #fff;
    --toast-warn-bg:   #f59e0b;
    --toast-warn-fg:   #1a1d27;
    --toast-info-bg:   #0095ff;
    --toast-info-fg:   #fff;
    --sd-modal-bg:        #1a1d27;
    --sd-modal-border:    rgba(255,255,255,0.08);
    --sd-modal-shadow:    0 24px 60px rgba(0,0,0,0.5);
    --sd-modal-text:      #e2e8f0;
    --sd-modal-title:     #fff;
    --sd-modal-msg:       #a1a5b7;
    --sd-cancel-fg:       #94a3b8;
    --sd-cancel-border:   rgba(255,255,255,0.12);
    --sd-cancel-hover-bg: rgba(255,255,255,0.05);
    --sd-primary-hover:   #0080e0;
    --sd-danger-bg:       #ef4444;
    --sd-danger-hover:    #dc2626;
    --sd-form-input-bg:   #0f1218;
    --sd-pill-border:     rgba(255,255,255,0.14);
    --sd-pill-fg:         #cbd5e1;
    --sd-success-fg:      #10b981;
    --sd-code-fg:         #60a5fa;
    --sa-err-bg:            #0f1117;
    --sa-err-fg:            #fff;
    --sa-err-sub:           #8896a8;
    --sa-badge-gradient:    linear-gradient(135deg, var(--accent), #8b5cf6);
    --sa-badge-fg:          #fff;
    --sa-violet:            #a78bfa;
    --sa-violet-bg:         rgba(167,139,250,0.18);
    --sa-violet-border:     rgba(167,139,250,0.4);
    --sa-violet-soft:       rgba(167,139,250,0.08);
    --sa-preview-bg:        #22252e;
    --sa-preview-email-bg:  #1a1d27;
    --sa-ws-danger-bg:      rgba(248,113,113,0.14);
    --sa-ws-danger-fg:      #fca5a5;
    --sa-ws-danger-border:  rgba(248,113,113,0.4);
    --sa-ws-danger-outline: rgba(248,113,113,0.5);
    --sa-ws-danger-inset:   rgba(248,113,113,0.2);
    --sa-ticket-new-bg:     rgba(248,113,113,0.2);
    --sa-ticket-replied-bg: rgba(251,191,36,0.2);
    --sa-ticket-closed-bg:  rgba(16,185,129,0.2);
    --sa-ticket-num-bg:     rgba(56,163,255,0.18);
    --sa-code-bg-opaque:    rgba(0,0,0,0.35);
    --sa-flash-bg:          rgba(56,163,255,0.3);
    --sa-shadow-tab:        0 1px 3px rgba(0,0,0,0.4);
    --sa-shadow-card-hover: 0 4px 16px rgba(0,0,0,0.35);
    --sa-storage-heavy-bg:  rgba(251,191,36,0.1);
    --sa-storage-warn-bg:   rgba(251,191,36,0.12);
    --sa-storage-warn-border: rgba(251,191,36,0.35);
    --sa-storage-expired-fg: #f87171;
    --sa-storage-saved-fg:  #4ade80;
    --sa-storage-purge-bg:  rgba(248,113,113,0.1);
    --sa-storage-purge-border: rgba(248,113,113,0.3);
    --sa-storage-purge-h4:  #f87171;
    --sa-storage-err-bg:    rgba(248,113,113,0.12);
    --sa-storage-err-border: rgba(248,113,113,0.35);
    --sa-storage-err-fg:    #fca5a5;
    --auth-violet:           #a78bfa;
    --auth-violet-fg:        #c4b5fd;
    --auth-violet-soft:      rgba(167,139,250,0.08);
    --auth-violet-bg-soft:   rgba(167,139,250,0.2);
    --auth-violet-border:    rgba(167,139,250,0.4);
    --shadow-auth-card: 0 24px 64px rgba(0,0,0,0.7);
    --canvas-bg:       #1a1d27;
    --canvas-grid:     rgba(100,180,100,0.1);
    --canvas-grid-mid: rgba(255,255,255,0.05);
    --canvas-grid-fine: rgba(255,255,255,0.02);
    --canvas-ruler-bg: #1e2028;
    --canvas-ruler-alt: #252836;
    --canvas-ruler-corner: #0d0e14;
    --hdr-bg:     #0a0b10;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
    --shadow-modal: 0 20px 60px rgba(0,0,0,0.6);
    --shadow-modal-lg: 0 24px 64px rgba(0,0,0,0.7);
    --overlay:    rgba(0,0,0,0.65);
    --overlay-strong: rgba(0,0,0,0.75);
    --danger-bg:        rgba(248,113,113,0.12);
    --danger-bg-hover:  rgba(248,113,113,0.2);
    --danger-border:    rgba(248,113,113,0.3);
  }
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--sans); }

/* ── SCROLLBARS ── */
/* Hide number input spinners */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
input[type="number"] { -moz-appearance:textfield; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:var(--radius-sm); }

/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */
header {
  background:var(--hdr-bg);
  display:flex; flex-direction:column; flex-shrink:0;
  box-shadow:0 2px 14px var(--black-a50);
  border-bottom:2px solid var(--accent-a50);
  /* Push the header below any device notch / Dynamic Island. --safe-top
     comes from responsive.css and resolves to env(safe-area-inset-top, 0px).
     On a desktop browser this is 0px and the header sits flush with the
     viewport edge; on iPhone with a notch the header offsets so its
     first row clears the cutout. */
  padding-top: var(--safe-top, 0px);
}