/* ═══════════════════════════════════════════════════════════════
   NE MANAGER — Design Tokens
   Single source of truth for the new design system.
   Loaded BEFORE design_system.css so legacy aliases can reference
   these tokens during the migration period.
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  /* === NE MANAGER DESIGN TOKENS === */

  /* Typography — DM Sans for body, Montserrat for headings */
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-heading: 'Montserrat', system-ui, sans-serif;

  /* Font sizes — modular scale */
  --text-xs: 0.75rem;       /* 12px — captions, labels */
  --text-sm: 0.875rem;      /* 14px — secondary text */
  --text-base: 1rem;         /* 16px — body */
  --text-lg: 1.125rem;       /* 18px — emphasized body */
  --text-xl: 1.25rem;        /* 20px — card titles */
  --text-2xl: 1.5rem;        /* 24px — section headings */
  --text-3xl: 2rem;          /* 32px — page titles */

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Brand Colors ── */
  /* Primary brand: deep teal #073540 — used for headings, nav, primary buttons */
  /* Secondary brand: soft celadon #ACE1AF — used for highlights, accents, subtle bg */
  /* Background: clean white #FAFAFA */

  /* Surfaces & Backgrounds */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-surface-subtle: #F3F5F4;         /* very faint tint of the brand palette */
  --color-border: #D9E0DE;
  --color-border-subtle: #E8EDEB;

  /* Text */
  --color-text-primary: #073540;           /* brand deep teal as primary text */
  --color-text-secondary: #4A6670;         /* mid-tone derived from brand teal */
  --color-text-tertiary: #8A9FA7;          /* light muted teal-grey */
  --color-text-inverse: #FAFAFA;

  /* Accent — brand deep teal for primary actions */
  --color-accent: #073540;
  --color-accent-hover: #0A4A58;           /* slightly lighter on hover for feedback */
  --color-accent-subtle: #E8F5E9;          /* very faint celadon wash */
  --color-accent-muted: #ACE1AF;           /* brand celadon — tags, highlights, soft accents */

  /* Secondary accent — celadon for supporting elements */
  --color-secondary: #ACE1AF;
  --color-secondary-hover: #96D49A;
  --color-secondary-subtle: #E8F5E9;

  /* Semantic */
  --color-success: #2E8B57;                /* natural green — feels at home with energy theme */
  --color-warning: #D4930D;
  --color-error: #C94A3F;
  --color-info: #3B82C4;

  /* Semantic tint backgrounds (for alerts, badges, status indicators) */
  --color-success-bg: #E8F5E9;
  --color-success-border: #A5D6A7;
  --color-success-text: #1B5E38;
  --color-success-dark: #047857;
  --color-warning-bg: #FFF8E1;
  --color-warning-border: #FFD54F;
  --color-warning-text: #8B6914;
  --color-error-bg: #FEF2F2;
  --color-error-border: #FECACA;
  --color-info-bg: #EBF5FF;
  --color-info-border: #93C5FD;
  --color-neutral-bg: #F3F5F4;
  --color-neutral-text: #4A6670;

  /* Spacing — 4px base unit */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows — soft, layered */
  --shadow-sm: 0 1px 2px rgba(7,53,64,0.04), 0 1px 3px rgba(7,53,64,0.03);
  --shadow-md: 0 2px 8px rgba(7,53,64,0.05), 0 4px 16px rgba(7,53,64,0.03);
  --shadow-lg: 0 4px 16px rgba(7,53,64,0.06), 0 8px 32px rgba(7,53,64,0.04);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Extended Tokens (JS-accessible) ── */

  /* Technology colors — used in overview tiles, equipment badges, charts */
  --color-tech-solar: #D4930D;
  --color-tech-solar-bg: #FEF3C7;
  --color-tech-bess: #3B82C4;
  --color-tech-bess-bg: #DBEAFE;
  --color-tech-wind: #2E8B57;
  --color-tech-wind-bg: #E8F5E9;

  /* Chart palette — canonical 12-color sequence for data visualisation */
  --color-chart-1: #073540;
  --color-chart-2: #2E8B57;
  --color-chart-3: #D4930D;
  --color-chart-4: #3B82C4;
  --color-chart-5: #7C3AED;
  --color-chart-6: #C94A3F;
  --color-chart-7: #0891B2;
  --color-chart-8: #65A30D;
  --color-chart-9: #EA580C;
  --color-chart-10: #4F46E5;
  --color-chart-11: #DB2777;
  --color-chart-12: #059669;

  /* Overlay / modal backdrop */
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-overlay-light: rgba(0, 0, 0, 0.12);

  /* Chart axis and grid */
  --color-chart-grid: #E5E7EB;
  --color-chart-axis: #6B7280;
  --color-chart-label: #374151;

  /* Disabled / muted interactive */
  --color-disabled: #9CA3AF;
  --color-disabled-bg: #F3F4F6;

  /* Risk severity */
  --color-risk-critical: #EF4444;
  --color-risk-high: #F97316;
  --color-risk-medium: #FDE68A;
  --color-risk-low: #E8F5E9;

  /* BESS state colors */
  --color-bess-charging: #E8F5E9;
  --color-bess-discharging-bg: #EDE7F6;
  --color-bess-discharging: #6B46C1;
}

/* --- Base styles --- */
html {
  font-size: var(--text-base);
  line-height: 1.6;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}