/* ProNail Design System v2 — Boutique Rosé */

:root {
  /* Surface */
  --pn-bg: #fdfbf9;
  --pn-surface: #ffffff;
  --pn-surface-2: #f7f1ee;
  --pn-surface-3: #efe6e1;
  --pn-line: #ead8d3;
  --pn-line-2: #e7e0db;

  /* Brand */
  --pn-rose: #E8B4B8;       /* primary rose */
  --pn-rose-soft: #F3D5D7;  /* fills, hovers */
  --pn-rose-mist: #FAEDEE;  /* tint backgrounds */
  --pn-mauve: #9B5C5F;      /* deep mauve, accents */
  --pn-mauve-deep: #6E3E40; /* hover deep */

  /* Ink */
  --pn-ink: #1c1917;
  --pn-ink-2: #44403c;
  --pn-ink-3: #78716c;
  --pn-ink-4: #a8a29e;

  /* Status */
  --pn-success: #5C7A5A;
  --pn-success-soft: #E5EBE3;
  --pn-warning: #B8865A;
  --pn-warning-soft: #F4E9D9;
  --pn-danger: #A85556;
  --pn-danger-soft: #F4DCDC;
  --pn-info: #6B7B8C;
  --pn-info-soft: #E1E6EB;

  /* Type */
  --pn-display: 'Fraunces', 'Times New Roman', serif;
  --pn-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --pn-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radius */
  --pn-r-sm: 8px;
  --pn-r-md: 12px;
  --pn-r-lg: 18px;
  --pn-r-xl: 24px;
  --pn-r-pill: 999px;

  /* Shadow */
  --pn-shadow-sm: 0 1px 2px rgba(28,25,23,.04), 0 1px 1px rgba(28,25,23,.03);
  --pn-shadow-md: 0 4px 12px rgba(28,25,23,.06), 0 2px 4px rgba(28,25,23,.04);
  --pn-shadow-lg: 0 12px 32px rgba(28,25,23,.08), 0 4px 8px rgba(28,25,23,.04);
  --pn-shadow-rose: 0 8px 24px rgba(155,92,95,.18);
}

/* base */
.pn { font-family: var(--pn-sans); color: var(--pn-ink); background: var(--pn-bg); -webkit-font-smoothing: antialiased; }
.pn * { box-sizing: border-box; }
.pn-display { font-family: var(--pn-display); font-weight: 400; letter-spacing: -0.02em; font-optical-sizing: auto; font-variation-settings: "SOFT" 30, "WONK" 0; }
.pn-display-italic { font-family: var(--pn-display); font-style: italic; font-weight: 300; letter-spacing: -0.015em; }
.pn-mono { font-family: var(--pn-mono); }

/* Logo */
.pn-logo { font-family: var(--pn-display); font-style: italic; font-weight: 300; letter-spacing: -0.02em; color: var(--pn-ink); display: inline-flex; align-items: baseline; gap: 1px; }
.pn-logo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pn-mauve); display: inline-block; transform: translateY(-2px); }

