/*
 * ResumeAId brand theme — canonical source of truth for the palette,
 * type, and wordmark treatment. Locked in on the coming-soon site;
 * copy these tokens/components into the real product frontend
 * verbatim rather than re-deriving them.
 *
 * Fonts (load separately via Google Fonts):
 *   Plus Jakarta Sans — body/UI typeface, weights 200-800
 *   Anek Odia         — was the original logo typeface; no longer
 *                        used live (see wordmark below), kept here
 *                        only for reference/history.
 *
 * If the target uses Tailwind v4, mirror these as @theme tokens too
 * (--color-charcoal, --color-teal, --color-sand, --color-amber,
 * --font-sans) — Tailwind's browser JIT only reads @theme from an
 * inline <style type="text/tailwindcss"> tag, not this file.
 */

:root {
  --color-charcoal: #1A1A1A;
  --color-teal: #005B60;
  --color-sand: #E5DCCB;
  --color-amber: #FFBF00;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* ---------- Wordmark ----------
 * The "resumeaid.app" mark, live text (not an image/SVG) so it stays
 * crisp and left-aligns naturally with surrounding copy at any size.
 * The "ai" inside "aid" is highlighted in a diagonal-corner teal chip
 * with an amber accent standing in for the dot of the "i" — uses a
 * dotless "ı" (U+0131) so the accent's position is ours to control
 * rather than fighting the font's own tittle placement.
 *
 * Markup:
 *   <span class="wordmark">resume<span class="ai">a<span class="i">ı<i class="dot"></i></span></span>d<span class="suffix">.app</span></span>
 */

.wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-sand);
  display: inline-flex;
  align-items: baseline;
}

.wordmark .ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
  padding: 0 0.1em;
  margin: 0 0.02em;
  position: relative;
  z-index: 1;
}

.wordmark .ai::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.04em;
  bottom: 0;
  background: var(--color-teal);
  border-radius: 0.24em 0.06em 0.24em 0.06em;
  z-index: -1;
}

.wordmark .ai .i {
  position: relative;
  display: inline-block;
}

.wordmark .ai .i .dot {
  position: absolute;
  left: 50%;
  top: 0.06em;
  transform: translateX(-50%);
  width: 0.15em;
  height: 0.15em;
  border-radius: 0.04em;
  background: var(--color-amber);
}

.wordmark .suffix {
  opacity: 0.6;
  font-weight: 700;
}