/* desapegos design system — colors & type */
/* ───────────────────────────────────────────
   cozy & handmade / peachy warm pastels
   editorial serif display + rounded sans body
   all copy: lowercase, pt-br, informal
   ─────────────────────────────────────────── */

/* ── fonts ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Nunito:wght@400;500;600;700;800&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* ── peachy warm palette ─────────────────── */
  /* base neutrals (warm off-whites → deep cocoa) */
  --cream-50:  #fffaf5;   /* page bg */
  --cream-100: #fff4ec;   /* card bg, softer surface */
  --cream-200: #fde9dc;   /* subtle divider, hover surface */
  --cream-300: #f4dac7;   /* borders, pressed */

  --cocoa-900: #3d2418;   /* text strong */
  --cocoa-800: #5b3826;   /* text body */
  --cocoa-700: #6b4a3e;   /* text muted */
  --cocoa-500: #9c7a6a;   /* text subtle / placeholder */
  --cocoa-300: #c9ae9e;   /* hairline */

  /* primary — warm peach / coral */
  --peach-50:  #fff1ea;
  --peach-100: #ffe0d0;
  --peach-200: #ffc9b0;
  --peach-300: #ffb5a7;  /* primary swatch */
  --peach-400: #fb9a85;
  --peach-500: #ef7e66;  /* primary press / button */
  --peach-600: #d46148;
  --peach-700: #a84a35;

  /* secondary — blush / dusty rose */
  --blush-50:  #fef3ef;
  --blush-100: #fcdbd1;
  --blush-200: #fcd5ce;  /* secondary swatch */
  --blush-300: #f5b8ad;
  --blush-500: #de8878;

  /* tertiary — pale bone (for layering) */
  --bone-100: #f8edeb;
  --bone-200: #ecdcd8;

  /* accent — sage (used sparingly for "success" / "fresh") */
  --sage-100: #e3ebde;
  --sage-300: #b7cbab;
  --sage-500: #7a9968;
  --sage-700: #4f6b41;

  /* accent — butter (warnings / highlights / sale) */
  --butter-100: #fdf0cc;
  --butter-300: #f5d68a;
  --butter-500: #d9a635;
  --butter-700: #8f6a1a;

  /* accent — clay (destructive / errors) */
  --clay-100: #fbdcd0;
  --clay-300: #e89a85;
  --clay-500: #c45a3f;
  --clay-700: #843622;

  /* ── semantic colors ─────────────────────── */
  --bg:            var(--cream-50);
  --bg-raised:     #ffffff;
  --bg-sunken:     var(--cream-100);
  --bg-hover:      var(--cream-200);
  --bg-pressed:    var(--cream-300);

  --fg-1:          var(--cocoa-900);  /* headings, strong */
  --fg-2:          var(--cocoa-800);  /* body */
  --fg-3:          var(--cocoa-700);  /* muted, captions */
  --fg-4:          var(--cocoa-500);  /* placeholder, disabled-ish */
  --fg-on-peach:   #ffffff;

  --border:        var(--cream-300);
  --border-strong: var(--cocoa-300);
  --hairline:      rgba(107, 74, 62, 0.12);

  --primary:       var(--peach-300);
  --primary-ink:   var(--peach-700);
  --primary-hover: var(--peach-400);
  --primary-press: var(--peach-500);

  --success:       var(--sage-500);
  --warning:       var(--butter-500);
  --danger:        var(--clay-500);

  /* ── shadows — soft, warm, two-layer ───── */
  --shadow-xs: 0 1px 0 rgba(107, 74, 62, 0.06);
  --shadow-sm: 0 1px 2px rgba(107, 74, 62, 0.08), 0 1px 3px rgba(107, 74, 62, 0.05);
  --shadow-md: 0 2px 6px rgba(107, 74, 62, 0.08), 0 8px 20px rgba(107, 74, 62, 0.06);
  --shadow-lg: 0 6px 16px rgba(107, 74, 62, 0.10), 0 20px 40px rgba(107, 74, 62, 0.08);
  --shadow-inner: inset 0 1px 2px rgba(107, 74, 62, 0.08);
  --shadow-focus: 0 0 0 3px rgba(255, 181, 167, 0.45);

  /* ── radii ───────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* default, from user */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ── spacing (4-base) ───────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ── type families ───────────────────────── */
  --font-display: 'Fraunces', 'Georgia', serif;     /* editorial, soft */
  --font-body:    'Nunito', system-ui, sans-serif;  /* rounded, warm */
  --font-hand:    'Caveat', cursive;                /* accents, annotations */

  /* ── type scale (semantic) ──────────────── */
  --h-display: 56px;
  --h-1: 40px;
  --h-2: 30px;
  --h-3: 22px;
  --h-4: 18px;
  --body:  16px;
  --small: 14px;
  --tiny:  12px;

  /* ── motion ──────────────────────────────── */
  --ease-out-soft: cubic-bezier(0.22, 0.9, 0.36, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}

/* ── semantic type styles ──────────────────── */
.ds-display,
h1.display {
  font-family: var(--font-display);
  font-size: var(--h-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-variation-settings: "opsz" 120, "SOFT" 100;
}

h1, .ds-h1 {
  font-family: var(--font-display);
  font-size: var(--h-1);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

h2, .ds-h2 {
  font-family: var(--font-display);
  font-size: var(--h-2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

h3, .ds-h3 {
  font-family: var(--font-body);
  font-size: var(--h-3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--fg-1);
}

h4, .ds-h4 {
  font-family: var(--font-body);
  font-size: var(--h-4);
  font-weight: 700;
  line-height: 1.35;
  color: var(--fg-1);
}

p, .ds-body {
  font-family: var(--font-body);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-2);
}

.ds-small, small {
  font-family: var(--font-body);
  font-size: var(--small);
  line-height: 1.5;
  color: var(--fg-3);
}

.ds-tiny {
  font-family: var(--font-body);
  font-size: var(--tiny);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.ds-hand {
  font-family: var(--font-hand);
  font-weight: 500;
  color: var(--peach-600);
}

.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--tiny);
  font-weight: 700;
  text-transform: none; /* never uppercase */
  letter-spacing: 0.04em;
  color: var(--peach-600);
}

/* ── base resets that play nice with the system ── */
body.ds-body-defaults {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── rose theme ─────────────────────────────────── */
/* Activate with <html data-theme="rose">            */
[data-theme="rose"] {
  --primary:       #fda4af;  /* rose-300 */
  --primary-ink:   #be123c;  /* rose-700 */
  --primary-hover: #fb7185;  /* rose-400 */
  --primary-press: #f43f5e;  /* rose-500 */

  --peach-50:  #fff1f2;
  --peach-100: #ffe4e6;
  --peach-200: #fecdd3;
  --peach-300: #fda4af;
  --peach-400: #fb7185;
  --peach-500: #f43f5e;
  --peach-600: #e11d48;
  --peach-700: #be123c;
}