/* ==========================================================================
   2J Game — Design Tokens
   Theme: royal-obsidian-light
   ========================================================================== */

:root {
  /* ---------- Surfaces ---------- */
  --color-bg:               #FBF9F4;
  --color-bg-alt:           #F5F1E6;
  --color-surface:          #FFFFFF;
  --color-surface-tint:     #F8F4EA;

  /* ---------- Obsidian ---------- */
  --color-charcoal:         #1C1C1E;
  --color-charcoal-soft:    #2E2E30;
  --color-obsidian-line:    #3A3A3C;

  /* ---------- Royal Gold ---------- */
  --color-gold:             #C9A227;
  --color-gold-bright:      #E8C547;
  --color-gold-deep:        #9C7A1B;
  --color-gold-wash:        rgba(201, 162, 39, 0.08);
  --color-gold-hairline:    rgba(201, 162, 39, 0.40);

  /* ---------- Text ---------- */
  --color-text-primary:     #201F1C;
  --color-text-secondary:   #55534C;
  --color-text-muted:       #8A8779;
  --color-text-on-dark:     #EFEBE0;
  --color-text-on-dark-dim: #A7A398;

  /* ---------- Lines & States ---------- */
  --color-border:           #E7E1D0;
  --color-border-strong:    #D8D0B8;
  --color-success:          #3E7D52;
  --color-error:            #B23A32;

  /* ---------- Elevation ---------- */
  --shadow-xs:               0 1px 2px rgba(28, 28, 30, 0.05);
  --shadow-card:             0 4px 20px rgba(28, 28, 30, 0.08);
  --shadow-card-hover:       0 14px 38px rgba(28, 28, 30, 0.14);
  --shadow-gold-glow:        0 0 24px rgba(201, 162, 39, 0.35);
  --shadow-gold-glow-strong: 0 0 48px rgba(201, 162, 39, 0.50);
  --shadow-mockup:           0 40px 80px -20px rgba(28, 28, 30, 0.42),
                             0 12px 28px rgba(28, 28, 30, 0.16);

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

  --fs-eyebrow:   0.7rem;
  --fs-xs:        0.8125rem;
  --fs-sm:        0.9375rem;
  --fs-base:      1rem;
  --fs-md:        1.0625rem;
  --fs-lg:        1.1875rem;
  --fs-xl:        clamp(1.35rem, 1.1rem + 1.05vw, 1.75rem);
  --fs-h3:        clamp(1.25rem, 1.05rem + 0.85vw, 1.55rem);
  --fs-h2:        clamp(1.75rem, 1.25rem + 2.1vw, 2.85rem);
  --fs-h1:        clamp(2.15rem, 1.45rem + 3.2vw, 4rem);
  --fs-display:   clamp(2.6rem, 1.6rem + 4.4vw, 5rem);

  --lh-tight:     1.14;
  --lh-snug:      1.32;
  --lh-normal:    1.68;
  --lh-loose:     1.82;

  --ls-eyebrow:   0.22em;
  --ls-caps:      0.10em;

  /* ---------- Radius ---------- */
  --radius-xs:    6px;
  --radius-sm:    10px;
  --radius-md:    14px;
  --radius-lg:    20px;
  --radius-xl:    28px;
  --radius-pill:  999px;

  /* ---------- Spacing scale ---------- */
  --space-1:      4px;
  --space-2:      8px;
  --space-3:      12px;
  --space-4:      16px;
  --space-5:      24px;
  --space-6:      32px;
  --space-7:      44px;
  --space-8:      60px;
  --space-9:      80px;
  --space-10:     104px;

  /* Vertical rhythm between full-bleed sections */
  --section-y:        clamp(56px, 7vw, 104px);
  --section-y-tight:  clamp(40px, 5vw, 72px);

  /* ---------- Layout ---------- */
  --container-max:   1200px;
  --container-wide:  1360px;
  --container-text:  760px;
  /* Deliberate breathing room on the left and right edges of every page */
  --gutter:          clamp(20px, 5.2vw, 72px);

  --header-h:        76px;

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     620ms;

  --z-base:       1;
  --z-sticky:     900;
  --z-nav:        1000;
  --z-overlay:    1100;
  --z-modal:      1200;
}

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