/* =========================================================
   Dedico — design tokens
   Every page loads this first. Change a value here and it
   updates across the whole site.
   ========================================================= */

:root {
  /* ---- Brand colors (locked, from Design-Display-Logo/README.md) ---- */
  --brown: #5B3A22;
  --sage: #D5DDC8;
  --cream: #F6F3EC;

  /* ---- Supporting neutrals (tints and shades of the brand colors) ---- */
  --brown-deep: #3A2414;   /* hover state for brown buttons, darkest text */
  --brown-soft: #8C6A4F;   /* muted accents */
  --sage-deep: #B9C4A9;    /* hover / pressed sage */
  --sand: #ECE6DA;         /* image placeholders, soft panels */
  --paper: #FFFEFB;        /* raised surfaces: cards, drawers, header */

  /* ---- Roles (use these in components, not the raw colors) ---- */
  --bg: var(--cream);
  --surface: var(--paper);
  --text: var(--brown);
  --text-muted: #7A6250;
  --text-subtle: #8F7A68;
  --line: #E1D9CB;
  --line-strong: var(--brown);
  --accent: var(--brown);
  --accent-hover: var(--brown-deep);
  --on-accent: var(--cream);
  --sale: #9A4A2B;          /* sale price / low-stock note */

  /* ---- Typography ---- */
  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;           /* body, menus, buttons */
  --font-display: 'Josefin Sans', 'Jost', system-ui, sans-serif;              /* logo + headlines */
  --tracking-display: 0.2em;   /* spaced-out uppercase (logo, hero headline) */

  --fs-display: clamp(40px, 6vw, 76px);  /* home hero */
  --fs-h1: clamp(32px, 4.4vw, 52px);     /* page titles */
  --fs-h2: clamp(26px, 3.2vw, 38px);     /* section titles */
  --fs-h3: 20px;                         /* card / block titles */
  --fs-lead: 18px;                       /* intro paragraphs */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;                    /* eyebrows, labels (uppercase) */

  --lh-tight: 1.05;
  --lh-body: 1.6;
  --tracking-tight: -0.03em;
  --tracking-label: 0.14em;

  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section-y: clamp(64px, 9vw, 120px);  /* vertical padding between page sections */

  /* ---- Layout ---- */
  --max: 1320px;
  --max-text: 680px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;

  /* ---- Shape & depth ---- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-pill: 999px;
  --radius-card: 16px;     /* cards: rounded at rest, corners turn sharp on hover */
  --radius-btn: 0;         /* buttons: sharp rectangles. Try 2px for a softer corner */
  --shadow-sm: 0 1px 2px rgba(60, 35, 15, .06);
  --shadow: 0 1px 2px rgba(60, 35, 15, .07), 0 12px 32px rgba(60, 35, 15, .12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .25s;
  --dur-slow: .6s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; --dur-slow: 0s; }
}