/*
  WebHostPune design tokens — generated from docs/DESIGN_SYSTEM.md
  Colors/type are CONFIRMED values read from the brandkit; functional
  colors (success/warning/error/muted/border) are RECOMMENDED additions
  flagged NEEDS DESIGN SIGN-OFF in the source doc (see §4.3).
*/

:root {
  /* ---- Color: light theme (default) ---- */
  --color-primary: #E31E24;
  --color-secondary: #111111;
  --color-accent-1: #444444;
  --color-accent-2: #6B6B6B;
  --color-bg: #F2F2F2;
  --color-surface: #FFFFFF;

  --color-success: #1E8E3E;
  --color-warning: #B7791F;
  --color-error: #C0392B;
  --color-muted: #8A8A8A;
  --color-border: #E0E0E0;

  /* WhatsApp CTA lane — sanctioned as a separate signal from Success green (DESIGN_SYSTEM.md §4.4) */
  --color-whatsapp: #25D366;
  --color-whatsapp-text: #FFFFFF;

  --color-on-primary: #FFFFFF;

  /* ---- Layout ---- */
  --container-max: 1320px;
  --gutter-desktop: 24px;
  --gutter-tablet: 16px;
  --gutter-mobile: 16px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --section-padding-desktop: var(--space-6);
  --section-padding-mobile: var(--space-5);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Typography ---- */
  --font-family: 'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-display: 3.5rem;
  --fs-display-mobile: 2.25rem;
  --fs-h1: 2.5rem;
  --fs-h1-mobile: 1.875rem;
  --fs-h2: 1.875rem;
  --fs-h2-mobile: 1.5rem;
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --lh-body-lg: 1.6;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- Motion (subtle, performance-conscious — DESIGN_REFERENCE.md Point 20) ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;

  /* ---- Elevation (flat brand — used sparingly, e.g. open mega-menu panel) ---- */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.10);
  --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.14);

  --z-header: 100;
  --z-mega-menu: 110;
  --z-mobile-drawer: 120;
  --z-modal: 130;
}

/* ---- Color: dark theme ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #E31E24;
    --color-secondary: #FFFFFF;
    --color-accent-1: #444444;
    --color-accent-2: #9A9A9A;
    --color-bg: #1E1E1E;
    --color-surface: #0D0D0D;

    --color-success: #4CAF6D;
    --color-warning: #D9A441;
    --color-error: #E57373;
    --color-muted: #B0B0B0;
    --color-border: #333333;

    --color-on-primary: #FFFFFF;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --color-primary: #E31E24;
  --color-secondary: #FFFFFF;
  --color-accent-1: #444444;
  --color-accent-2: #9A9A9A;
  --color-bg: #1E1E1E;
  --color-surface: #0D0D0D;

  --color-success: #4CAF6D;
  --color-warning: #D9A441;
  --color-error: #E57373;
  --color-muted: #B0B0B0;
  --color-border: #333333;

  --color-on-primary: #FFFFFF;
}