/* ============================================================
   kardia — design tokens
   creative · minimalistic · straight · bold, with playful accents
   ------------------------------------------------------------
   Source of truth for the kardia identity. Do not invent new
   colors or approximate these values from memory.
   Light-first: linen is the canvas. Dark mode is supported and
   flips ink/linen roles; the pulse accent brightens.
   ============================================================ */

/* -- Brand font: Betania Patmos (OFL) — the wordmark, nothing else.
      Self-host for GDPR. */
@font-face {
  font-family: "Betania Patmos";
  src: url("/assets/fonts/BetaniaPatmos-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* -- Display font: Gabarito (OFL, Google Fonts / @fontsource/gabarito)
      Headlines only, always ExtraBold (800). Never light weights.
   -- Body/UI font: Inter (already in use — keep).
   -- Mono: IBM Plex Mono — shift times, labels, footnotes. */

:root {
  /* ---- raw palette (the only five colors) ---- */
  --kardia-linen:  #F1F0EE; /* the canvas — warm paper, default background */
  --kardia-ink:    #1A1A17; /* text; dark-mode canvas is --kardia-ink-deep */
  --kardia-pulse:  #007D4D; /* the accent — ONE green element per view */
  --kardia-mint:   #D5F0E0; /* soft surface — chips, highlights, callouts (always ink text) */
  --kardia-stone:  #DEDCD6; /* quiet structure — borders, dividers */

  /* supporting tones (derived, not brand colors) */
  --kardia-ink-deep:     #141412; /* dark-mode canvas */
  --kardia-card:         #FFFFFF; /* raised surface on linen */
  --kardia-muted:        #63625B; /* secondary text on linen (5.4:1) */
  --kardia-pulse-bright: #43D58F; /* pulse in dark mode (9.8:1 on ink-deep) */

  /* ---- type ---- */
  --font-kardia:  "Betania Patmos", cursive;               /* brand name only, always lowercase */
  --font-display: "Gabarito", "Avenir Next", "Segoe UI", sans-serif; /* weight 800 only */
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* type scale (px reference: 56 / 40 / 28 / 20 / 16 body / 13 mono) */
  --text-display: 3.5rem;
  --text-h1:      2.5rem;
  --text-h2:      1.75rem;
  --text-h3:      1.25rem;
  --text-body:    1rem;
  --text-mono:    0.8125rem;

  /* ---- shape & motion ---- */
  --radius: 0.625rem;            /* kept from current UI */
  --ease-kardia: cubic-bezier(0.21, 0.47, 0.32, 0.98);

  /* ---- semantic mappings (shadcn/Tailwind v4 compatible) ---- */
  --background: var(--kardia-linen);
  --foreground: var(--kardia-ink);
  --card: var(--kardia-card);
  --card-foreground: var(--kardia-ink);
  --primary: var(--kardia-ink);
  --primary-foreground: var(--kardia-linen);
  --secondary: var(--kardia-mint);
  --secondary-foreground: var(--kardia-ink);
  --muted: #E9E8E4;
  --muted-foreground: var(--kardia-muted);
  --accent-brand: var(--kardia-pulse);
  --border: var(--kardia-stone);
  --input: var(--kardia-stone);
  --ring: var(--kardia-pulse);
  --destructive: oklch(0.577 0.245 27.325); /* functional red, unchanged */
  --destructive-foreground: #FFFFFF;
}

.dark {
  --background: var(--kardia-ink-deep);
  --foreground: var(--kardia-linen);
  --card: #201F1C;
  --card-foreground: var(--kardia-linen);
  --primary: var(--kardia-linen);
  --primary-foreground: var(--kardia-ink);
  --secondary: #24312A; /* mint's dark sibling — muted green surface */
  --secondary-foreground: var(--kardia-linen);
  --muted: #262521;
  --muted-foreground: #A3A29B;
  --accent-brand: var(--kardia-pulse-bright);
  --border: #FFFFFF1A;
  --input: #FFFFFF26;
  --ring: var(--kardia-pulse-bright);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: #FFFFFF;
}

/* ============================================================
   Ready-made brand pieces
   ============================================================ */

/* The brand name — "kardia", always lowercase, always script. */
.font-kardia { font-family: var(--font-kardia); }

/* Display headlines — bold and straight. Pair with one
   green word maximum (see .kardia-highlight). */
.kardia-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* The one highlighted word in a headline. Never more than one
   green element per view. */
.kardia-highlight { color: var(--accent-brand); }

/* Mono labels — shift times, dates, tags, footnotes. */
.kardia-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.02em;
}

/* Primary action — ink, not green: the pulse stays scarce. */
.kardia-btn {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  transition: transform 0.15s var(--ease-kardia);
}
.kardia-btn:hover { transform: translateY(-1px); }

/* Callout / chip surface — mint always carries ink text. */
.kardia-callout {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

/* Entry animation (kept from current landing page). */
@keyframes kardia-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: kardia-fade-up 0.55s var(--ease-kardia) both; }

/* Heartbeat loader — the playful accent in motion. */
@keyframes kardia-beat {
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.12); }
  28%      { transform: scale(1); }
  42%      { transform: scale(1.08); }
}
.kardia-beat { animation: kardia-beat 1.2s ease-in-out infinite; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .kardia-beat { animation: none; }
}