/* =========================================================
   DESIGN TOKENS — Orbital Gems: Link Puzzle
   Deep Space Chrome palette · WCAG AA verified
   ========================================================= */

:root {
  /* Surface ramp */
  --color-bg:          #0a0a1c;
  --color-surface:     #15142f;
  --color-surface-2:   #1e1c40;
  --color-surface-3:   #29275a;

  /* Text */
  --color-text:        #e8ecf7;  /* chrome — 16.56:1 on bg */
  --color-text-muted:  #a9a5cc;  /* 8.33:1 on bg           */

  /* Brand accents */
  --color-teal:        #5fe3c8;  /* 12.40:1 on bg */
  --color-gold:        #ffd479;  /* 13.93:1 on bg */
  --color-peach:       #ff9d6e;  /* 9.60:1 on bg  */

  /* Gem highlights (decorative only, not body text) */
  --color-gem-pink:    #ff6ec7;
  --color-gem-cyan:    #7ee0ff;

  /* Button — disabled App Store */
  --color-btn-disabled-bg:   #2a2a2a;
  --color-btn-disabled-text: #e8ecf7; /* 12.15:1 on disabled bg */

  /* Borders & glows */
  --color-border:     rgba(95, 227, 200, 0.18);
  --color-glow-teal:  rgba(95, 227, 200, 0.35);
  --color-glow-gold:  rgba(255, 212, 121, 0.30);

  /* Radii */
  --radius-sm:   6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 100px;

  /* Spacing rhythm (8-unit) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 96px;

  /* Type scale (1.25 ratio, mobile-first) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 180ms;

  /* Layout */
  --header-height: 56px;
  --max-w: 1200px;
}