/* =============================================================================
   Stratis Design Standard — Blazor Blueprint theme
   -----------------------------------------------------------------------------
   Blueprint (shadcn/ui) components read the variables in the mode blocks below.
   Stratis-specific additions cover what shadcn does not ship: a fuller text
   ramp, semantic ok/warn/info triplets, and chart slots 6-8.

   Dark is the product default. Toggle via BbDarkModeToggle / ThemeService —
   class="dark" on <html> is applied by theme.js and the inline FOUC script in
   index.html, not hardcoded.

   CAUTION: --accent here means shadcn's *hover surface*, not the brand purple.
   The brand purple is --primary (and --ring). See MIGRATION-BLAZOR-BLUEPRINT.md.
   ========================================================================== */

/* --- Shared (mode-independent) ------------------------------------------- */

:root {
  /* Brand purple — same in both modes */
  --primary:            #8b4de8;
  --primary-foreground: #ffffff;

  --destructive:            #ef4444;
  --destructive-foreground: #ffffff;

  --ring:   #8b4de8;
  --radius: 0.375rem;

  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Semantic triplets. shadcn ships only --destructive. */
  --ok:      #22c55e;
  --ok-bg:   rgba(34, 197, 94, 0.10);
  --ok-b:    rgba(34, 197, 94, 0.25);
  --warn:    #eab308;
  --warn-bg: rgba(234, 179, 8, 0.10);
  --warn-b:  rgba(234, 179, 8, 0.25);
  --err-bg:  rgba(239, 68, 68, 0.10);
  --err-b:   rgba(239, 68, 68, 0.25);
  --info:    #3b82f6;
  --info-bg: rgba(59, 130, 246, 0.10);
  --info-b:  rgba(59, 130, 246, 0.25);

  /* Brand triplet for tinted surfaces */
  --brand-bg:        rgba(139, 77, 232, 0.10);
  --brand-b:         rgba(139, 77, 232, 0.25);
  --brand-bg-strong: rgba(139, 77, 232, 0.20);

  /* Chart series */
  --chart-1: #4b9cf5;
  --chart-2: #8b4de8;
  --chart-3: #22c55e;
  --chart-4: #ef4444;
  --chart-5: #eab308;
  --chart-6: #2dd4bf;
  --chart-7: #f59e0b;
  --chart-8: #d946ef;

  /* Layout geometry */
  --appbar-height:      3.5rem;
  --side-panel-width:   30rem;
  --sidebar-width:      240px;
  --sidebar-width-icon: 3.5rem;

  /* Main content area — subnav pages zero #page-body via local <style>. */
  --page-padding-x:       1.5rem;
  --page-padding-top:     0;
  --page-padding-bottom:  1.5rem;
  --appbar-bg:            var(--background);

  /* BbSheet / BbDialog overlay scrim (Blueprint default is bg-black/80). */
  --sheet-overlay: rgba(15, 23, 42, 0.04);

  /* Sidebar item metrics — same rhythm in both modes */
  --sidebar-menu-button-height:         2.375rem;
  --sidebar-menu-button-px:             0.625rem;
  --sidebar-menu-button-py:             0;
  --sidebar-menu-button-font-size:      0.8125rem;
  --sidebar-menu-button-line-height:    1rem;
  --sidebar-menu-button-font-weight:    400;
  --sidebar-menu-button-radius:         0.5rem;
  --sidebar-menu-button-gap:            0.6875rem;
  --sidebar-menu-button-icon-size:      1.0625rem;
  --sidebar-menu-button-collapsed-size: 2.375rem;
  --sidebar-menu-gap:                   0.1875rem;
  --sidebar-group-label-font-size:      0.6875rem;
  --sidebar-group-label-font-weight:    500;
  --sidebar-group-label-height:         2rem;
  --sidebar-group-label-px:             0.625rem;
  --sidebar-group-px:                   0.5rem;
  --sidebar-group-py:                   0.5rem;
  --sidebar-content-gap:                0.625rem;
  --sidebar-content-px:                 0.5rem;
  --sidebar-header-py:                  1.125rem;
  --sidebar-header-px:                  0.875rem;
  --sidebar-footer-py:                  0.875rem;
  --sidebar-footer-px:                  0.5rem;
}

