/* =========================================================================
   Flor & Ser — Design Tokens
   Colors, type, spacing, radii, shadows + semantic element styles.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Color: Surfaces ---------- */
  --bg-cream:           #F6F1E8;   /* page canvas — warm, not white */
  --bg-paper:           #FBF8F2;   /* cards, raised surfaces */
  --bg-sand:            #EDE4D3;   /* subtle grouping bg */
  --bg-deep:            #2C4036;   /* dark sections */

  /* ---------- Color: Brand ---------- */
  --brand-eucalipto:        #3F5A4A;   /* deep eucalyptus — primary voice */
  --brand-eucalipto-deep:   #2C4036;   /* hover/press, deep accent */
  --brand-eucalipto-soft:   #A6B5A4;   /* muted sage */
  --brand-clay:             #C97D5D;   /* terracotta — secondary voice */
  --brand-clay-deep:        #A6604A;
  --brand-clay-soft:        #E8C8B5;   /* clay tint */
  --accent-ouro:            #B89968;   /* muted gold */

  /* ---------- Color: Ink ---------- */
  --ink:        #2A2622;   /* warm charcoal — never pure black */
  --ink-soft:   #5C544C;
  --ink-mute:   #8A8278;
  --ink-on-dark: #F6F1E8;

  /* ---------- Color: Lines & Semantic ---------- */
  --line:       #E2D9C9;
  --line-soft:  #EFE8DA;
  --ok:         #5E7B5C;
  --warn:       #C49A4A;
  --err:        #A85A4A;

  /* ---------- Type: Families ---------- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:    'Outfit', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type: Scale ---------- */
  --fs-display-1:  72px;
  --fs-display-2:  56px;
  --fs-display-3:  44px;
  --fs-h1:         36px;
  --fs-h2:         28px;
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-overline:   12px;

  --lh-display:    1.1;
  --lh-heading:    1.2;
  --lh-body:       1.6;
  --lh-tight:      1.4;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline:0.16em;

  /* ---------- Spacing (4px base, generous scale) ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-input:  4px;
  --r-card:   8px;
  --r-lg:    12px;
  --r-pill:  999px;

  /* ---------- Shadows (soft, warm-tinted) ---------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(42,38,34,0.04);
  --shadow-md:   0 1px 2px rgba(42,38,34,0.04), 0 8px 24px rgba(42,38,34,0.05);
  --shadow-lg:   0 2px 4px rgba(42,38,34,0.05), 0 24px 48px rgba(42,38,34,0.08);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    160ms;
  --dur:         320ms;
  --dur-slow:    640ms;
  --dur-reveal:  800ms;

  /* ---------- Layout ---------- */
  --content-max:  1200px;
  --reading-max:   720px;
  --gutter:        32px;
}

/* =========================================================================
   Semantic element defaults — bring tokens to life on real elements.
   ========================================================================= */

html, body {
  background: var(--bg-cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, .display-1, .display-2, .display-3 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-heading);
  text-wrap: balance;
  margin: 0;
}

.display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display); font-weight: 400; }
.display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display); font-weight: 400; }
.display-3 { font-size: var(--fs-display-3); line-height: var(--lh-display); font-weight: 500; }

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; }
h4, .h4 { font-size: var(--fs-h4); font-weight: 600; font-family: var(--font-body); letter-spacing: var(--tracking-tight); }

/* The brand "&" — italic display, used as a flourish */
.amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0;
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-soft); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-tight); color: var(--ink-soft); }

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  color: var(--ink-mute);
}

.overline {
  font-size: var(--fs-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
}

a {
  color: var(--brand-eucalipto);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a:hover { color: var(--brand-eucalipto-deep); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sand);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-7) 0;
}

::selection {
  background: var(--brand-clay-soft);
  color: var(--ink);
}