/* ═══════════════════════════════════════════════════════════════
   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-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);
}

/* --- 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;
}