/* --- Light mode (default :root) ------------------------------------------ */

:root {
  color-scheme: light;

  /* Neutral shell — purple is accent-only, like New Relic's blue-on-gray. */
  --background:         #ffffff;
  --foreground:         #1a1f26;
  --card:               #ffffff;
  --card-foreground:    #1a1f26;
  --popover:            #ffffff;
  --popover-foreground: #1a1f26;

  --secondary:            #f3f4f6;
  --secondary-foreground: #1a1f26;
  --muted:                #f3f4f6;
  --muted-foreground:     #6b7280;

  --accent:            #f3f4f6;
  --accent-foreground: #1a1f26;

  --border: #e5e7eb;
  --input:  #e5e7eb;

  --t1: #374151;
  --t2: var(--muted-foreground);
  --t3: #9ca3af;

  /* Light mode: structure from borders, not drop shadows. */
  --sh:    0 1px 2px rgba(15, 23, 42, 0.04);
  --sh-md: 0 2px 6px rgba(15, 23, 42, 0.06);
  --sh-lg: 0 4px 12px rgba(15, 23, 42, 0.08);

  --edge-hi:        none;
  --edge-hi-strong: none;

  --sh-group:       none;
  --surface-group:  #ffffff;

  --scrollbar-thumb: rgba(15, 23, 42, 0.14);

  --brand-bg:        rgba(139, 77, 232, 0.06);
  --brand-b:         rgba(139, 77, 232, 0.14);
  --brand-bg-strong: rgba(139, 77, 232, 0.10);

  --sidebar:            #f9fafb;
  --sidebar-foreground: #374151;
  --sidebar-border:     #e5e7eb;
  --sidebar-ring:       #8b4de8;
  --sidebar-accent:            #f3f4f6;
  --sidebar-accent-foreground: #1a1f26;
  --sidebar-menu-button-active-bg:          rgba(139, 77, 232, 0.08);
  --sidebar-menu-button-active-color:       #1a1f26;
  --sidebar-menu-button-active-font-weight: 500;
  --sidebar-menu-button-active-shadow:      none;
}

/* --- Dark mode (.dark on <html>) ----------------------------------------- */

.dark {
  color-scheme: dark;

  /* Surfaces darkened further (~20% again) for clearer contrast. */
  --background:         #0a060d;
  --foreground:         #faf9fb;
  --card:               #0e0a0f;
  --card-foreground:    #faf9fb;
  --popover:            #0e0a0f;
  --popover-foreground: #faf9fb;

  --secondary:            #151119;
  --secondary-foreground: #faf9fb;
  --muted:                #151119;
  --muted-foreground:     #8b7d96;

  --accent:            #1d1822;
  --accent-foreground: #faf9fb;

  /* Borders: mid contrast — lighter than surfaces, not as bright as #2d2535. */
  --border: #241e2a;
  --input:  #2d2535;

  --t1: #b3a6be;
  --t2: var(--muted-foreground);
  --t3: #5a4d65;

  --sh:    0 1px 3px rgba(0, 0, 0, .6);
  --sh-md: 0 4px 8px rgba(0, 0, 0, .5);
  --sh-lg: 0 12px 24px rgba(0, 0, 0, .6);

  --edge-hi:        inset 0 1px 0 rgba(255, 255, 255, .05);
  --edge-hi-strong: inset 0 1px 0 rgba(255, 255, 255, .08);

  --sh-group:       0 10px 28px rgba(0, 0, 0, .5);
  --surface-group:  #0b080e;

  --scrollbar-thumb: rgba(255, 255, 255, 0.2);

  --sidebar:            #070509;
  --sidebar-foreground: #cfc8d6;
  --sidebar-border:     #241e2a;
  --sidebar-ring:       #8b4de8;
  --sidebar-accent:            rgba(255, 255, 255, 0.045);
  --sidebar-accent-foreground: #faf9fb;
  --sidebar-menu-button-active-bg:          rgba(139, 77, 232, 0.16);
  --sidebar-menu-button-active-color:       #faf9fb;
  --sidebar-menu-button-active-font-weight: 500;
  --sidebar-menu-button-active-shadow:      none;

  --appbar-bg: var(--card);
  --sheet-overlay: rgba(0, 0, 0, 0.14);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}