/* =========================================================
   SAMVIDHAN SARAL — DESIGN TOKENS
   Single source of truth for all visual decisions.
   ========================================================= */

:root {
  /* --------------------------------------------------
     COLORS
     Palette: Indian civic depth meets modern clarity
     Primary: midnight navy | Accent: Constitution saffron
  -------------------------------------------------- */
  --color-primary:        #1C2B4A;
  --color-primary-light:  #2D4275;
  --color-primary-dark:   #0F1A2E;

  --color-accent:         #E05A0C;
  --color-accent-light:   #F57235;
  --color-accent-dark:    #B84608;

  --color-civic:          #1B5F9E;   /* flag blue undertone */
  --color-civic-light:    #2E7EC4;

  --color-bg:             #F5F2ED;   /* warm parchment */
  --color-bg-alt:         #EDE9E1;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FDFCFA;

  --color-border:         #DDD8CE;
  --color-border-strong:  #BEB7AB;

  --color-text:           #1A1A22;
  --color-text-secondary: #545468;
  --color-text-tertiary:  #8E8EA0;
  --color-text-on-dark:   #F0EDE8;
  --color-text-on-accent: #FFFFFF;

  --color-success:        #2B7A4B;
  --color-success-bg:     #EBF5EF;
  --color-error:          #C0351E;
  --color-error-bg:       #FDECEA;
  --color-warning:        #C47A0A;
  --color-warning-bg:     #FEF6E4;
  --color-info:           #1B5F9E;
  --color-info-bg:        #E8F0F9;

  /* admin sidebar */
  --color-admin-bg:       #111827;
  --color-admin-surface:  #1F2937;
  --color-admin-border:   #374151;
  --color-admin-text:     #E5E7EB;
  --color-admin-muted:    #9CA3AF;

  /* --------------------------------------------------
     TYPOGRAPHY
  -------------------------------------------------- */
  --font-display: 'Playfair Display', 'Libre Baskerville', Georgia, serif;
  --font-body:    'DM Sans', 'Nunito', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Scale (mobile base) */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

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

  /* --------------------------------------------------
     SPACING (4px base grid)
  -------------------------------------------------- */
  --space-0:  0;
  --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-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* --------------------------------------------------
     BORDER RADIUS
  -------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* --------------------------------------------------
     SHADOWS
  -------------------------------------------------- */
  --shadow-xs:     0 1px 2px rgba(28,43,74,0.06);
  --shadow-sm:     0 1px 4px rgba(28,43,74,0.08), 0 1px 2px rgba(28,43,74,0.04);
  --shadow-md:     0 4px 12px rgba(28,43,74,0.10), 0 2px 4px rgba(28,43,74,0.04);
  --shadow-lg:     0 8px 24px rgba(28,43,74,0.12), 0 4px 8px rgba(28,43,74,0.06);
  --shadow-xl:     0 16px 48px rgba(28,43,74,0.14);
  --shadow-accent: 0 4px 16px rgba(224,90,12,0.30);
  --shadow-inset:  inset 0 1px 3px rgba(28,43,74,0.08);

  /* --------------------------------------------------
     LAYOUT / APP SHELL
  -------------------------------------------------- */
  --header-height:       56px;
  --bottom-nav-height:   62px;
  --drawer-width:        300px;
  --container-max-mobile: 480px;
  --container-max-tablet: 768px;
  --container-max:        1100px;

  /* Safe areas for notch/home bar devices */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* --------------------------------------------------
     TOUCH TARGETS
  -------------------------------------------------- */
  --touch-min:  44px;
  --touch-lg:   52px;

  /* --------------------------------------------------
     Z-INDEX SCALE
  -------------------------------------------------- */
  --z-base:      1;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    120;
  --z-nav:       150;
  --z-drawer:    200;
  --z-overlay:   250;
  --z-modal:     300;
  --z-toast:     400;

  /* --------------------------------------------------
     TRANSITIONS
  -------------------------------------------------- */
  --ease-out:     cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   350ms;
  --duration-drawer: 280ms;

  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-base) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
}

/* Breakpoints reference (CSS-only, for documentation):
   --bp-xs:  360px   // smallest phones
   --bp-sm:  480px   // large phones
   --bp-md:  768px   // tablets
   --bp-lg:  1024px  // small desktop
   --bp-xl:  1280px  // wide desktop
*/