:root{
  /* ── MIDNIGHT PETROLEUM — Deep Navy ─────────────────
     #0B1121  Deep base        #1a1e23  Surface
     #22262b  Elevated         #2a2f36  Raised
     #4A7AB5  Navy accent      #3A6A9F  Deep navy
  ────────────────────────────────────────────────────── */

  /* Accent — deep navy */
  --accent-rgb:74,122,181;
  --accent:#4A7AB5;
  --accent-hover:#6B9AD4;
  --accent-deep:#3A6A9F;
  --accent-deep-rgb:58,106,159;

  /* Surfaces — deep navy */
  --bg:#0D1117;
  --s1:#1a1e23;
  --s2:#22262b;
  --s3:#2a2f36;
  --s4:#2E3B6A;

  /* Borders */
  --border:rgba(255,255,255,.06);
  --border2:rgba(255,255,255,.12);

  /* Compat aliases → point to accent */
  --gold:var(--accent);
  --gold2:var(--accent-hover);
  --gold3:var(--accent-deep);
  --cta:var(--accent);
  --cta2:var(--accent-hover);
  --teal:#34D399;
  --amber:var(--accent);
  --cyan:var(--accent);
  --deep-teal:var(--accent-deep);
  --charcoal:#22262b;
  --light-gray:#22262b;
  --mid-gray:#6B7080;
  --harbor-mist:#6B7080;

  /* Status (base) */
  --red:#F87171;
  --blue:#60A5FA;
  --green:#0F9D6C;
  --purple:#A78BFA;
  --orange:#FBBF24;

  /* Semantic status colors — used in inline styles + CSS */
  --color-money: #2ecc71;
  --color-green:#2ecc71;    --color-green-rgb:46,204,113;
  --color-red:#ea868f;      --color-red-rgb:234,134,143;
  --color-blue:#6ea8fe;     --color-blue-rgb:110,168,254;
  --color-orange:#FB923C;   --color-orange-rgb:251,146,60;
  --color-purple:#A78BFA;   --color-purple-rgb:167,139,250;
  --color-cyan:#22D3EE;     --color-cyan-rgb:34,211,238;
  /* Brand OG accent — matches the cyan "OG" on oglandman.com.
     Used in the "Scout, by OGLandman" lockup across sidebar,
     auth card, splash screen, and header wordmark. */
  --brand-og-accent:#22D3EE;
  --color-amber:#BA7517;    --color-amber-rgb:186,117,23;
  --color-amber-text:#BA7517; /* dark mode: same as amber; light mode: #925A0E */
  --color-teal:#34D399;
  --color-completed:#3DCA82;
  --color-callback:#E8A84A; --color-callback-rgb:232,168,74;

  /* Call button (only orange element in app) */
  --color-call-btn:#E8732A;
  --color-call-btn-hover:#D4631A;

  /* Surface transparency (theme-aware) */
  --glass:rgba(255,255,255,.06);
  --glass-hover:rgba(255,255,255,.1);
  --glass-strong:rgba(255,255,255,.14);
  --overlay-bg:rgba(0,0,0,.6);

  /* Fallbacks */
  --placeholder:#888;
  --user-dot:#2D3A52;

  /* SVG ring track (works in SVG stroke attributes) */
  --ring-track:rgba(255,255,255,.12);

  /* Text — extra roles */
  --text-on-dark:#dee2e6;  /* always light — for dark sidebar/header */

  /* Typography — warm white */
  --text:#E8E4DC;
  --muted:#8B8578;
  --dim:#5E5850;

  /* Spacing (8px grid) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px;
  --sp-4:16px; --sp-6:24px; --sp-8:32px;

  /* Border Radius */
  --r-sm:6px;  --r-md:8px;  --r-lg:12px;
  --r-xl:16px; --r-full:9999px;

  /* Shadows — neutral deep */
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow-md:0 4px 14px rgba(0,0,0,.5);
  --shadow-lg:0 8px 28px rgba(0,0,0,.6);

  /* Transitions */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.15s;
  --dur-med:.25s;

  /* Z-index layers — centralized stacking order */
  --z-base:0;
  --z-sticky:2;
  --z-dropdown:100;
  --z-header:300;
  --z-sidebar-toggle:400;
  --z-assistant:450;
  --z-overlay:500;
  --z-profile:600;
  --z-search:700;
  --z-modal:900;
  --z-toast:950;
  --z-auth:1000;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:14px;scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:'Inter','DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse 80% 60% at 5% 0%, rgba(30,58,95,.04) 0%, transparent 55%),
  radial-gradient(ellipse 60% 80% at 100% 100%, rgba(30,58,95,.03) 0%, transparent 55%);
  pointer-events:none;z-index:0;}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='topo' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cpath d='M10 80 Q30 60 50 80 T90 80' fill='none' stroke='%234A7AB5' stroke-width='.4' opacity='.10'/%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' fill='none' stroke='%234A7AB5' stroke-width='.3' opacity='.07'/%3E%3Cpath d='M20 20 Q40 5 60 20 T100 20' fill='none' stroke='%234A7AB5' stroke-width='.25' opacity='.05'/%3E%3Cellipse cx='70' cy='65' rx='12' ry='8' fill='none' stroke='%234A7AB5' stroke-width='.3' opacity='.06'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23topo)'/%3E%3C/svg%3E");pointer-events:none;z-index:var(--z-base);opacity:0.07;}