/* Buttons */
.pn-btn { font-family: var(--pn-sans); font-weight: 500; font-size: 14px; line-height: 1; padding: 12px 18px; border-radius: var(--pn-r-md); border: 1px solid transparent; cursor: pointer; transition: all .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.pn-btn-primary { background: var(--pn-mauve); color: #fff; }
.pn-btn-primary:hover { background: var(--pn-mauve-deep); }
.pn-btn-rose { background: var(--pn-rose); color: var(--pn-ink); }
.pn-btn-rose:hover { background: #d99fa3; }
.pn-btn-ghost { background: transparent; color: var(--pn-ink); border-color: var(--pn-line); }
.pn-btn-ghost:hover { background: var(--pn-surface-2); }
.pn-btn-soft { background: var(--pn-rose-mist); color: var(--pn-mauve); }
.pn-btn-soft:hover { background: var(--pn-rose-soft); }
.pn-btn-lg { padding: 14px 22px; font-size: 15px; }
.pn-btn-sm { padding: 8px 12px; font-size: 13px; border-radius: var(--pn-r-sm); }
.pn-btn-icon { padding: 10px; border-radius: var(--pn-r-md); }

/* Chip / pill */
.pn-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--pn-r-pill); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; }
.pn-chip-rose { background: var(--pn-rose-mist); color: var(--pn-mauve); }
.pn-chip-success { background: var(--pn-success-soft); color: var(--pn-success); }
.pn-chip-warning { background: var(--pn-warning-soft); color: var(--pn-warning); }
.pn-chip-danger { background: var(--pn-danger-soft); color: var(--pn-danger); }
.pn-chip-neutral { background: var(--pn-surface-2); color: var(--pn-ink-2); }

/* Card */
.pn-card { background: var(--pn-surface); border: 1px solid var(--pn-line-2); border-radius: var(--pn-r-lg); }
.pn-card-soft { background: var(--pn-surface-2); border: 1px solid var(--pn-line); border-radius: var(--pn-r-lg); }

/* Input */
.pn-input { width: 100%; font-family: var(--pn-sans); font-size: 14px; padding: 12px 14px; border: 1px solid var(--pn-line-2); border-radius: var(--pn-r-md); background: var(--pn-surface); color: var(--pn-ink); transition: border-color .15s ease, box-shadow .15s ease; }
.pn-input:focus { outline: none; border-color: var(--pn-mauve); box-shadow: 0 0 0 3px rgba(155,92,95,.12); }
.pn-label { font-size: 12px; font-weight: 500; color: var(--pn-ink-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; display: block; }

/* Section eyebrow */
.pn-eyebrow { font-family: var(--pn-mono); font-size: 11px; font-weight: 500; color: var(--pn-mauve); text-transform: uppercase; letter-spacing: 0.12em; }

/* Divider with dot */
.pn-divider { height: 1px; background: var(--pn-line-2); }

/* Placeholder (image) */
.pn-placeholder { background: repeating-linear-gradient(45deg, var(--pn-surface-2) 0 8px, var(--pn-surface-3) 8px 16px); border: 1px dashed var(--pn-line); border-radius: var(--pn-r-md); display: flex; align-items: center; justify-content: center; font-family: var(--pn-mono); font-size: 11px; color: var(--pn-ink-3); text-align: center; padding: 8px; }

/* Sidebar item */
.pn-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--pn-r-md); color: var(--pn-ink-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s ease; }
.pn-nav-item:hover { background: var(--pn-surface-2); color: var(--pn-ink); }
.pn-nav-item.active { background: var(--pn-ink); color: #fff; }
.pn-nav-item.active .pn-nav-icon { color: var(--pn-rose); }

.pn-nav-icon { width: 18px; height: 18px; opacity: 0.85; }

/* Tab pill */
.pn-tabs { display: inline-flex; padding: 4px; background: var(--pn-surface-2); border-radius: var(--pn-r-pill); }
.pn-tab { padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--pn-ink-3); border-radius: var(--pn-r-pill); cursor: pointer; transition: all .15s ease; }
.pn-tab.active { background: var(--pn-surface); color: var(--pn-ink); box-shadow: var(--pn-shadow-sm); }

/* Avatar */
.pn-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--pn-rose-mist); color: var(--pn-mauve); display: inline-flex; align-items: center; justify-content: center; font-family: var(--pn-display); font-size: 14px; font-weight: 500; flex-shrink: 0; }
.pn-avatar-lg { width: 56px; height: 56px; font-size: 20px; }

/* Status dot */
.pn-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.pn-dot-success { background: var(--pn-success); }
.pn-dot-warning { background: var(--pn-warning); }
.pn-dot-danger { background: var(--pn-danger); }
.pn-dot-rose { background: var(--pn-mauve); }
.pn-dot-neutral { background: var(--pn-ink-2); }

/* Mobile bottom nav */
.pn-bottom-nav { display: flex; justify-content: space-around; align-items: center; padding: 10px 16px 14px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--pn-line-2); }
.pn-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--pn-ink-3); cursor: pointer; padding: 4px 8px; }
.pn-bottom-nav-item.active { color: var(--pn-mauve); }
.pn-bottom-nav-item .pn-bottom-icon { width: 22px; height: 22px; }

/* Mobile header */
.pn-m-header { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; background: var(--pn-bg); border-bottom: 1px solid var(--pn-line-2); }

/* Subtle textures / dividers */
.pn-rule { display: flex; align-items: center; gap: 12px; color: var(--pn-ink-4); font-family: var(--pn-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.pn-rule::before, .pn-rule::after { content: ''; flex: 1; height: 1px; background: var(--pn-line-2); }

/* Stat number */
.pn-stat { font-family: var(--pn-display); font-weight: 400; letter-spacing: -0.03em; line-height: 1; }

/* Scrollbar */
.pn-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.pn-scroll::-webkit-scrollbar-thumb { background: var(--pn-line); border-radius: 3px; }
.pn-scroll::-webkit-scrollbar-track { background: transparent; }