/* ExMart Energy — design tokens. Values sampled from the approved reference designs. */
:root {
  /* Surface — deep navy (pages 11–40, site default) */
  --color-background-deep: #040B13;
  --color-background-primary: #07111D;
  --color-background-secondary: #091521;
  --color-panel-primary: #0B1725;
  --color-panel-secondary: #111E2E;
  --color-panel-raised: #16243550;
  --color-border: #1E2E40;
  --color-border-strong: #26384C;
  /* R49: used by .tracker--vertical, .glossary__item and a dozen super-admin rules since
     before this release, and never declared — every one of those borders was resolving to
     currentColor, which is why they took the colour of whatever text sat beside them. */
  --color-border-subtle: #16222F;

  /* Brand */
  --color-gold-primary: #D7A62A;
  --color-gold-highlight: #F2C552;
  --color-gold-deep: #A87E18;
  --color-gold-wash: rgba(215, 166, 42, .10);
  --color-gold-edge: rgba(215, 166, 42, .38);

  /* Text */
  --color-text-primary: #F5F7FA;
  --color-text-secondary: #AAB4C2;
  --color-text-muted: #6D7A8A;
  --color-text-inverse: #050B12;

  /* Status */
  --color-success: #42C77A;
  --color-success-wash: rgba(66, 199, 122, .12);
  --color-danger: #FF6258;
  --color-danger-wash: rgba(255, 98, 88, .12);
  --color-warning: #E9A23B;
  --color-warning-wash: rgba(233, 162, 59, .12);
  --color-information: #3B82F6;
  --color-information-wash: rgba(59, 130, 246, .14);
  --color-violet: #8B5CF6;
  --color-violet-wash: rgba(139, 92, 246, .14);

  /* Per-service accent — overridden on service pages */
  --service-accent: var(--color-gold-primary);
  --service-accent-wash: var(--color-gold-wash);

  /* Type */
  --font-display: "Inter Tight", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, "Courier New", monospace;

  --fs-hero: clamp(2.5rem, 5vw, 3.75rem);
  --fs-h1: clamp(2rem, 3.6vw, 2.75rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body: 0.9375rem;
  --fs-sm: 0.8125rem;
  --fs-xs: 0.75rem;
  --fs-label: 0.6875rem;

  /* Space */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 8px 24px rgba(0, 0, 0, .45);
  --sh-3: 0 20px 48px rgba(0, 0, 0, .55);
  --sh-gold: 0 6px 20px rgba(215, 166, 42, .22);

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(16px, 4vw, 32px);
  /* 264px sits inside the 260–280px the dashboard specification asks for, and is what
     "Reports & Analytics" needs at 13px with an 18px icon and 14px of padding either
     side. At 232px that label truncated on every one of the four account types. */
  --sidebar-w: 264px;
  --sidebar-drawer-w: 280px;
  --header-h: 72px;
  --topbar-h: 68px;

  /* Motion */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 200ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);
}

/* Pure-black surface used by the approved pages 1–10.
   Applied to html as well, so overscroll and any area outside the body box stay black
   rather than falling back to the navy default. */
html:has(> body.surface-black) { background: #000000; }

body.surface-black {
  --color-background-deep: #000000;
  --color-background-primary: #000000;
  --color-background-secondary: #070707;
  --color-panel-primary: #0E0E0E;
  --color-panel-secondary: #141414;
  --color-border: #1C1C1C;
  --color-border-strong: #2A2A2A;
}

/* Service accents */
body.accent-blue   { --service-accent: var(--color-information); --service-accent-wash: var(--color-information-wash); }
body.accent-violet { --service-accent: var(--color-violet);      --service-accent-wash: var(--color-violet-wash); }