/* ───────────────────────────────────────────────────────────
   Klairely — shared design system
   Warm editorial calm · sage primary · coral for deadlines
   ─────────────────────────────────────────────────────────── */

:root{
  /* paper & surface */
  --paper:        #F7F4EE;   /* page background — warm cream */
  --paper-2:      #F1EBDF;   /* deeper cream band */
  --surface:      #FFFFFF;
  --surface-soft: #FCFAF5;
  --surface-tint: #FBF8F1;

  /* ink */
  --ink:    #2B2722;   /* near-black, warm */
  --ink-2:  #5B544A;   /* secondary text */
  --ink-3:  #8B8273;   /* muted / captions */
  --ink-on: #F7F4EE;   /* text on dark */

  /* lines */
  --line:   #E7E0D2;
  --line-2: #EFE9DC;
  --line-3: #F2EDE2;

  /* sage — primary action / brand */
  --sage:       #5E7C66;
  --sage-deep:  #496150;
  --sage-press: #3F5546;
  --sage-tint:  #E6EDE4;
  --sage-tint2: #D5E1D3;
  --sage-ink:   #34503D;   /* sage text on tint */

  /* coral — deadlines / urgency / highlights */
  --coral:      #CE6F4F;
  --coral-deep: #B85B3E;
  --coral-tint: #F8E6DC;
  --coral-tint2:#F2D6C7;
  --coral-ink:  #9A4A30;

  /* warm dark band (evening) */
  --night:      #2A2722;
  --night-2:    #353029;

  /* radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(43,39,34,.05), 0 1px 1px rgba(43,39,34,.04);
  --sh-md: 0 4px 14px rgba(43,39,34,.07), 0 1px 3px rgba(43,39,34,.05);
  --sh-lg: 0 18px 48px rgba(43,39,34,.12), 0 4px 14px rgba(43,39,34,.07);
  --sh-xl: 0 36px 80px rgba(43,39,34,.18), 0 8px 24px rgba(43,39,34,.10);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, system-ui, sans-serif;
}

*{ box-sizing:border-box; }

/* ── shared atoms ───────────────────────────────────────── */

.k-btn{
  font-family:var(--sans);
  font-weight:600;
  font-size:16px;
  line-height:1;
  letter-spacing:-.01em;
  border:none;
  border-radius:var(--r-pill);
  padding:15px 26px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.k-btn:active{ transform:translateY(1px) scale(.99); }

.k-btn--primary{
  background:var(--sage);
  color:#fff;
  box-shadow:0 2px 8px rgba(73,97,80,.28);
}
.k-btn--primary:hover{ background:var(--sage-deep); }

.k-btn--ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--line);
}
.k-btn--ghost:hover{ border-color:var(--ink-3); background:rgba(255,255,255,.5); }

.k-btn--coral{
  background:var(--coral);
  color:#fff;
  box-shadow:0 2px 8px rgba(184,91,62,.26);
}
.k-btn--coral:hover{ background:var(--coral-deep); }

/* chip / tag */
.k-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-weight:600; font-size:12.5px;
  letter-spacing:.01em;
  padding:6px 11px; border-radius:var(--r-pill);
}
.k-chip--sage{ background:var(--sage-tint); color:var(--sage-ink); }
.k-chip--coral{ background:var(--coral-tint); color:var(--coral-ink); }
.k-chip--neutral{ background:var(--paper-2); color:var(--ink-2); }

/* wordmark */
.k-word{
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.k-word .k-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--coral);
  display:inline-block;
}

/* utility */
.k-serif{ font-family:var(--serif); }
.k-sans{ font-family:var(--sans); }