/* ==========================================================================
   JCI Erode Cauvery — Design Tokens
   Centralized CSS variables. Do not scatter arbitrary colors in the project.
   ========================================================================== */

:root {
  /* Brand colors */
  --color-primary: #123B6D;
  --color-primary-dark: #0B2748;
  --color-primary-light: #1B4F8C;
  --color-secondary: #2EA7D6;
  --color-secondary-light: #E4F5FB;
  --color-accent: #D6A63C;
  --color-accent-light: #FBF1DC;

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

  /* Text */
  --color-text: #172033;
  --color-text-inverse: #FFFFFF;
  --color-muted: #667085;
  --color-muted-2: #98A2B3;
  --color-border: #E5EAF0;
  --color-border-strong: #D0D8E4;

  /* Status */
  --color-success: #16A34A;
  --color-success-bg: #E9F9EF;
  --color-warning: #F59E0B;
  --color-warning-bg: #FEF6E7;
  --color-danger: #DC2626;
  --color-danger-bg: #FDECEC;
  --color-info: #2563EB;
  --color-info-bg: #EBF1FE;

  /* Blood (restrained red accent, used only for blood-related UI) */
  --color-blood: #C0273C;
  --color-blood-bg: #FCEAED;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(15, 32, 62, .06);
  --shadow-md: 0 8px 24px rgba(15, 32, 62, .10);
  --shadow-lg: 0 16px 40px rgba(15, 32, 62, .14);
  --shadow-focus: 0 0 0 3px rgba(46, 167, 214, .35);

  /* Layout */
  --container-width: 1400px;
  --content-max-width: 1200px;
  --sidebar-width: 250px;
  --header-height: 64px;
  --bottomnav-height: 64px;
  --mobile-header-height: 56px;

  /* Motion */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;

  /* Type */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Z-index scale */
  --z-header: 40;
  --z-sidebar: 30;
  --z-bottomnav: 40;
  --z-modal-backdrop: 90;
  --z-modal: 100;
  --z-toast: 110;
  --z-lightbox: 120;
}

/* Dark mode architecture — tokens ready, not enabled by default in v1 */
[data-theme="dark"] {
  --color-background: #0B111F;
  --color-surface: #131B2C;
  --color-surface-alt: #1A2438;
  --color-text: #EAEFF7;
  --color-muted: #9AA6BC;
  --color-muted-2: #6B7690;
  --color-border: #232F45;
  --color-border-strong: #2E3C57;
  --color-secondary-light: #143247;
  --color-accent-light: #2E2711;
  --color-success-bg: #0F2A1A;
  --color-warning-bg: #2E2410;
  --color-danger-bg: #2E1416;
  --color-info-bg: #101E37;
  --color-blood-bg: #2A1216;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}