/* ==========================================================================
   Aurelia Textile — Design Tokens
   ========================================================================== */

:root {
  /* ---- Palette (raw) -------------------------------------------------- */
  --color-cream: #ECEBC2;
  --color-cream-alt: #EDEFC3;
  --color-cream-deep: #EEF0C0;

  --color-aubergine-900: #2B1B3A;
  --color-aubergine-800: #3A2A4A;
  --color-aubergine-700: #332346;

  --color-purple-600: #6B4E93;
  --color-purple-500: #5C4270;
  --color-purple-400: #8B7EC8;
  --color-purple-300: #B9A9E8;

  --color-lime-600: #C6E23C;
  --color-lime-500: #D6ED4A;
  --color-lime-400: #DDEC7C;
  --color-lime-300: #E4F0A0;

  --color-terracotta-600: #D98F73;
  --color-terracotta-500: #E0987C;
  --color-terracotta-300: #E8B49B;

  --color-navy-600: #4C5A78;

  --color-near-black: #1C1220;
  --color-cream-text: #F0EBD8;

  /* ---- Semantic aliases ------------------------------------------------ */
  --bg-page: var(--color-cream);
  --bg-hero: var(--color-cream);
  --bg-nav: rgba(237, 236, 200, 0.82);
  --bg-collection: var(--color-cream-alt);
  --bg-lab: var(--color-aubergine-700);
  --bg-impact: var(--color-lime-400);
  --bg-builder: var(--color-cream-deep);
  --bg-footer: var(--color-purple-500);
  --bg-utility-bar: var(--color-near-black);
  --bg-marquee: var(--color-aubergine-900);

  --text-heading: var(--color-aubergine-900);
  --text-heading-inverse: var(--color-cream-text);
  --text-accent: var(--color-purple-500);
  --text-accent-inverse: var(--color-lime-600);
  --text-body-muted: #4A3F55;
  --text-body-muted-inverse: #C9BEDA;
  --text-label: #5B4E68;
  --text-label-inverse: var(--color-lime-600);

  --btn-primary-bg: var(--color-aubergine-900);
  --btn-primary-text: var(--color-cream-text);
  --btn-outline-border: var(--color-aubergine-900);
  --btn-outline-text: var(--color-aubergine-900);
  --btn-outline-border-inverse: var(--color-cream-text);
  --btn-outline-text-inverse: var(--color-cream-text);

  --divider: rgba(43, 27, 58, 0.16);
  --divider-inverse: rgba(240, 235, 216, 0.22);

  /* ---- Type scale (fluid) ----------------------------------------------- */
  --fs-display: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h2: clamp(2.25rem, 4.4vw, 3.75rem);
  --fs-stat-number: clamp(3rem, 7vw, 5.25rem);
  --fs-body: clamp(0.95rem, 1vw, 1.05rem);
  --fs-body-sm: 0.875rem;
  --fs-label: 0.75rem;
  --fs-nav: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-relaxed: 1.6;

  --tracking-label: 0.14em;
  --tracking-nav: 0.06em;

  /* ---- Spacing (8px scale) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;

  --section-pad-y: clamp(4rem, 10vw, 8rem);
  --container-pad-x: clamp(1.25rem, 5vw, 3rem);
  --container-max: 1400px;

  /* ---- Side rail ---------------------------------------------------------- */
  --rail-w: 68px;
  --rail-w-open: 268px;
  --rail-gap: var(--space-4);
  /* Horizontal room the rail reserves. 0 on mobile, where it's a drawer. */
  --rail-space: 0px;

  /* ---- Radii / shadows --------------------------------------------------- */
  --radius-pill: 999px;
  --radius-card: 28px;
  --radius-card-sm: 18px;

  --shadow-nav: 0 8px 24px rgba(43, 27, 58, 0.12);
  --shadow-blob: 0 40px 80px rgba(43, 27, 58, 0.35);
  --shadow-card: 0 20px 45px rgba(43, 27, 58, 0.16);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}

@media (min-width: 1024px) {
  :root {
    /* rail width + its gap on both sides, so content clears the collapsed rail */
    --rail-space: calc(var(--rail-w) + var(--space-6));
  }
}