/* ==========================================================================
   1jj Game — MIDNIGHT VAULT — Design Tokens
   Single source of truth for colour, type, spacing, motion and elevation.
   ========================================================================== */

/* --- Self-hosted fonts (drop WOFF2 into /assets/fonts and uncomment) --------
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
--------------------------------------------------------------------------- */

:root {
  /* ---- Core palette -------------------------------------------------- */
  --color-bg-primary:   #0A0E27;   /* deep midnight navy, near-black       */
  --color-bg-surface:   #121837;   /* card / panel background              */
  --color-bg-elevated:  #1A2147;   /* modals, elevated surfaces            */
  --color-bg-deep:      #070A1C;   /* footer / deepest wells               */

  --color-gold-primary: #D4AF37;   /* classic metallic gold — main accent  */
  --color-gold-bright:  #F4D160;   /* hover states, glow highlights        */
  --color-gold-deep:    #9C7A1F;   /* borders, subtle dividers             */
  --color-gold-soft:    rgba(212, 175, 55, 0.14); /* faint gold wash       */

  --color-text-primary: #F5F3EA;   /* warm off-white                       */
  --color-text-muted:   #8B92B8;   /* secondary, muted blue-grey           */
  --color-text-dim:     #5A6291;   /* tertiary / captions                  */

  --color-success:      #2ECC71;
  --color-danger:       #E74C3C;
  --color-glow-shadow:  rgba(212, 175, 55, 0.35);

  /* Hairlines */
  --color-hairline:      rgba(212, 175, 55, 0.22);
  --color-hairline-soft: rgba(212, 175, 55, 0.10);
  --color-border-cool:   rgba(139, 146, 184, 0.16);

  /* ---- Gradients (signature) ---------------------------------------- */
  --grad-base:  linear-gradient(135deg, #0A0E27 0%, #121837 50%, #1A2147 100%);
  --grad-gold:  linear-gradient(90deg, #D4AF37 0%, #F4D160 50%, #D4AF37 100%);
  --grad-gold-diag: linear-gradient(135deg, #9C7A1F 0%, #D4AF37 45%, #F4D160 70%, #D4AF37 100%);
  --grad-surface: linear-gradient(160deg, #141A3C 0%, #0E1330 100%);
  --grad-radial-glow: radial-gradient(circle at 50% 40%, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0) 60%);

  /* ---- Typography ---------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-heading: "Sora", "Clash Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", "Manrope", "Segoe UI", system-ui, -apple-system, "Noto Nastaliq Urdu", sans-serif;
  --font-num:     "Sora", "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-3xs: 0.72rem;
  --fs-2xs: 0.8rem;
  --fs-xs:  0.875rem;
  --fs-sm:  0.95rem;
  --fs-base: 1.02rem;
  --fs-md:  1.15rem;
  --fs-lg:  1.4rem;
  --fs-xl:  1.85rem;
  --fs-2xl: 2.4rem;
  --fs-3xl: 3.1rem;
  --fs-4xl: clamp(2.6rem, 6vw, 4.6rem);
  --fs-hero: clamp(2.8rem, 7vw, 5.4rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.72;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --tracking-wide:  0.04em;
  --tracking-wider: 0.14em;
  --tracking-caps:  0.22em;

  /* ---- Spacing scale (8pt-ish) -------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;
  --space-11: 8rem;

  --section-pad-y: clamp(3.5rem, 8vw, 7rem);

  /* ---- Radius -------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* ---- Elevation / shadows ------------------------------------------ */
  --shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 10px 40px var(--color-glow-shadow);
  --shadow-gold-lg: 0 18px 60px rgba(212, 175, 55, 0.45);
  --glow-ring:  0 0 0 1px rgba(212,175,55,0.4), 0 0 24px rgba(212,175,55,0.28);

  /* ---- Layout -------------------------------------------------------- */
  --container: 1240px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --nav-h: 76px;

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s;
  --t-med:  0.32s;
  --t-slow: 0.6s;

  --z-base: 1;
  --z-sticky: 100;
  --z-fab: 200;
  --z-mobilebar: 250;
  --z-modal: 500;
}