/* ============================================================
   THE ROYAL QUEST — Design Tokens
   ============================================================ */

/* --- Color Palette --- */
:root {
  /* Core */
  --ivory:       #FAF7F2;
  --sand:        #EDE8DF;
  --parchment:   #D9D0C3;
  --gold:        #C9A84C;
  --gold-dark:   #A8852E;
  --gold-light:  #E8D5A3;
  --royal:       #2C1A3E;
  --royal-mid:   #4A2E6B;
  --royal-light: #6B4D8A;
  --charcoal:    #1A1A1A;
  --ink:         #2D2A26;

  /* Semantic */
  --bg-primary:      var(--ivory);
  --bg-secondary:    var(--sand);
  --bg-accent:       var(--royal);
  --text-primary:    var(--ink);
  --text-secondary:  #5C5750;
  --text-muted:      #8C857B;
  --text-inverse:    var(--ivory);
  --text-gold:       var(--gold);
  --border-subtle:   var(--parchment);
  --border-strong:   #B8AFA0;

  /* State */
  --error:    #C0392B;
  --success:  #2E7D5E;
  --warning:  #B45309;

  /* Surfaces */
  --surface-elevated:    #FFFFFF;
  --surface-overlay:     rgba(44, 26, 62, 0.92);
  --shadow-sm:  0 1px 3px rgba(44,26,62,0.08), 0 1px 2px rgba(44,26,62,0.06);
  --shadow-md:  0 4px 12px rgba(44,26,62,0.10), 0 2px 4px rgba(44,26,62,0.08);
  --shadow-lg:  0 16px 40px rgba(44,26,62,0.14), 0 4px 8px rgba(44,26,62,0.08);
  --shadow-xl:  0 24px 64px rgba(44,26,62,0.18);
}

/* --- Typography --- */
:root {
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-accent:  'DM Sans', system-ui, sans-serif;

  /* Scale — fluid between mobile and desktop */
  --text-xs:   clamp(0.70rem,  0.68rem + 0.10vw, 0.75rem);
  --text-sm:   clamp(0.85rem,  0.82rem + 0.15vw, 0.90rem);
  --text-base: clamp(1.00rem,  0.96rem + 0.20vw, 1.063rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);
  --text-xl:   clamp(1.25rem,  1.15rem + 0.50vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   1.30rem + 1.00vw, 2.0rem);
  --text-3xl:  clamp(1.875rem, 1.50rem + 1.88vw, 2.75rem);
  --text-4xl:  clamp(2.25rem,  1.70rem + 2.75vw, 3.75rem);
  --text-5xl:  clamp(2.75rem,  2.00rem + 3.75vw, 4.75rem);

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.60;
  --leading-relaxed:1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;
}

/* --- Spacing Scale --- */
:root {
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
}

/* --- Layout --- */
:root {
  --container-max:     1200px;
  --container-wide:    1440px;
  --container-narrow:  720px;
  --gutter:            clamp(1rem, 4vw, 2rem);
  --grid-gap:          var(--space-8);
}

/* --- Borders & Radii --- */
:root {
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;
  --border-width: 1px;
}

/* --- Motion --- */
:root {
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
  --duration-slowest:900ms;
}

/* --- Z-Index --- */
:root {
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-sticky:   50;
  --z-nav:      80;
  --z-nav-mobile: 150;
}

/* --- Misc --- */
:root {
  --nav-height:       72px;
  --nav-height-mobile:60px;
  --form-max-width:   560px;
}