/* ============================================================
   CHIKITSAALYE — DESIGN TOKENS
   Single source of truth for all visual values
   ============================================================ */

:root {
  /* ── BRAND PALETTE ─────────────────────────────────────── */
  --brand-navy:          #1E3A5F;
  --brand-navy-dark:     #142843;
  --brand-navy-light:    #2B4F7A;
  --brand-teal:          #0E7490;
  --brand-teal-mid:      #0D9488;
  --brand-teal-light:    #CCFBF1;
  --brand-teal-xlight:   #F0FDFA;
  --brand-blue:          #1D4ED8;
  --brand-blue-light:    #DBEAFE;

  /* ── SEMANTIC COLORS ───────────────────────────────────── */
  --color-success:       #059669;
  --color-success-bg:    #D1FAE5;
  --color-warning:       #D97706;
  --color-warning-bg:    #FEF3C7;
  --color-danger:        #DC2626;
  --color-danger-bg:     #FEE2E2;
  --color-info:          #2563EB;
  --color-info-bg:       #EFF6FF;
  --color-purple:        #7C3AED;
  --color-purple-bg:     #EDE9FE;

  /* ── NEUTRAL SURFACE ───────────────────────────────────── */
  --surface-base:        #F4F6F9;
  --surface-white:       #FFFFFF;
  --surface-card:        #FFFFFF;
  --surface-subtle:      #F8FAFC;
  --surface-muted:       #EEF1F5;
  --surface-navy:        #1E3A5F;
  --surface-navy-xdark:  #0F1E2F;

  /* ── BORDERS ───────────────────────────────────────────── */
  --border-light:        #E4E8EF;
  --border-mid:          #CBD5E1;
  --border-strong:       #94A3B8;
  --border-focus:        #0E7490;

  /* ── TEXT ──────────────────────────────────────────────── */
  --text-primary:        #111827;
  --text-secondary:      #374151;
  --text-muted:          #6B7280;
  --text-faint:          #9CA3AF;
  --text-inverse:        #FFFFFF;
  --text-brand:          #0E7490;
  --text-danger:         #B91C1C;
  --text-success:        #047857;
  --text-warning:        #92400E;
  --text-navy:           #1E3A5F;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-family:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:             0.75rem;    /* 12px */
  --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 */
  --text-5xl:            3rem;       /* 48px */
  --text-6xl:            3.75rem;    /* 60px */

  --weight-normal:       400;
  --weight-medium:       500;
  --weight-semibold:     600;
  --weight-bold:         700;
  --weight-extrabold:    800;

  --leading-tight:       1.2;
  --leading-snug:        1.375;
  --leading-normal:      1.5;
  --leading-relaxed:     1.65;
  --leading-loose:       1.8;

  --tracking-tight:      -0.02em;
  --tracking-normal:     0em;
  --tracking-wide:       0.02em;
  --tracking-wider:      0.05em;
  --tracking-widest:     0.1em;

  /* ── SPACING SCALE ──────────────────────────────────────── */
  --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-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ── BORDER RADIUS ──────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  28px;
  --radius-full: 9999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 10px 20px rgba(0, 0, 0, 0.07), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 2px 8px rgba(30, 58, 95, 0.08);
  --shadow-nav:  0 2px 12px rgba(0, 0, 0, 0.1);
  --shadow-focus:0 0 0 3px rgba(14, 116, 144, 0.25);

  /* ── TRANSITIONS ─────────────────────────────────────────── */
  --transition-fast:     all 0.12s ease;
  --transition-base:     all 0.2s ease;
  --transition-slow:     all 0.35s ease;
  --transition-spring:   all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --max-width:          1280px;
  --sidebar-width:      240px;
  --sidebar-collapsed:  64px;
  --header-height:      64px;
  --content-padding:    var(--space-6);
}