/**
 * @file variables.css
 * Misalpav brand design tokens — CSS custom properties.
 * All colors, spacing, typography, and motion values live here.
 * Dark mode overrides are in dark-mode.css.
 */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  /* Primary: Original Misalpav dark red */
  --mp-primary:          #8B0000;
  --mp-primary-hover:    #6B0000;
  --mp-primary-light:    #B30000;
  --mp-primary-50:       #FFF0F0;
  --mp-primary-100:      #FFD6D6;

  /* Secondary: Deep maroon — darker anchor */
  --mp-secondary:        #5C0000;
  --mp-secondary-hover:  #3D0000;
  --mp-secondary-light:  #8B0000;

  /* Accent: Turmeric gold */
  --mp-accent:           #E8A020;
  --mp-accent-hover:     #C4861A;

  /* ── Neutral Palette ──────────────────────────────────────────────────── */
  --mp-white:            #FFFFFF;
  --mp-bg:               #FDFAF6;       /* warm cream page background */
  --mp-bg-alt:           #F5EDE0;       /* slightly deeper cream for alternates */
  --mp-bg-card:          #FFFFFF;
  --mp-bg-header:        #FFFFFF;
  --mp-bg-nav:           #6B0000;       /* dark red for nav bar */
  --mp-bg-footer:        #3D0000;       /* deeper red for footer */

  --mp-text:             #1C1208;       /* near-black with warm undertone */
  --mp-text-secondary:   #5A4033;
  --mp-text-muted:       #8A7060;
  --mp-text-inverse:     #F5EDE0;
  --mp-text-link:        #C94B0C;
  --mp-text-link-hover:  #A33C09;

  /* ── Borders & Dividers ───────────────────────────────────────────────── */
  --mp-border:           #E0D0BC;
  --mp-border-light:     #EDE5D8;
  --mp-border-focus:     #C94B0C;

  /* ── Semantic Colors ──────────────────────────────────────────────────── */
  --mp-success:          #2E7D32;
  --mp-warning:          #E65100;
  --mp-error:            #C62828;
  --mp-info:             #01579B;

  /* ── Table Colors ─────────────────────────────────────────────────────── */
  --mp-table-header-bg:       #3D210E;
  --mp-table-header-text:     #F5EDE0;
  --mp-table-row-odd:         #FFFFFF;
  --mp-table-row-even:        #FBF5EE;
  --mp-table-row-hover:       #FEF0E8;
  --mp-table-border:          #E0D0BC;
  --mp-table-shadow:          0 2px 12px rgba(92, 51, 23, 0.08);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --mp-font-primary:   'Mukta', 'Noto Sans Devanagari', 'Arial Unicode MS', sans-serif;
  --mp-font-mono:      'Courier New', Courier, monospace;

  --mp-text-xs:    0.75rem;    /* 12px */
  --mp-text-sm:    0.875rem;   /* 14px */
  --mp-text-base:  1rem;       /* 16px */
  --mp-text-lg:    1.125rem;   /* 18px */
  --mp-text-xl:    1.25rem;    /* 20px */
  --mp-text-2xl:   1.5rem;     /* 24px */
  --mp-text-3xl:   1.875rem;   /* 30px */
  --mp-text-4xl:   2.25rem;    /* 36px */

  --mp-leading-tight:   1.3;
  --mp-leading-snug:    1.5;
  --mp-leading-normal:  1.7;   /* generous for Devanagari */
  --mp-leading-relaxed: 1.9;

  --mp-tracking-tight:  -0.01em;
  --mp-tracking-normal:  0.01em;
  --mp-tracking-wide:    0.05em;

  /* ── Spacing Scale ────────────────────────────────────────────────────── */
  --mp-space-1:   0.25rem;
  --mp-space-2:   0.5rem;
  --mp-space-3:   0.75rem;
  --mp-space-4:   1rem;
  --mp-space-5:   1.25rem;
  --mp-space-6:   1.5rem;
  --mp-space-8:   2rem;
  --mp-space-10:  2.5rem;
  --mp-space-12:  3rem;
  --mp-space-16:  4rem;
  --mp-space-20:  5rem;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --mp-radius-sm:   4px;
  --mp-radius:      6px;
  --mp-radius-lg:   10px;
  --mp-radius-xl:   16px;
  --mp-radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --mp-shadow-sm:  0 1px 3px rgba(28, 18, 8, 0.08);
  --mp-shadow:     0 2px 8px rgba(28, 18, 8, 0.10);
  --mp-shadow-lg:  0 8px 24px rgba(28, 18, 8, 0.12);
  --mp-shadow-xl:  0 16px 48px rgba(28, 18, 8, 0.15);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --mp-transition-fast:   150ms ease;
  --mp-transition:        250ms ease;
  --mp-transition-slow:   400ms ease;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --mp-container-max:  1280px;
  --mp-sidebar-width:  280px;
  --mp-header-height:  64px;
  --mp-nav-height:     52px;
  --mp-gap:            1.5rem;
  --mp-section-gap:    var(--mp-space-12);

  /* ── Z-index ──────────────────────────────────────────────────────────── */
  --mp-z-base:     0;
  --mp-z-raised:   10;
  --mp-z-nav:      100;
  --mp-z-sticky:   200;
  --mp-z-overlay:  300;
  --mp-z-modal:    400;
  --mp-z-toast:    500;
}

/* ── Bootstrap 5 Override Tokens ─────────────────────────────────────────── */
:root {
  --bs-primary:         var(--mp-primary);
  --bs-primary-rgb:     139, 0, 0;
  --bs-body-font-family: var(--mp-font-primary);
  --bs-body-bg:         var(--mp-bg);
  --bs-body-color:      var(--mp-text);
  --bs-link-color:      var(--mp-text-link);
  --bs-link-hover-color: var(--mp-text-link-hover);
  --bs-border-color:    var(--mp-border);
  --bs-border-radius:   var(--mp-radius);
}