/* ============================================================
   Loot Creek — Design Tokens
   Source of truth: the Loot Creek Design System (branding/project/tokens).
   Keep in sync with the design system; do not invent values here.
   ============================================================ */

:root {
  /* ---- Brand palette ---- */
  --gold-50:  #FFF6E0;
  --gold-100: #FFE9B0;
  --gold-200: #FFD978;
  --gold-300: #FFC93C;
  --gold-400: #FFB627;
  --gold-500: #F59A0E;
  --gold-600: #D67C00;

  --teal-50:  #DBFAF6;
  --teal-100: #A3F0E8;
  --teal-200: #5FE2D6;
  --teal-300: #20D2C4;
  --teal-400: #14C9C0;
  --teal-500: #0AA59E;
  --teal-600: #07817C;

  --coral-50:  #FFE7E3;
  --coral-100: #FFC4BB;
  --coral-200: #FF9C8E;
  --coral-300: #FF7D6B;
  --coral-400: #FF6B5C;
  --coral-500: #ED4636;
  --coral-600: #C42E20;

  --gem-50:  #EFE7FF;
  --gem-100: #D6C2FF;
  --gem-200: #B79BFF;
  --gem-300: #9B78FF;
  --gem-400: #8C5BFF;
  --gem-500: #6F3CE6;
  --gem-600: #5429C2;

  --green-50:  #DDF9E8;
  --green-100: #A9EFC6;
  --green-200: #66E29B;
  --green-300: #3DD680;
  --green-400: #2FCB6E;
  --green-500: #1BA557;
  --green-600: #137F42;

  --sky-50:  #DEF1FF;
  --sky-100: #B0DCFF;
  --sky-200: #76C0FF;
  --sky-300: #4DA9FF;
  --sky-400: #3FA0FF;
  --sky-500: #2079E0;
  --sky-600: #155CB4;

  /* ---- Ink / Neutral ramp ---- */
  --ink-900: #141B30;
  --ink-800: #1B2440;
  --ink-700: #25315A;
  --ink-600: #344273;
  --ink-500: #4B5A8C;
  --ink-400: #7281AD;
  --ink-300: #A3AECC;
  --ink-200: #CDD5E6;
  --ink-100: #E7ECF6;
  --ink-50:  #F4F7FC;
  --cream:   #FFF8EC;
  --white:   #FFFFFF;

  /* ---- Semantic aliases ---- */
  --brand-primary:   var(--gold-400);
  --brand-secondary: var(--teal-400);
  --brand-accent:    var(--coral-400);
  --brand-premium:   var(--gem-400);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-inverse:  var(--white);
  --text-on-brand: var(--ink-900);
  --text-link:     var(--teal-500);

  --surface-page:   var(--cream);
  --surface-card:   var(--white);
  --surface-sunken: var(--ink-50);
  --surface-night:        var(--ink-800);
  --surface-night-card:   var(--ink-700);
  --surface-night-sunken: var(--ink-900);

  --border-soft:    var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-ink:     var(--ink-900);

  /* ---- Gradients ---- */
  --grad-sunrise: linear-gradient(135deg, var(--gold-300) 0%, var(--coral-400) 100%);
  --grad-creek:   linear-gradient(135deg, var(--teal-300) 0%, var(--sky-400) 100%);
  --grad-gem:     linear-gradient(135deg, var(--gem-300) 0%, var(--coral-300) 100%);
  --grad-night:   linear-gradient(160deg, var(--ink-700) 0%, var(--ink-900) 100%);

  /* ---- Type ---- */
  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hero:    "Luckiest Guy", "Fredoka", system-ui, sans-serif;

  /* ---- Spacing / radii (chunky) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* ---- Effects ---- */
  --shadow-sm:  0 2px 6px rgba(20, 27, 48, 0.10);
  --shadow-md:  0 6px 16px rgba(20, 27, 48, 0.12);
  --shadow-lg:  0 14px 30px rgba(20, 27, 48, 0.16);
  --shadow-xl:  0 24px 50px rgba(20, 27, 48, 0.20);

  /* Signature chunky pressable edge + candy sheen */
  --chunk-sm: 0 3px 0;
  --chunk-md: 0 5px 0;
  --chunk-lg: 0 7px 0;
  --sheen-top: inset 0 2px 0 rgba(255, 255, 255, 0.45);

  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med:  240ms;
}