/* =========================================================
   JCI ERODE CAUVERY — DESIGN TOKENS
   Centralized design system. Every color, radius, spacing,
   and shadow used anywhere in the app must reference a
   variable from here — never a hardcoded value in page CSS.
   ========================================================= */

:root {
  /* ---- Brand colors (from logo: navy + blue + teal) ---- */
  --color-primary: #0B2D6B;        /* Deep JCI navy/blue */
  --color-primary-dark: #071D48;
  --color-primary-light: #E8EEF9;
  --color-secondary: #1E8FD5;      /* Professional sky blue (shield blue) */
  --color-secondary-light: #EAF5FC;
  --color-teal: #4AC7B9;           /* Shield teal accent */
  --color-accent: #D4A72C;         /* Subtle gold — awards, recognition */
  --color-accent-light: #FBF3DD;

  /* ---- Surfaces / backgrounds ---- */
  --color-background: #F7F9FC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F1F4F9;

  /* ---- Text ---- */
  --color-text: #14213D;
  --color-text-secondary: #4B5A75;
  --color-muted: #8592A8;
  --color-on-primary: #FFFFFF;

  /* ---- Borders ---- */
  --color-border: #E3E8F0;
  --color-border-strong: #CBD5E5;

  /* ---- Status ---- */
  --color-success: #1E9E6B;
  --color-success-light: #E6F7EF;
  --color-warning: #C9821B;
  --color-warning-light: #FCF1E0;
  --color-danger: #D64545;
  --color-danger-light: #FBEAEA;
  --color-info: #1E8FD5;
  --color-info-light: #EAF5FC;

  /* ---- Blood / urgent utility accent (used sparingly, Section 20) ---- */
  --color-blood: #C0392B;
  --color-blood-light: #FBEBEA;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 33, 61, 0.08);
  --shadow-lg: 0 10px 30px rgba(20, 33, 61, 0.12);
  --shadow-focus: 0 0 0 3px rgba(30, 143, 213, 0.35);

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Typography (reduced scale) ---- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-page-title: 600 22px/1.3 var(--font-family);
  --text-section-heading: 600 16px/1.35 var(--font-family);
  --text-card-heading: 600 14px/1.4 var(--font-family);
  --text-body: 400 13px/1.6 var(--font-family);
  --text-body-medium: 500 13px/1.6 var(--font-family);
  --text-meta: 400 11.5px/1.5 var(--font-family);
  --text-button: 600 13px/1 var(--font-family);

  /* ---- Layout ---- */
  --max-content-width: 1320px;
  --sidebar-width: 264px;
  --header-height: 64px;
  --bottom-nav-height: 64px;

  /* ---- Motion ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 250ms ease;

  /* ---- Safe areas (Section 45) ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Dark theme scaffold (Section 46 — architecture ready, light-first) ---- */
[data-theme='dark'] {
  --color-background: #0E1526;
  --color-surface: #161F35;
  --color-surface-alt: #1D2740;
  --color-text: #EEF2FA;
  --color-text-secondary: #B7C1D6;
  --color-muted: #7C89A3;
  --color-border: #263252;
  --color-border-strong: #32406A;
  --color-primary-light: #1B2A4C;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}