/* ─────────────────────────────────────────────────────────────
   Sanio Hi-Fi · Design Tokens & Base Styles
   Modern/friendly, Notion/Linear inspired. Muted green accent.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg:        oklch(0.985 0.004 95);     /* warm near-white page */
  --surface:   #ffffff;
  --surface-2: oklch(0.975 0.004 95);     /* card-on-card */
  --surface-3: oklch(0.955 0.005 95);     /* tinted panels */

  /* Ink */
  --ink:       oklch(0.20 0.015 240);
  --ink-2:     oklch(0.32 0.013 240);
  --ink-soft:  oklch(0.48 0.011 240);
  --ink-faint: oklch(0.66 0.009 240);

  /* Strokes */
  --line:      oklch(0.93 0.005 240);
  --line-2:    oklch(0.88 0.006 240);
  --line-3:    oklch(0.78 0.008 240);

  /* Accent — muted forest green */
  --accent:        oklch(0.52 0.08 155);
  --accent-hover:  oklch(0.46 0.09 155);
  --accent-soft:   oklch(0.95 0.03 155);
  --accent-ink:    oklch(0.34 0.07 155);

  /* Status */
  --warn:      oklch(0.74 0.13 70);
  --warn-soft: oklch(0.96 0.04 70);
  --danger:    oklch(0.60 0.18 25);
  --danger-soft: oklch(0.96 0.04 25);
  --ok:        var(--accent);
  --ok-soft:   var(--accent-soft);
  --info:      oklch(0.58 0.10 250);
  --info-soft: oklch(0.96 0.03 250);

  /* Type */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shape */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 0 rgba(15,17,21,0.04), 0 1px 2px rgba(15,17,21,0.04);
  --shadow-md: 0 1px 0 rgba(15,17,21,0.04), 0 4px 12px -2px rgba(15,17,21,0.08);
  --shadow-lg: 0 1px 0 rgba(15,17,21,0.05), 0 12px 32px -4px rgba(15,17,21,0.12);
  --shadow-xl: 0 24px 60px -12px rgba(15,17,21,0.18), 0 8px 20px -8px rgba(15,17,21,0.12);
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv01', 'cv11';
  min-width: 1200px;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; border: 0; background: transparent; padding: 0; }

