/**
 * ============================================================================
 * SINGLE SOURCE OF TRUTH: DESIGN TOKENS (`css/tokens.css`)
 * ============================================================================
 */

:root {
  /* --------------------------------------------------------------------------
   * 1. BRAND PALETTE (Warm Royal Maroon, Marigold Gold & Ivory)
   * -------------------------------------------------------------------------- */
  --color-primary: #4a0e1e;
  --color-primary-deep: #1e040b;
  --color-secondary: #f5a623;
  --color-secondary-light: #fff3b0;
  --color-accent: #e05a7a;
  --color-text: #fff9f0;
  --color-text-muted: #f5e6d0;
  --color-text-on-glass: #ffffff;

  /* --------------------------------------------------------------------------
   * 2. TRANSLUCENT GLASS SURFACES (Lets the couple's photo shine through!)
   * -------------------------------------------------------------------------- */
  --color-surface: rgba(28, 4, 14, 0.42);
  --color-surface-elevated: rgba(40, 6, 19, 0.82);
  --color-cell-bg: rgba(14, 2, 7, 0.26);
  --color-cell-border: rgba(255, 232, 166, 0.28);
  --color-gold-border: rgba(255, 226, 138, 0.62);

  /* Light scrim so the engagement photo is clearly visible during gameplay */
  --scrim: linear-gradient(
    180deg,
    rgba(20, 3, 9, 0.34) 0%,
    rgba(20, 3, 9, 0.16) 50%,
    rgba(20, 3, 9, 0.42) 100%
  );

  --gold-gradient: linear-gradient(
    135deg,
    #fff3b0 0%,
    #f5a623 46%,
    #c8820e 100%
  );

  --gold-shimmer: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 243, 176, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%
  );

  /* --------------------------------------------------------------------------
   * 3. BACKGROUND PHOTO & FOCAL POINTS
   * -------------------------------------------------------------------------- */
  --bg-image-fallback: url("../assets/bg/engagement-desktop.jpg");
  --bg-image: image-set(
    url("../assets/bg/engagement-mobile.jpg") 1x,
    url("../assets/bg/engagement-desktop.jpg") 2x
  );
  --bg-position-mobile: 50% 54%;
  --bg-position-desktop: 50% 52%;
  --bg-blur-playing: 0px;

  /* --------------------------------------------------------------------------
   * 4. TYPOGRAPHY
   * -------------------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hindi: "Tiro Devanagari Hindi", "Mangal", "Nirmala UI", serif;

  /* --------------------------------------------------------------------------
   * 5. RADII & SHADOWS
   * -------------------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  --shadow-sm: 0 4px 14px rgba(10, 1, 5, 0.38);
  --shadow-md: 0 12px 32px rgba(10, 1, 5, 0.55);
  --shadow-lg: 0 20px 52px rgba(8, 1, 4, 0.68);
  --shadow-glow: 0 0 18px rgba(245, 166, 35, 0.75), 0 0 36px rgba(255, 243, 176, 0.45);
  --shadow-cell-inset: inset 0 1px 4px rgba(0, 0, 0, 0.32);

  /* --------------------------------------------------------------------------
   * 6. MOTION EASINGS
   * -------------------------------------------------------------------------- */
  --ease-spring: cubic-bezier(0.22, 1.28, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}