/* ============================================================
   VARIABLES.CSS — Dhwani Entertainment
   Complete design token system via CSS custom properties
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORS
     ---------------------------------------------------------- */

  /* Core palette */
  --color-black:          #0A0A0A;
  --color-white:          #FFFFFF;
  --color-grey-light:     #F5F5F5;
  --color-grey-mid:       #E8E8E8;

  /* Text hierarchy */
  --color-text-primary:   #1A1A1A;
  --color-text-body:      #333333;
  --color-text-secondary: #666666;
  --color-text-muted:     #999999;

  /* Brand red — primary brand color, CTAs, buttons, hero accents */
  --color-brand:          #E53525;
  --color-brand-hover:    #CC2E20;
  --color-brand-light:    rgba(229, 53, 37, 0.10);

  /* Accent — warm gold — labels, hover underlines, subtle highlights */
  --color-accent:         #C8A97E;
  --color-accent-hover:   #B8955E;
  --color-accent-light:   rgba(200, 169, 126, 0.12);

  /* Overlays */
  --color-overlay-dark:   rgba(10, 10, 10, 0.60);
  --color-overlay-light:  rgba(10, 10, 10, 0.30);

  /* UI */
  --color-border:         #E2E2E2;
  --color-border-dark:    rgba(255, 255, 255, 0.12);
  --color-surface:        #FAFAFA;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  /* Family */
  --font-primary: 'Source Sans 3', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Bebas Neue', 'Impact', sans-serif;

  /* Size scale */
  --font-size-xs:     0.75rem;    /* 12px */
  --font-size-sm:     0.875rem;   /* 14px */
  --font-size-base:   1rem;       /* 16px */
  --font-size-md:     1.125rem;   /* 18px */
  --font-size-lg:     1.25rem;    /* 20px */
  --font-size-xl:     1.5rem;     /* 24px */
  --font-size-2xl:    2rem;       /* 32px */
  --font-size-3xl:    2.5rem;     /* 40px */
  --font-size-4xl:    3.5rem;     /* 56px */
  --font-size-hero:   4.5rem;     /* 72px */

  /* Weights */
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* Letter spacing */
  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.12em;
  --letter-spacing-widest:  0.18em;

  /* Line heights */
  --line-height-tight:   1.1;
  --line-height-heading: 1.25;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.8;

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */

  --space-xs:      0.5rem;    /* 8px  */
  --space-sm:      0.75rem;   /* 12px */
  --space-md:      1rem;      /* 16px */
  --space-lg:      1.5rem;    /* 24px */
  --space-xl:      2rem;      /* 32px */
  --space-2xl:     3rem;      /* 48px */
  --space-3xl:     4rem;      /* 64px */
  --space-4xl:     8rem;      /* 128px */
  --space-section: 7rem;      /* 112px */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --max-width:        1280px;
  --max-width-narrow: 720px;
  --nav-height:       80px;

  /* Border radii */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
  --transition-hero: 6s ease;

  /* Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-xl:  0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.14);

  /* ----------------------------------------------------------
     Z-INDEX SCALE
     ---------------------------------------------------------- */

  --z-below:   -1;
  --z-base:     0;
  --z-above:    10;
  --z-overlay:  100;
  --z-modal:    500;
  --z-nav:      1000;
  --z-toast:    2000;
}

/* ----------------------------------------------------------
   MOBILE OVERRIDES
   ---------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --font-size-hero:    2.75rem;   /* 44px */
    --font-size-4xl:     2.25rem;   /* 36px */
    --font-size-3xl:     1.875rem;  /* 30px */
    --font-size-2xl:     1.5rem;    /* 24px */

    --space-section:     4.5rem;    /* 72px */
    --space-4xl:         4rem;      /* 64px */
    --space-3xl:         2.5rem;    /* 40px */

    --nav-height:        64px;
  }
}