/*
 * Emori brand tokens — extracted from the canonical brand sheet 2026-05-06.
 * Drop this file into any web view that needs the brand palette/fonts.
 * For Tailwind: copy the values into tailwind.config.js theme.extend.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Fraunces:ital,wght@0,400;0,500;1,400;1,500&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* Core palette — use these on every brand surface */
  --emori-ink:     #0B132B;  /* primary dark — backgrounds, text on cream */
  --emori-cream:   #FFF8EE;  /* primary light — backgrounds, text on ink */
  --emori-sunrise: #3BA7C7;  /* primary accent — QR mark, CTAs, highlights */

  /* Cream variant — slightly lighter, for elevated surfaces */
  --emori-cream-lift: #FFFCF5;

  /* Mood colors — used on tenant-themed code viewer pages and gift verticals.
     Never use more than ONE mood color on a single screen alongside the core. */
  --emori-yellow:   #FFB627;
  --emori-pink:     #F26E9A;
  --emori-lavender: #A98FE0;
  --emori-teal:     #3DB7C7;
  --emori-green:    #6BAA75;

  /* Font stacks */
  --emori-font-sans:  'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --emori-font-serif: 'Fraunces', 'Instrument Serif', Georgia, serif;
  --emori-font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/*
 * Wordmark composite
 * Use as: <span class="emori-wordmark">em<svg class="emori-wordmark__o">…mark…</svg>ri</span>
 *
 * The "o" SVG sits at the lowercase x-height (≈74% of cap height in Manrope 800)
 * so the wordmark reads as one unified piece.
 */
.emori-wordmark {
  font-family: var(--emori-font-sans);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  color: var(--emori-cream);
}
.emori-wordmark__o {
  width: 0.66em;
  height: 0.66em;
  display: inline-block;
  vertical-align: baseline;
  margin: 0 -0.005em;
  position: relative;
  top: 0.013em;
  color: currentColor;  /* SVG circle uses stroke="currentColor" */
}

/* Tagline — italic Fraunces. Use for hero copy and section openers. */
.emori-tagline {
  font-family: var(--emori-font-serif);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Mono label — small uppercase eyebrow text. */
.emori-label {
  font-family: var(--emori-font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
}