/* tokens.css — Lesetoiles. Warm editorial fashion theme (circular fashion / clothing swap). */
:root {
  /* Brand: warm clay + sage. Two brand colors + warm neutrals. */
  --clay: #c2603f;      /* terracotta primary */
  --clay-600: #a94e30;
  --clay-050: #fbeee8;
  --sage: #6f7a5a;      /* sage secondary (sustainability) */
  --sage-050: #eef0e7;
  --ink: #221c17;

  /* Warm neutrals (paper/ivory) */
  --p-0:  #ffffff;
  --p-25: #fdfaf5;
  --p-50: #faf5ec;
  --p-100:#f4ece0;
  --p-200:#eadfce;
  --p-300:#dccbb3;
  --p-400:#b3a48d;
  --p-500:#8a7c66;
  --p-600:#6b5f4d;
  --p-700:#4d4436;
  --p-800:#332d24;
  --p-900:#221c17;

  --bg: var(--p-25);
  --bg-alt: var(--p-50);
  --surface: var(--p-0);
  --surface-2: var(--p-100);
  --border: #e7dcca;
  --border-strong: #d8c8ad;
  --text: var(--p-900);
  --text-2: var(--p-600);
  --text-3: var(--p-500);
  --on-clay: #fff7f2;
  --link: var(--clay-600);

  /* Fluid type scale */
  --step--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.95rem);
  --step-0:  clamp(1.06rem, 1.01rem + 0.24vw, 1.19rem);
  --step-1:  clamp(1.28rem, 1.18rem + 0.44vw, 1.6rem);
  --step-2:  clamp(1.55rem, 1.37rem + 0.8vw, 2.15rem);
  --step-3:  clamp(1.86rem, 1.57rem + 1.28vw, 2.9rem);
  --step-4:  clamp(2.24rem, 1.78rem + 2.05vw, 3.9rem);
  --step-5:  clamp(2.7rem, 2.0rem + 3.1vw, 5.2rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --section-y: clamp(84px, 10vw, 168px);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 66ch;

  --r-sm:6px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-full:999px;

  --sh-1: 0 1px 2px rgba(34,28,23,.05), 0 1px 3px rgba(34,28,23,.05);
  --sh-2: 0 8px 24px rgba(34,28,23,.08);
  --sh-3: 0 24px 56px rgba(34,28,23,.12);
  --sh-clay: 0 12px 34px rgba(194,96,63,.22);

  --dur-1:200ms; --dur-2:340ms; --dur-3:520ms; --dur-4:760ms; --dur-5:1000ms;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.4,0,1,1);

  --container: 1200px;
  --container-wide: 1360px;
  --header-h: 78px;

  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --grad-warm: linear-gradient(120deg, #f6e6da, #f0d8c6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1712;
    --bg-alt: #211c16;
    --surface: #26201a;
    --surface-2: #2e271f;
    --border: #3a3126;
    --border-strong: #4a3f30;
    --text: #f4ece0;
    --text-2: #cbbda8;
    --text-3: #a2937e;
    --clay: #e2916f;
    --clay-600: #eaa588;
    --clay-050: #33261f;
    --link: #eaa588;
    --on-clay: #221109;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 8px 24px rgba(0,0,0,.45);
    --sh-3: 0 24px 56px rgba(0,0,0,.5);
    --sh-clay: 0 12px 34px rgba(226,145,111,.18);
    --grad-warm: linear-gradient(120deg, #33261f, #3a2a20);
  }
}