/*
  brand/tokens.css — Zen & Go
  Sophie's palette (revised 2026-07-02): #faf8f5 / #f8f5f0 / #bac7b8 / #f4b7e9 / #3e5258
*/

:root {
  /* RAW PALETTE — Sophie's revised colors (2026-06-29) */
  --palette-white:    #faf8f5;
  --palette-cream:    #f8f5f0;
  --palette-sage:     #bac7b8;
  --palette-lime:     #f4b7e9;   /* blush — unified accent */
  --palette-blush:    #f4b7e9;
  --palette-charcoal: #3e5258;   /* now "iron grey" — kept var name for backward compat */

  /* DERIVED — functional mid-tones */
  --palette-charcoal-mid:  #6c7a7e;   /* muted text, labels */
  --palette-charcoal-dark: #2a3438;   /* deeper dark for pin cards, hover states */
  --palette-sage-border:   rgba(186, 199, 184, 0.45);
  --palette-sage-dark:     #7c8f79;   /* darkened sage for legible text on white/cream */

  /* SEMANTIC — what the rest of the system reads */
  --color-primary:    var(--palette-sage);
  --color-on-primary: var(--palette-charcoal);
  --color-accent:     var(--palette-sage);
  --color-pop:        var(--palette-lime);
  --color-pop-soft:   var(--palette-blush);
  --color-text:       var(--palette-charcoal);
  --color-text-muted: var(--palette-charcoal-mid);
  --color-bg:         var(--palette-white);
  --color-bg-soft:    var(--palette-cream);
  --color-bg-warm:    var(--palette-sage);
  --color-bg-dark:    var(--palette-charcoal);
  --color-border:     transparent;
  --color-divider:    var(--palette-sage-border);
  --color-success:    #2f7d32;
  --color-error:      #b00020;

  /* TYPOGRAPHY */
  --font-display:  'Crimson Pro', Georgia, serif;
  --font-heading:  'Work Sans', system-ui, sans-serif;
  --font-body:     'Crimson Pro', Georgia, serif;
  --font-accent:   'Crimson Pro', Georgia, serif;

  --font-weight-heading: 400;
  --font-weight-body:    300;
  --font-weight-accent:  300;

  --font-size-base:   17px;
  --line-height-base: 1.65;

  /* SPACING */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* RADIUS */
  --radius-button: 999px;
  --radius-card:   16px;
  --radius-input:  999px;
  --radius-pill:   999px;

  /* SHADOWS */
  --shadow-card:       0 1px 2px rgba(89,84,84,0.04), 0 8px 24px rgba(89,84,84,0.07);
  --shadow-card-hover: 0 2px 4px rgba(89,84,84,0.06), 0 16px 40px rgba(89,84,84,0.11);

  /* CONTAINERS */
  --container-narrow:  720px;
  --container-default: 1200px;
  --container-wide:    1400px;
}

html { font-size: var(--font-size-base); }

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.25;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { opacity: 0.8; }
img { max-width: 100%; height: auto; display: block; }