/*
 * EPRI Grounding Agent — Design Tokens & Theme
 *
 * Aligned with the EPRI Design System v1.0.1
 * (epri-code/epri-skills :: .github/skills/epri-design-system/SKILL.md).
 *
 * Identity: Material Blue #1976D2 primary, dark-impact surfaces (#212121),
 * Roboto for UI text, Montserrat for display headings, sector color coding,
 * professional credibility through clean structure and sufficient contrast.
 *
 * WCAG AA contrast ratios verified:
 *   --text-primary   on --bg-page:    12.6:1
 *   --text-secondary on --bg-page:     7.0:1
 *   --text-muted     on --bg-page:     4.6:1
 *   white            on --accent:      4.8:1
 *   white            on --brand-bar:   4.8:1
 */

:root {
  /* ── Surface colors ──────────────────────────────────── */
  --bg-page:        #F5F5F5;        /* EPRI page default */
  --bg-card:        #ffffff;
  --bg-card-header: #FAFAFA;
  --bg-sidebar:     #ffffff;
  --bg-input:       #F5F5F5;
  --bg-hover:       #EEEEEE;
  --bg-active:      rgba(25, 118, 210, 0.10);   /* primary @ 10% */
  --bg-code:        #EEEEEE;

  /* Dark impact surfaces (logged-out navbar, hero, sidebar dark variants) */
  --surface-900:    #212121;
  --surface-800:    #1e293b;
  --surface-700:    #334155;

  /* ── Border colors ───────────────────────────────────── */
  --border:         #E0E0E0;
  --border-light:   #EEEEEE;
  --border-focus:   #1976D2;

  /* ── Text colors ─────────────────────────────────────── */
  --text-primary:   #212121;        /* neutral-900 */
  --text-secondary: #424242;        /* neutral-800 */
  --text-muted:     #757575;        /* neutral-600 */
  --text-inverse:   #ffffff;

  /* ── Brand / accent ─────────────────────────────────────
   * EPRI primary blue (Material #1976D2). Used for primary
   * actions, links, active states, nav highlights, focus rings.
   */
  --accent:         #1976D2;        /* EPRI primary */
  --accent-hover:   #1565C0;        /* hover/active */
  --accent-light:   rgba(25, 118, 210, 0.10);
  --accent-tint:    rgba(25, 118, 210, 0.20);
  --accent-soft:    #42A5F5;        /* lighter variant for dark bg */
  --accent-text:    #1976D2;

  /* ── Brand bar (logged-in navbar style) ──────────────── */
  --brand-bar:        #1976D2;
  --brand-bar-text:   #ffffff;
  --brand-bar-muted:  rgba(255, 255, 255, 0.78);
  --brand-bar-border: #1565C0;

  /* ── Semantic colors (EPRI spec) ─────────────────────── */
  --success:        #4CAF50;
  --success-bg:     #E8F5E9;
  --success-text:   #1B5E20;

  --warning:        #FFC107;
  --warning-bg:     #FFF8E1;
  --warning-text:   #5D4037;

  --danger:         #B71C1C;
  --danger-bg:      #FFEBEE;
  --danger-text:    #B71C1C;

  --info:           #1976D2;
  --info-bg:        #E3F2FD;
  --info-text:      #0D47A1;

  --running:        #1976D2;
  --pending:        #FFC107;
  --completed:      #4CAF50;
  --failed:         #B71C1C;
  --cancelled:      #757575;

  /* ── Sector color coding (research domains) ──────────── */
  --sector-nuclear:           #6A1B9A;
  --sector-generation:        #E65100;
  --sector-energy-delivery:   #1A237E;
  --sector-tech-innovation:   #00695C;

  /* ── Typography ──────────────────────────────────────── */
  --font-sans:      'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Montserrat', 'Roboto', system-ui, sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, Consolas, monospace;

  --text-xs:        12px;
  --text-sm:        14px;
  --text-base:      16px;
  --text-lg:        20px;
  --text-xl:        24px;
  --text-2xl:       32px;
  --text-3xl:       40px;

  /* ── Spacing (EPRI scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64) */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-12:       48px;
  --space-16:       64px;

  /* ── Radius (EPRI scale) ─────────────────────────────── */
  --radius-sm:      4px;
  --radius-default: 6px;
  --radius-md:      8px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --radius-2xl:     32px;
  --radius-full:    9999px;

  /* ── Shadows (EPRI scale) ────────────────────────────── */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.05);
  --shadow-default: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:      0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-lg:      0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-card:    var(--shadow-default);
  --shadow-brand:   0 2px 8px rgba(25, 118, 210, .15);

  /* ── Transitions ─────────────────────────────────────── */
  --transition:     all 0.3s ease;
  --transition-fast: 150ms ease;

  /* ── Brand bar height (referenced by layout.css) ─────── */
  --brand-bar-h:    56px;

  /* ── Section heading gradient (signature EPRI element) ── */
  --gradient-heading: linear-gradient(91deg, #075EA8 1.09%, #940EA3 99.99%);
  --gradient-dark:    linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}