input, textarea {
  background: transparent;
  border: 0;
  outline: none;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* ───────── utility text ───────── */
.h-display { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 600; }
.h-1 { font-size: 26px; line-height: 1.18; letter-spacing: -0.014em; font-weight: 600; }
.h-2 { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }
.h-3 { font-size: 16px; line-height: 1.3;  letter-spacing: -0.005em; font-weight: 600; }
.body  { font-size: 14px; line-height: 1.5; }
.small { font-size: 13px; line-height: 1.45; }
.tiny  { font-size: 12px; line-height: 1.4; }
.micro { font-size: 11px; line-height: 1.3; letter-spacing: 0.02em; }
.mono  { font-family: var(--font-mono); }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.bold  { font-weight: 600; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ───────── layout helpers ───────── */
.row { display: flex; flex-direction: row; }
.col { display: flex; flex-direction: column; }
.middle { align-items: center; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.grow { flex: 1; min-width: 0; min-height: 0; }
.wrap { flex-wrap: wrap; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }

/* ───────── pill / chip ───────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.pill.accent   { background: var(--accent-soft); color: var(--accent-ink); }
.pill.warn     { background: var(--warn-soft);   color: oklch(0.42 0.13 70); }
.pill.danger   { background: var(--danger-soft); color: oklch(0.42 0.17 25); }
.pill.info     { background: var(--info-soft);   color: oklch(0.36 0.09 250); }
.pill.solid    { background: var(--ink); color: white; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dot.green { background: var(--accent); }
.dot.amber { background: var(--warn); }
.dot.red   { background: var(--danger); }
.dot.gray  { background: var(--ink-faint); }

/* ───────── button ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border-radius: var(--r-2);
  font-size: 13.5px; font-weight: 500;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-2);
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); border-color: var(--line-3); }
.btn:active { transform: translateY(0.5px); }

.btn.primary {
  background: var(--ink); color: white; border-color: var(--ink);
}
.btn.primary:hover { background: oklch(0.28 0.015 240); border-color: oklch(0.28 0.015 240); }

.btn.accent {
  background: var(--accent); color: white; border-color: var(--accent);
}
.btn.accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn.ghost  { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn.subtle { background: var(--surface-2); border-color: transparent; }
.btn.subtle:hover { background: var(--surface-3); }

.btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; gap: 4px; border-radius: 7px; }
.btn.lg { height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: var(--r-3); }
.btn.block { width: 100%; }
.btn.icon  { width: 30px; padding: 0; }
.btn.icon.sm  { width: 26px; }
.btn.icon.lg  { width: 40px; }

/* ───────── form inputs ───────── */
.input, .textarea {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 9px 12px;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px oklch(0.92 0.004 240); }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.textarea { resize: vertical; min-height: 80px; line-height: 1.45; }
.input.ok { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.field-label { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.field-label .req { color: var(--danger); font-weight: 600; }
.field-label .opt { color: var(--ink-faint); font-weight: 400; }
.field-hint { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }
.field { margin-bottom: 14px; }

.check, .radio {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1.5px solid var(--line-3); background: var(--surface);
  border-radius: 5px;
  flex-shrink: 0;
}
.radio { border-radius: 50%; }
.check.on, .radio.on {
  background: var(--accent); border-color: var(--accent);
}
.check.on::after {
  content: ''; width: 9px; height: 5px;
  border-left: 2px solid white; border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px,-1px);
}
.radio.on::after {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: white;
}

.switch {
  position: relative; width: 36px; height: 22px; border-radius: 999px;
  background: var(--line-2); transition: background .15s ease;
  flex-shrink: 0;
}
.switch::after {
  content: ''; position: absolute;
  width: 16px; height: 16px; border-radius: 50%; background: white;
  top: 3px; left: 3px; transition: left .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.switch.on { background: var(--accent); }
.switch.on::after { left: 17px; }

/* ───────── card ───────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.card.flat   { border-radius: var(--r-2); }
.card.padded { padding: 16px; }
.card.tint   { background: var(--surface-2); }
.card.outline-accent { border-color: var(--accent); background: var(--accent-soft); }

.divider { height: 1px; background: var(--line); margin: 16px 0; }
.divider.dashed { background: transparent; border-top: 1px dashed var(--line-2); height: 0; }

/* ───────── frames: iphone ───────── */
.iphone {
  width: 390px; height: 800px;
  background: #1a1a1f;
  border-radius: 48px;
  padding: 12px;
  position: relative;
  box-shadow:
    0 0 0 1px #0c0c10 inset,
    0 0 0 2px #2a2a30,
    0 30px 60px -20px rgba(15,17,21,0.35),
    0 12px 20px -8px rgba(15,17,21,0.15);
  flex-shrink: 0;
}
.iphone-screen {
  width: 100%; height: 100%;
  background: var(--surface);
  border-radius: 38px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.iphone-notch {
  position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 32px; background: #0a0a0d;
  border-radius: 20px; z-index: 10;
}
.iphone-statusbar {
  height: 50px; flex-shrink: 0;
  padding: 18px 32px 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.iphone-statusbar .icons { display: flex; gap: 6px; align-items: center; }
.iphone-home {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 134px; height: 5px; background: var(--ink); border-radius: 999px; opacity: 0.7;
}
.iphone-content {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}

/* ───────── frames: browser ───────── */
.browser {
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow:
    0 24px 60px -20px rgba(15,17,21,0.22),
    0 8px 16px -8px rgba(15,17,21,0.10);
  display: flex; flex-direction: column;
}
.browser-chrome {
  height: 40px; flex-shrink: 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px;
}
.browser-dots { display: flex; gap: 6px; }
.browser-dots span {
  width: 11px; height: 11px; border-radius: 50%; background: var(--line-2);
}
.browser-dots span:nth-child(1) { background: #ed6a5e; }
.browser-dots span:nth-child(2) { background: #f4be4f; }
.browser-dots span:nth-child(3) { background: #61c554; }
.browser-url {
  flex: 1; height: 24px; max-width: 520px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft);
}
.browser-body { flex: 1; min-height: 0; background: var(--bg); overflow: hidden; display: flex; }

/* ───────── kbd ───────── */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--surface); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-soft);
}

/* ───────── avatar ───────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: oklch(0.92 0.02 155);
  color: var(--accent-ink);
  border-radius: 50%;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10.5px; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }

/* ───────── progress bar ───────── */
.progress {
  height: 4px; width: 100%;
  background: var(--line); border-radius: 999px; overflow: hidden;
}
.progress > div { height: 100%; background: var(--accent); border-radius: inherit; transition: width .25s ease; }

/* ───────── animations ───────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.fade-up { animation: fadeUp .26s ease-out both; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 oklch(0.52 0.08 155 / 0.35); }
  70% { box-shadow: 0 0 0 14px oklch(0.52 0.08 155 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.52 0.08 155 / 0); }
}
.pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }

/* Hide-on-print convenience */
.no-scroll { overflow: hidden; }
.scroll-y  { overflow-y: auto; overflow-x: hidden; }

/* Ensure inputs in static demo look right but not editable-y */
.static input, .static textarea { pointer-events: none; }