/* ============================================================
   MEENAKSHI MATRIMONY — SHARED DESIGN TOKENS
   Master token definitions for light/dark themes, Tamil typography,
   brand color palette, glassmorphism, and responsive breakpoints.
   ============================================================ */

:root {
  /* --- Brand colors --- */
  --color-primary: #800020;        /* Royal Burgundy / Maroon */
  --color-primary-dark: #5c0017;
  --color-primary-light: #9e1b36;
  --color-secondary: #D4AF37;      /* Metallic Gold */
  --color-secondary-dark: #b59226;
  --color-accent: #2A9D8F;         /* Emerald Teal */
  --color-accent-light: #3dbab8;

  /* --- Gradients --- */
  --gradient-primary: linear-gradient(135deg, #800020 0%, #9e1b36 60%, #c0392b 100%);
  --gradient-gold: linear-gradient(135deg, #D4AF37 0%, #f0c947 50%, #b59226 100%);
  --gradient-hero: linear-gradient(135deg, #800020 0%, #5c0017 40%, #2A9D8F 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.98) 0%, rgba(250,247,242,0.92) 100%);

  /* --- Surfaces --- */
  --color-bg-light: #FAF7F2;
  --color-bg-light-alt: #F1EAE0;
  --color-bg-dark: #1A1416;
  --color-bg-dark-alt: #261D20;
  --color-surface-light: #FFFFFF;
  --color-surface-dark: #2B2124;

  /* --- Text --- */
  --color-text-light: #241B1E;
  --color-text-light-muted: #6B5D58;
  --color-text-dark: #F2ECE3;
  --color-text-dark-muted: #B8AEA2;

  /* --- Semantic --- */
  --color-error: #D90429;
  --color-success: #2E7D32;
  --color-warning: #E0A96D;
  --color-border-light: #E4DACB;
  --color-border-dark: #42353A;

  /* --- Typography --- */
  --font-tamil: 'Noto Sans Tamil', sans-serif;
  --font-latin: 'Inter', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: 'Inter', 'Noto Sans Tamil', -apple-system, sans-serif;
  --font-display: 'Outfit', 'Noto Sans Tamil', sans-serif;

  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.375rem;    /* 22px */
  --fs-xl: 1.75rem;     /* 28px */
  --fs-2xl: 2.25rem;    /* 36px */
  --fs-3xl: 2.75rem;    /* 44px */
  --fs-4xl: 3.25rem;    /* 52px */

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* --- Shape & shadow --- */
  --radius-sm: 6px;
  --radius-base: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 16px rgba(128, 0, 32, 0.08);
  --shadow-card-hover: 0 12px 36px rgba(128, 0, 32, 0.18);
  --shadow-modal: 0 20px 60px rgba(26, 20, 22, 0.35);
  --shadow-glow: 0 0 0 3px rgba(212, 175, 55, 0.35), 0 8px 24px rgba(128, 0, 32, 0.22);
  --shadow-glow-gold: 0 0 0 3px rgba(212, 175, 55, 0.5), 0 8px 32px rgba(212, 175, 55, 0.25);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 480ms;
  --duration-xslow: 700ms;

  /* --- Layout & Glassmorphism --- */
  --container-max: 1220px;
  --header-height: 72px;
  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(212, 175, 55, 0.25);
  --glass-blur: blur(18px);
  --glass-bg-strong: rgba(255, 255, 255, 0.96);
}

[data-theme="dark"] {
  --color-bg-light: var(--color-bg-dark);
  --color-bg-light-alt: var(--color-bg-dark-alt);
  --color-surface-light: var(--color-surface-dark);
  --color-text-light: var(--color-text-dark);
  --color-text-light-muted: var(--color-text-dark-muted);
  --color-border-light: var(--color-border-dark);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 12px 36px rgba(0, 0, 0, 0.55);
  --glass-bg: rgba(43, 33, 36, 0.92);
  --glass-border: rgba(212, 175, 55, 0.3);
  --gradient-card: linear-gradient(145deg, rgba(43,33,36,0.98) 0%, rgba(38,29,32,0.95) 100%);
}

[data-lang="ta"] {
  --font-display: 'Noto Sans Tamil', sans-serif;
  --font-body: 'Noto Sans Tamil', sans-serif;
}

/* 768px Mobile Adjustments */
@media (max-width: 768px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.6rem;
    --header-height: 64px;
    --space-7: 40px;
    --space-8: 52px;
    --space-9: 64px;
  }
}

/* 425px Mobile Adjustments */
@media (max-width: 425px) {
  :root {
    --fs-2xl: 1.85rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.2rem;
    --header-height: 64px;
    --space-5: 18px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 52px;
  }
}