/* ============================================================
   BigMail · SaaS — Design tokens (beige + forest green)
   ============================================================ */

:root{
  /* Surfaces — warm beige base */
  --bg:           #f5efdf;   /* warm beige page */
  --bg-2:         #ede5cc;   /* deeper beige */
  --paper:        #fbf8ed;   /* cream card */
  --paper-2:      #f7f1de;
  --ink:          #0a1f15;   /* deep forest ink */
  --ink-2:        #2d4438;
  --muted:        #6b7d72;
  --line:         #d9d0b6;
  --line-2:       #e3dcc2;

  /* Brand — forest green */
  --brand:        #0f5d2d;
  --brand-2:      #094524;
  --brand-3:      #2d8a4f;
  --brand-soft:   #d6e6db;
  --brand-faint:  #ebf2ed;

  /* Functional */
  --warn:         #b45309;
  --warn-soft:    #f3e5c4;
  --danger:       #9f1d1d;
  --danger-soft:  #f3d8d8;
  --info:         #1d4ed8;
  --info-soft:    #dbe8fa;

  /* Type */
  --font-sans:    'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Radii / Shadows */
  --r-sm:         6px;
  --r-md:         10px;
  --r-lg:         14px;
  --r-xl:         20px;
  --r-2xl:        28px;
  --sh-1:         0 1px 0 rgba(10,31,21,.03), 0 8px 24px -12px rgba(10,31,21,.10);
  --sh-2:         0 24px 60px -22px rgba(10,31,21,.22);
  --sh-soft:      0 1px 2px rgba(10,31,21,.04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  font-feature-settings:"ss06","ss01","tnum";
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:inherit}
.mono{font-family:var(--font-mono)}

/* ---- Brand mark ---- */
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-0.02em}
.brand-mark{
  width:28px;height:28px;border-radius:8px;
  background:radial-gradient(circle at 30% 30%, #2d8a4f, #0f5d2d 55%, #094524);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 4px 10px -4px rgba(15,93,45,.55);
  position:relative;flex-shrink:0;
}
.brand-mark::after{
  content:"";position:absolute;inset:7px;border-radius:3px;
  border:1.6px solid rgba(255,255,255,.92);
  border-bottom:none;border-right:none;
  transform:rotate(45deg);
}
.brand-name{font-size:17px;color:var(--ink)}
.brand-name span{color:var(--brand)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:14px;line-height:1;letter-spacing:-0.01em;
  padding:11px 17px;border-radius:10px;
  border:1px solid transparent;
  transition:transform .08s, background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{color:var(--ink)}
.btn-ghost:hover{background:rgba(10,31,21,.05)}
.btn-line{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:#b9ad8a;background:#fff}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{background:#000}
.btn-brand{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 6px 14px -8px rgba(15,93,45,.6)}
.btn-brand:hover{background:var(--brand-2);border-color:var(--brand-2)}
.btn-cream{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-cream:hover{background:#fff}
.btn-sm{padding:8px 13px;font-size:13px;border-radius:8px}
.btn-xs{padding:6px 10px;font-size:12px;border-radius:7px}
.btn-lg{padding:14px 22px;font-size:15px;border-radius:11px}

/* ---- Pills ---- */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;line-height:1;
  padding:5px 9px;border-radius:99px;
  background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line);
}
.pill.green{background:var(--brand-soft);color:var(--brand-2);border-color:#bdd4c4}
.pill.amber{background:var(--warn-soft);color:var(--warn);border-color:#e2caa0}
.pill.red{background:var(--danger-soft);color:var(--danger);border-color:#e8c4c4}
.pill.dark{background:var(--ink);color:#dfeae3;border-color:var(--ink)}
.pill .dot{
  width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);
}

/* ---- Cards ---- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}

/* ---- Inputs ---- */
.input,.select{
  width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;font-size:14px;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(15,93,45,.14);
}

/* ---- Misc ---- */
.kbd{
  display:inline-block;font-family:var(--font-mono);font-size:11px;
  background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:2px 6px;color:var(--ink-2);
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#c4b793;border-radius:99px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#a89976}
::-webkit-scrollbar-track{background:transparent}

/* ---- Animations ---- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pulseDot{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.4;transform:scale(.85)}
}