/* Rõdusaun.ee — Design Tokens (see design-files/DESIGN.md) */

:root {
  /* ---- Color — surfaces ---- */
  --color-canvas: #fff8f1;         /* page background */
  --color-white: #ffffff;          /* cards, header */
  --color-cream: #fff8f1;          /* light text on dark surfaces, image-frame bg */
  --color-beige: #e3d6c5;          /* reserved surface / badges */
  --color-mist-sage: #fee3b5;      /* soft highlight wash, hover/selected backgrounds */

  /* ---- Color — brand ---- */
  --color-sage: #fa5d00;           /* primary accent, CTAs, active states */
  --color-sage-dark: #fa5d00;      /* same as sage; hover uses --shadow-glow */
  --color-sage-light: #fee3b5;     /* muted brand-tinted text on dark surfaces */
  --color-forest: #1d1e1c;         /* headings, high emphasis, dark section/footer background */

  /* ---- Color — neutrals / text ---- */
  --color-graphite: #4a4a47;       /* body text */
  --color-fog: #777571;            /* muted text, helper copy */
  --color-hairline: #c0bbb6;       /* hairline border on cream/white */
  --color-hairline-dark: #999999;  /* emphasis divider */
  --color-onyx: #1d1e1c;           /* max-contrast text / icons */

  /* ---- Color — accents ---- */
  --color-clay: #e3d6c5;
  --color-gold: #fee3b5;
  --color-error: #a4453a;

  /* ---- Color — ember (commerce accent: price emphasis, badges) ---- */
  --color-ember: #fa5d00;          /* CTA highlight, "new"/in-stock badges, big price emphasis */
  --color-ember-dark: #4a4a47;     /* small/dense ember text needing legibility (price deltas, badge text) */
  --color-ember-light: #fee3b5;    /* badge/highlight wash backgrounds */

  /* ---- Surfaces (semantic) ---- */
  --surface-canvas: var(--color-canvas);
  --surface-card: var(--color-white);
  --surface-wash: var(--color-mist-sage);
  --surface-action: var(--color-sage);

  /* ---- Typography — families ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- Typography — weights ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Typography — scale ---- */
  --text-caption: 12px;   --leading-caption: 1.4;
  --text-body-sm: 14px;   --leading-body-sm: 1.5;
  --text-body: 16px;      --leading-body: 1.6;
  --text-lead: 18px;      --leading-lead: 1.6;
  --text-heading-sm: 24px;--leading-heading-sm: 1.25;
  --text-heading: 32px;   --leading-heading: 1.2;
  --text-display: 44px;   --leading-display: 1.08;
  --text-display-lg: 60px;--leading-display-lg: 1.04;

  /* ---- Spacing (4px base unit) ---- */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-144: 144px;

  /* ---- Layout ---- */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 28px;
  --element-gap: 20px;

  /* ---- Radius — pill for actions, softly rounded elsewhere ---- */
  --radius-full: 999px;    /* buttons, badges, pills */
  --radius-card: 16px;     /* cards, panels — soft, rounded */
  --radius-image: 12px;    /* photography frames — softly rounded gallery object */
  --radius-input: 10px;

  /* ---- Elevation — mostly flat, one soft card shadow, one warm accent glow ---- */
  --shadow-card: 0 1px 2px rgba(29, 30, 28, 0.04), 0 8px 24px rgba(29, 30, 28, 0.06);
  --shadow-glow: 0 10px 28px rgba(250, 93, 0, 0.24); /* primary CTA hover */
  --shadow-none: none;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}