/* ==========================================================================
   dk999 Game — Design Tokens  ("Emerald Vault" light-mode system)
   https://dk999-app.com.pk
   ========================================================================== */

:root {
  /* ---- Base surfaces — LIGHT ---------------------------------------- */
  --color-bg:              #FBF9F4;
  --color-bg-alt:          #F3EFE4;
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FFFFFF;

  /* ---- Charcoal (text + grounding, never a page background) --------- */
  --color-charcoal-900:    #16191A;
  --color-charcoal-700:    #2B2F30;
  --color-charcoal-500:    #565C5E;
  --color-charcoal-300:    #9CA3A4;

  /* ---- Emerald ------------------------------------------------------ */
  --color-emerald-900:     #0B3D2E;
  --color-emerald-700:     #106B4E;
  --color-emerald-500:     #16A876;
  --color-emerald-300:     #6FD3AC;
  --color-emerald-100:     #E4F6EE;

  /* ---- Gold --------------------------------------------------------- */
  --color-gold-700:        #A9781F;
  --color-gold-500:        #D4AF37;
  --color-gold-300:        #F0D98C;
  --color-gold-100:        #FBF3DA;

  /* ---- Semantic ----------------------------------------------------- */
  --color-text-primary:    var(--color-charcoal-900);
  --color-text-secondary:  var(--color-charcoal-500);
  --color-text-on-emerald: #FFFFFF;
  --color-text-on-gold:    var(--color-charcoal-900);
  --color-border:          #E7E2D4;
  --color-border-strong:   #D8D0BA;
  --color-success:         #16A876;
  --color-warning:         #C2872A;

  /* ---- Gradients ---------------------------------------------------- */
  --gradient-hero:        linear-gradient(135deg, #FBF9F4 0%, #E4F6EE 55%, #FBF3DA 100%);
  --gradient-emerald:     linear-gradient(135deg, #0B3D2E 0%, #16A876 100%);
  --gradient-emerald-deep:linear-gradient(140deg, #072A20 0%, #0B3D2E 45%, #106B4E 100%);
  --gradient-gold:        linear-gradient(135deg, #F0D98C 0%, #D4AF37 45%, #A9781F 100%);
  --gradient-gold-sweep:  linear-gradient(90deg, transparent, #D4AF37, transparent);
  --gradient-parchment:   linear-gradient(180deg, #FBF9F4 0%, #F3EFE4 100%);

  /* ---- Shadows (soft charcoal, never pure black) -------------------- */
  --shadow-xs:          0 1px 2px rgba(22, 25, 26, 0.06);
  --shadow-card:        0 8px 24px rgba(22, 25, 26, 0.08);
  --shadow-card-hover:  0 16px 40px rgba(11, 61, 46, 0.16);
  --shadow-float:       0 28px 70px rgba(11, 61, 46, 0.22);
  --shadow-gold-glow:   0 0 0 1px rgba(212, 175, 55, 0.4), 0 8px 24px rgba(212, 175, 55, 0.18);
  --shadow-nav:         0 6px 28px rgba(22, 25, 26, 0.09);

  /* ---- Radius ------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Signature clipped-corner shape ------------------------------- */
  --clip-corner: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  --clip-corner-sm: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);

  /* ---- Typography --------------------------------------------------- */
  --font-display: 'Clash Display', 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Inter', serif;

  --fs-h1: clamp(2.35rem, 4.6vw, 4.25rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.625rem);
  --fs-h4: clamp(1.0625rem, 1.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-print: 0.8125rem;

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.75;

  /* ---- Layout ------------------------------------------------------- */
  --container-max: 1240px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --section-y: clamp(4rem, 8vw, 7.5rem);

  /* ---- Motion ------------------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ---- Z-index scale ------------------------------------------------ */
  --z-decor: 0;
  --z-content: 1;
  --z-sticky-bar: 60;
  --z-nav: 80;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 110;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
}