/* Life In A Dollhouse — design tokens
   Palette comes from the brand itself: the periwinkle logo house and storefront,
   the shop's existing blush ground, cedar shingle roofs and brass hardware. */

:root {
  color-scheme: light;
  /* color */
  --paper: #FBF8F5;
  --paper-2: #F3EEE8;
  --periwinkle: #93A6CE;
  --periwinkle-soft: #DCE3F1;
  --periwinkle-deep: #5A6E9E;
  --periwinkle-ink: #3C4A6E;
  --blush: #F4DEE3;
  --blush-deep: #E4B9C4;
  --ink: #2A2D3A;
  --ink-soft: #5B5E6B;
  --ink-mute: #8B8E9A;
  --line: #E4DED7;
  --cedar: #C9A57A;
  --brass: #B08D3E;
  --brass-light: #D9BE7A;
  --sage: #A9B8A4;
  --white: #FFFFFF;
  --sale: #B4425A;

  /* type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino", serif;
  --font-body: "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md: 1.125rem;    /* 18 */
  --text-lg: 1.375rem;    /* 22 */
  --text-xl: 1.75rem;     /* 28 */
  --text-2xl: 2.5rem;     /* 40 */
  --text-3xl: clamp(2.5rem, 5vw, 4rem);          /* 40–64 */
  --text-display: clamp(3.25rem, 9.5vw, 8.5rem); /* 52–136 */

  --leading-tight: 0.95;
  --leading-snug: 1.15;
  --leading-body: 1.55;
  --leading-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* spacing (4pt base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* layout */
  --gutter: clamp(1.25rem, 6.5vw, 6rem);
  --measure: 34rem;          /* ~68 characters of body */
  --measure-wide: 44rem;
  --nav-h: 4.5rem;
  --ruler-w: 2.75rem;

  /* radius: only pills and the scallop use it */
  --radius-pill: 999px;
  --radius-xs: 3px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;

  /* elevation: a single, colored shadow used only on floating UI */
  --shadow-float: 0 18px 50px -20px rgba(60, 74, 110, 0.35);

  /* z */
  --z-ruler: 40;
  --z-nav: 50;
  --z-drawer: 60;
  --z-cursor: 70;
}