/**
 * DESIGN TOKENS
 *
 * Unified CSS custom properties for the Momentrax design system.
 * This is the single source of truth for all colors, spacing, and component sizing.
 *
 * Import this file FIRST, before other stylesheets, so tokens can be overridden
 * by component-specific styles if needed.
 *
 * Reference: /docs/DESIGN_TOKENS.md
 */

:root {
  /* ================================================================
     SEMANTIC COLOR TOKENS
     ================================================================ */

  /* Primary (Brand Actions) */
  --brand-500: #0ea5e9;    /* Primary action, links, active states */
  --brand-600: #0284c7;    /* Hover/pressed state */
  --brand-050: #e8f6fe;    /* Tint: icon chips, active-nav bg, table hover */

  /* Surface & Layout */
  --page-bg: #f4f6fa;      /* Main page background */
  --card-bg: #ffffff;      /* Card/panel surface */
  --navy-900: #0b1b33;     /* Sidebar background */
  --navy-800: #12274a;     /* Sidebar hover state */

  /* Text (Hierarchy) */
  --text-900: #0f1c2e;     /* Headings, KPI values, money figures */
  --text-600: #51607a;     /* Body text, descriptions */
  --text-400: #8a96ab;     /* Labels, captions, placeholders (AA contrast min) */

  /* Borders & Dividers */
  --border: #e5e9f0;       /* All hairlines and dividers */

  /* Status Colors (Reserved for status/state ONLY, never decoration) */
  --ok-600: #178a50;       /* Paid, success, active */
  --ok-050: #e8f6ee;       /* Paid background tint */

  --warn-700: #b45309;     /* Due, partial, pending */
  --warn-050: #fdf3e3;     /* Due background tint */

  --bad-600: #d5433c;      /* Overdue, void, error, critical */
  --bad-050: #fceceb;      /* Overdue background tint */

  /* ================================================================
     COMPONENT TOKENS
     ================================================================ */

  /* Spacing & Radius */
  --radius-card: 12px;     /* Cards, panels, modals */
  --radius-ctl: 8px;       /* Buttons, inputs, small elements */

  /* Shadow (Single elevation, no layered depths) */
  --shadow: 0 1px 2px rgba(15, 28, 46, 0.05),
            0 4px 14px rgba(15, 28, 46, 0.05);

  /* Sidebar & Layout */
  --sidebar-width: 270px;  /* Fixed sidebar width */
  --nav-height: 64px;      /* Top navigation bar height */

  /* Transitions */
  --transition: all 0.3s ease;

  /* ================================================================
     LEGACY ALIASES (Backward Compatibility)

     These map old token names to new ones during migration.
     Deprecate these after all templates are updated.
     ================================================================ */

  /* Neptune → Unified names */
  --text-main: var(--text-900);        /* Neptune: --text-main */
  --primary: var(--brand-500);         /* Neptune: --primary */
  --primary-dark: var(--brand-600);    /* Neptune: --primary-dark */
  --primary-light: var(--brand-050);   /* Neptune: --primary-light */

  /* Momentrax → Unified names */
  --sidebar-bg: var(--navy-900);       /* Momentrax: --sidebar-bg */
  --sidebar-hover: var(--navy-800);    /* Momentrax: --sidebar-hover */
  --primary-color: var(--brand-500);   /* Momentrax: --primary-color */

  /* Old status color names (if used anywhere) */
  --ok: var(--ok-600);
  --warn: var(--warn-700);
  --danger: var(--bad-600);
}

/* ================================================================
   COLOR USAGE REFERENCE (Do not edit)
   ================================================================

   SEMANTIC COLORS (when to use):
   - brand-500/600: All interactive elements (buttons, links, focus rings, active nav, chart lines)
   - brand-050: Hover tints, icon chip backgrounds, active nav backgrounds
   - text-900: Headings, KPI values, money figures (always dark)
   - text-600: Body text, descriptions
   - text-400: Labels, captions, placeholders (never lighter on white)
   - ok-600/050: Paid status, success, active states
   - warn-700/050: Due status, partial payments, pending
   - bad-600/050: Overdue status, void, errors, critical alerts

   HARD RULES:
   1. Green/amber/red ONLY for status communication, never decoration
   2. All interactive elements use brand-500/600 (no color rainbow)
   3. All money values use text-900 (never status color)
   4. Never go lighter than text-400 on white backgrounds (AA contrast)

   ================================================================ */