/* ==========================================================================
   SANATAN SAMRUDDHI — Design Tokens (Phase 1B)
   Centralized CSS custom properties.
   Preserves existing brand identity: Deep Maroon / Bhagwa Saffron / Temple Gold / Warm Ivory
   All existing ss_ui.css / ss_ui_v5.css / home_v4.css variables are respected.
   This layer adds unified semantic tokens ON TOP of the existing system.
   ========================================================================== */

:root {
  /* ---- Brand Core ---- */
  --ss-primary: #8b0000;
  --ss-primary-light: #a30f0f;
  --ss-primary-dark: #5c0000;
  --ss-primary-rgb: 139, 0, 0;

  --ss-secondary: #6b1c1c;
  --ss-secondary-light: #8c1a22;
  --ss-secondary-dark: #4a0a10;

  --ss-accent: #ff9933;
  --ss-accent-light: #ffb366;
  --ss-accent-dark: #e8750f;
  --ss-accent-rgb: 255, 153, 51;

  --ss-gold: #d4af37;
  --ss-gold-light: #e8cf8a;
  --ss-gold-dark: #b8941e;
  --ss-gold-rgb: 212, 175, 55;

  /* ---- Surface & Background ---- */
  --ss-bg: #fff4dd;
  --ss-bg-soft: #f7efe3;
  --ss-bg-primary: #ffffff;
  --ss-bg-secondary: #f8f9fa;

  --ss-surface: #ffffff;
  --ss-surface-raised: #ffffff;
  --ss-surface-sunken: #f8f9fa;
  --ss-surface-overlay: rgba(0, 0, 0, 0.55);

  /* ---- Text ---- */
  --ss-text: #1f2937;
  --ss-text-secondary: #4b5563;
  --ss-text-muted: #6b7280;
  --ss-text-inverse: #ffffff;
  --ss-text-brand: #8b0000;
  --ss-text-accent: #92400e;

  /* ---- Borders ---- */
  --ss-border: rgba(31, 41, 55, 0.12);
  --ss-border-strong: rgba(31, 41, 55, 0.55);
  --ss-border-brand: rgba(139, 0, 0, 0.25);

  /* ---- Semantic: Status ---- */
  --ss-success: #1f7a3d;
  --ss-success-bg: rgba(31, 122, 61, 0.1);
  --ss-success-border: rgba(31, 122, 61, 0.3);
  --ss-success-text: #14552b;

  --ss-warning: #e8750f;
  --ss-warning-bg: rgba(232, 117, 15, 0.12);
  --ss-warning-border: rgba(232, 117, 15, 0.35);
  --ss-warning-text: #a3510a;

  --ss-danger: #b3271d;
  --ss-danger-bg: rgba(179, 39, 29, 0.08);
  --ss-danger-border: rgba(179, 39, 29, 0.3);
  --ss-danger-text: #8f1c15;

  --ss-info: #24558f;
  --ss-info-bg: rgba(36, 85, 143, 0.08);
  --ss-info-border: rgba(36, 85, 143, 0.28);
  --ss-info-text: #1c4679;

  /* ---- Focus ---- */
  --ss-focus: rgba(180, 83, 9, 0.85);
  --ss-focus-ring: 0 0 0 3px rgba(232, 117, 15, 0.45);

  /* ---- Shadows ---- */
  --ss-shadow-xs: 0 1px 2px rgba(31, 41, 55, 0.04);
  --ss-shadow-sm: 0 2px 10px rgba(31, 41, 55, 0.06);
  --ss-shadow: 0 10px 30px rgba(31, 41, 55, 0.1);
  --ss-shadow-lg: 0 24px 60px rgba(31, 41, 55, 0.16);
  --ss-shadow-xl: 0 32px 80px rgba(31, 41, 55, 0.2);

  /* ---- Border Radius ---- */
  --ss-radius-xs: 6px;
  --ss-radius-sm: 8px;
  --ss-radius: 12px;
  --ss-radius-md: 14px;
  --ss-radius-lg: 18px;
  --ss-radius-xl: 24px;
  --ss-radius-pill: 999px;

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

  /* ---- Typography ---- */
  --ss-font-body: "Nunito", "Noto Sans Telugu", "Noto Sans Devanagari", system-ui, sans-serif;
  --ss-font-display: "Playfair Display", "Noto Serif Telugu", Georgia, serif;
  --ss-font-sanskrit: "Tiro Devanagari Sanskrit", "Noto Sans Devanagari", serif;
  --ss-font-mono: "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;

  --ss-text-xs: 0.72rem;
  --ss-text-sm: 0.82rem;
  --ss-text-base: 0.92rem;
  --ss-text-md: 1rem;
  --ss-text-lg: 1.12rem;
  --ss-text-xl: 1.3rem;
  --ss-text-2xl: 1.6rem;
  --ss-text-3xl: 2rem;
  --ss-text-4xl: 2.5rem;

  --ss-leading-tight: 1.2;
  --ss-leading-normal: 1.6;
  --ss-leading-relaxed: 1.8;

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

  /* ---- Transitions ---- */
  --ss-duration-fast: 120ms;
  --ss-duration-normal: 180ms;
  --ss-duration-slow: 280ms;
  --ss-duration-slower: 400ms;
  --ss-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ss-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ss-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ss-ease-spring: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Z-Index Scale ---- */
  --ss-z-base: 0;
  --ss-z-dropdown: 100;
  --ss-z-sticky: 200;
  --ss-z-header: 1000;
  --ss-z-drawer: 1100;
  --ss-z-modal: 1200;
  --ss-z-toast: 1300;
  --ss-z-tooltip: 1400;
  --ss-z-max: 9999;

  /* ---- Layout ---- */
  --ss-container-sm: 640px;
  --ss-container-md: 768px;
  --ss-container-lg: 1024px;
  --ss-container-xl: 1200px;
  --ss-container-2xl: 1400px;
  --ss-header-h: 68px;
}