/* ==========================================================================
   PK888 Game — Royal Vault Edition
   tokens.css — design tokens (colour, type, space, motion, elevation)
   ========================================================================== */

:root {
  /* ---- Core surfaces ---------------------------------------------------- */
  --color-bg-primary:     #180B2E;   /* deep polished-stone purple */
  --color-bg-secondary:   #22103F;   /* velvet panel purple */
  --color-bg-tertiary:    #2C1650;   /* raised card surface */
  --color-bg-inset:       #120823;   /* recessed / vault-door panel, darkest */
  --color-bg-elevated:    #341A5C;   /* hover state for raised cards */

  /* ---- Metal & seal accents --------------------------------------------- */
  --color-gold:           #C9A24B;
  --color-gold-bright:    #E8C878;
  --color-gold-deep:      #8A6A2E;
  --color-gold-line:      rgba(201, 162, 75, 0.35);

  --color-red:            #9E1030;
  --color-red-bright:     #C71B3F;
  --color-ribbon-shadow:  #7A0A24;

  --color-jade:           #2E7D5B;   /* used sparingly for "verified" ticks */

  /* ---- Type ------------------------------------------------------------- */
  --color-text-primary:   #F2E9D8;
  --color-text-secondary: #B7A6D1;
  --color-text-muted:     #8B78AC;
  --color-text-on-gold:   #1A0C2F;

  /* ---- Lines ------------------------------------------------------------ */
  --color-border:         rgba(201, 162, 75, 0.20);
  --color-border-soft:    rgba(183, 166, 209, 0.14);
  --color-border-strong:  rgba(201, 162, 75, 0.50);

  /* ---- Gradients — metallic / engraved, never glowy ---------------------- */
  --gradient-vault-purple: linear-gradient(160deg, #120823 0%, #22103F 45%, #2C1650 100%);
  --gradient-gold-inlay:   linear-gradient(90deg, #8A6A2E 0%, #C9A24B 45%, #E8C878 55%, #C9A24B 100%);
  --gradient-gold-plate:   linear-gradient(150deg, #E8C878 0%, #C9A24B 38%, #8A6A2E 62%, #C9A24B 100%);
  --gradient-wax-seal:     linear-gradient(145deg, #7A0A24 0%, #9E1030 55%, #C71B3F 100%);
  --gradient-panel:        linear-gradient(165deg, rgba(44,22,80,0.9) 0%, rgba(24,11,46,0.95) 100%);
  --gradient-stone:        linear-gradient(180deg, #22103F 0%, #180B2E 100%);

  /* ---- Elevation — embossed, not diffuse -------------------------------- */
  --shadow-panel-raised: 0 1px 0 rgba(232, 200, 120, 0.15) inset,
                         0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-panel-inset:  inset 0 2px 6px rgba(0, 0, 0, 0.60);
  --shadow-gold-edge:    0 0 0 1px rgba(201, 162, 75, 0.40);
  --shadow-card-hover:   0 1px 0 rgba(232, 200, 120, 0.28) inset,
                         0 22px 46px rgba(0, 0, 0, 0.62);
  --shadow-deep:         0 30px 70px rgba(0, 0, 0, 0.7);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: 'Cinzel', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --fs-3xs: 0.6875rem;                                 /* 11px  — micro labels */
  --fs-2xs: 0.75rem;                                   /* 12px  — eyebrows     */
  --fs-xs:  0.8125rem;                                 /* 13px                 */
  --fs-sm:  0.9375rem;                                 /* 15px                 */
  --fs-md:  1.0625rem;                                 /* 17px  — body         */
  --fs-lg:  clamp(1.125rem, 0.4vw + 1.02rem, 1.3125rem);
  --fs-xl:  clamp(1.35rem, 1vw + 1.1rem, 1.75rem);     /* h4 / h3 small        */
  --fs-2xl: clamp(1.6rem, 1.6vw + 1.2rem, 2.3rem);     /* h3                   */
  --fs-3xl: clamp(2rem, 2.6vw + 1.3rem, 3.1rem);       /* h2                   */
  --fs-4xl: clamp(2.4rem, 4vw + 1.3rem, 4.15rem);      /* h1                   */

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

  --ls-display: 0.02em;
  --ls-eyebrow: 0.28em;
  --ls-button:  0.08em;

  /* ---- Spacing scale ---------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  28px;
  --space-7:  36px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 84px;
  --space-11: 112px;

  /* Vertical rhythm between full-width sections. */
  --section-y: clamp(64px, 7vw, 118px);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max:  1200px;
  --container-wide: 1360px;
  --container-text: 760px;
  /* Generous breathing room down the left and right edges of every page. */
  --gutter: clamp(20px, 5.5vw, 76px);

  /* ---- Radius ----------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease-vault:  cubic-bezier(0.65, 0.02, 0.2, 1);      /* heavy door         */
  --ease-metal:  cubic-bezier(0.22, 1, 0.36, 1);        /* metallic click     */
  --ease-stamp:  cubic-bezier(0.16, 1.2, 0.3, 1);       /* wax-seal stamp     */
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   620ms;
  --dur-vault: 1500ms;

  /* ---- Depth ------------------------------------------------------------ */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 400;
  --z-vault:   500;
}