/* RevSymphony design tokens — Warm Cream + Forest Green
   "Literary financial publication" palette: calm, premium, distinctive
   from the navy-blue SaaS pack. Imported by every template (landing,
   signin, signup, dashboard) so the brand stays consistent. */

:root {
  /* ─── Color ────────────────────────────────────────────────── */
  --bg:            #FAF8F3;   /* warm cream (Notion-ish, slightly warmer) */
  --surface:       #FFFFFF;   /* card / panel — pure white */
  --surface-hi:    #FFFFFF;   /* modal / popover — same */
  --surface-soft:  #F4F1EA;   /* sunken / muted */
  --line:          #E5E1D8;   /* warm border */
  --line-soft:    #EFECE3;    /* subtle divider */

  --ink:           #1A1612;   /* primary text — warm black */
  --ink-strong:    #0A0806;   /* hero / h1 */
  --ink-muted:     #6B6359;   /* secondary text — warm gray */
  --ink-dim:       #948B7E;   /* tertiary / placeholders */

  --accent:        #1F6B45;   /* forest green — the brand color */
  --accent-bright: #287850;   /* hover, live indicators */
  --accent-soft:   rgba(31, 107, 69, 0.10);
  --accent-line:   rgba(31, 107, 69, 0.30);

  --warm:          #C77B3E;   /* terracotta — self-correction pulses */
  --error:         #B43F3F;   /* deep red for errors */

  /* Channel palette — tuned for cream background (slightly deeper for contrast) */
  --ch-email:    #3B6FB5;
  --ch-slack:    #2C7A4E;
  --ch-whatsapp: #25D366;
  --ch-voice:    #B43F8E;   /* warm magenta — distinct from green stack */
  --ch-calendar: #C77B3E;
  --ch-ai:       #6B4FB5;

  /* ─── Type ─────────────────────────────────────────────────── */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont,
                  "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --fs-label-tiny: 11px;
  --fs-body:       14px;
  --fs-label:      14px;
  --fs-card-name:  18px;
  --fs-headline:   48px;

  /* ─── Spacing & radii (4px scale) ─────────────────────────── */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 9999px;

  /* ─── Motion ─────────────────────────────────────────────── */
  --t-fast: 120ms ease-out;
  --t-base: 220ms ease-out;
  --t-slow: 620ms ease-out;
  --t-pulse: 1500ms cubic-bezier(0.4, 0, 0.6, 1) infinite;

  /* ─── Shadows (subtle on cream) ──────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(26, 22, 18, 0.06);
  --shadow-md:   0 4px 16px rgba(26, 22, 18, 0.08);
  --shadow-lg:   0 12px 40px rgba(26, 22, 18, 0.10);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 0 24px rgba(31, 107, 69, 0.12);
}

/* Tabular numerals shortcut */
.tabnum { font-variant-numeric: tabular-nums; }

/* Reusable primitives */
.btn-primary {
  background: var(--accent);
  color: #FAF8F3;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-size: var(--fs-body);
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-base);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover { background: var(--accent-bright); transform: translateY(-1px); box-shadow: var(--shadow-glow); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 12px 24px;
  font-size: var(--fs-body);
  transition: border var(--t-fast), background var(--t-fast);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn-ghost:hover { border-color: var(--ink-muted); background: var(--surface); }

.input {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 12px 14px;
  font-size: var(--fs-body);
  font-family: var(--font-body);
  width: 100%;
  transition: border var(--t-fast), box-shadow var(--t-fast);
  outline: none;
  box-sizing: border-box;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--ink-dim); }

.label {
  font-size: var(--fs-label-tiny);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}