/*
 * Dreamhouse design system — CSS custom properties + component utilities.
 * These complement the Tailwind theme and are used via inline styles / custom classes.
 */

/* ─── Design tokens ─── */
:root {
  --red-50:  #fff1ef; --red-100: #ffddd8; --red-200: #ffb8ad; --red-300: #ff8d7c;
  --red-400: #ff634d; --red-500: #f53830; --red-600: #d82824; --red-700: #b01d1c;
  --red-800: #861818; --red-900: #5e1213;

  --yellow-50: #fffbe6; --yellow-100: #fff3b8; --yellow-200: #ffe880; --yellow-300: #ffd94d;
  --yellow-400: #ffcc20; --yellow-500: #ffd13d; --yellow-600: #e0b30f; --yellow-700: #b48a08;
  --yellow-800: #836408; --yellow-900: #533f07;

  --blue-50: #ecf3ff; --blue-100: #d0e1ff; --blue-200: #a6c4ff; --blue-300: #75a2ff;
  --blue-400: #4782fb; --blue-500: #2979ff; --blue-600: #1a5fe0; --blue-700: #1049b0;
  --blue-800: #0c3680; --blue-900: #082655;

  --cream: #fff7ec;
  --neutral-50: #fff7ec; --neutral-100: #faf2e4; --neutral-200: #eae7e1; --neutral-300: #d8d5cf;
  --neutral-400: #bdbdbd; --neutral-500: #9a9792; --neutral-600: #6e6b66; --neutral-700: #45423e;
  --neutral-800: #2a2825; --neutral-900: #111111;

  --success-50: #e8f8ee; --success-500: #2fb765; --success-700: #1a7a41;
  --warning-50: #fff4e0; --warning-500: #ff9a1a; --warning-700: #b3640a;

  --surface-base:    #fff7ec;
  --surface-raised:  #ffffff;
  --surface-sunken:  #faf2e4;
  --surface-inverse: #111111;

  --text-primary:   #111111;
  --text-secondary: #45423e;
  --text-tertiary:  #6e6b66;
  --text-disabled:  #bdbdbd;
  --text-inverse:   #fff7ec;

  --border-subtle:  #eae7e1;
  --border-default: #d8d5cf;
  --border-strong:  #45423e;
  --border-focus:   #2979ff;

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 16px;
  --radius-lg: 24px; --radius-xl: 32px; --radius-full: 999px;

  --font-display: 'Funnel Display', 'Poppins', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-xs: 0 1px 2px rgba(69,50,30,.06);
  --shadow-sm: 0 2px 6px rgba(69,50,30,.08);
  --shadow-md: 0 6px 16px rgba(69,50,30,.10);
  --shadow-lg: 0 14px 32px rgba(69,50,30,.14);
}

/* ─── Typography ─── */
.t-display { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.05; letter-spacing: -.02em; }
.t-h1      { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1;  letter-spacing: -.015em; }
.t-h2      { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -.01em; }
.t-h3      { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2;  letter-spacing: -.005em; }
.t-h4      { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; }
.t-body-lg { font-family: var(--font-body);    font-weight: 500; font-size: 18px; line-height: 1.5; }
.t-body    { font-family: var(--font-body);    font-weight: 500; font-size: 16px; line-height: 1.5; }
.t-body-sm { font-family: var(--font-body);    font-weight: 500; font-size: 14px; line-height: 1.5; }
.t-caption { font-family: var(--font-body);    font-weight: 500; font-size: 12px; line-height: 1.4; }
.t-overline{ font-family: var(--font-body);    font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; }
.t-label   { font-family: var(--font-body);    font-weight: 700; font-size: 13px; line-height: 1.2; }

/* ─── Status pill ─── */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
}
.status-pill-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.status-online  { background: var(--success-50);  color: var(--success-700); }
.status-stale   { background: var(--warning-50);  color: var(--warning-700); }
.status-offline { background: var(--neutral-100); color: var(--neutral-700); }
.status-error   { background: var(--red-50);      color: var(--red-700); }
.status-active  { background: var(--success-50);  color: var(--success-700); }
.status-stopped { background: var(--neutral-100); color: var(--neutral-700); }

/* ─── Dreamhouse card ─── */
.dh-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

/* ─── Bubble button ─── */
.btn-bubble {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 10px; border-radius: 16px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .02em; border: none; cursor: pointer;
  text-decoration: none; transition: opacity .1s;
}
.btn-bubble:active { opacity: .85; transform: translateY(1px); }
.btn-bubble-blue   { background: var(--blue-500);    color: #fff;                 box-shadow: 0 3px 0 var(--blue-700); }
.btn-bubble-red    { background: var(--red-500);     color: #fff;                 box-shadow: 0 3px 0 var(--red-700); }
.btn-bubble-yellow { background: var(--yellow-500);  color: var(--neutral-900);   box-shadow: 0 3px 0 var(--yellow-700); }
.btn-bubble-dark   { background: var(--neutral-900); color: var(--cream);         box-shadow: 0 3px 0 #000; }
.btn-bubble-light  {
  background: var(--surface-raised); color: var(--neutral-900);
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--border-subtle);
}

/* ─── Toggle ─── */
.dh-toggle {
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--neutral-200); position: relative; flex-shrink: 0;
  display: inline-block; transition: background .15s;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.dh-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: left .15s;
}
.dh-toggle:checked { background: var(--yellow-500); }
.dh-toggle:checked::after { left: 21px; }

/* ─── VestaBoard text area ─── */
.vesta-textarea {
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.4;
  background: var(--surface-sunken);
  border: 1.5px solid var(--border-default);
  border-radius: 10px; padding: 12px 14px;
  color: var(--text-primary);
  text-transform: uppercase;
  resize: vertical; width: 100%;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.vesta-textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(41,121,255,.12);
}

/* ─── VestaBoard rich editor (contenteditable) ─── */
.vesta-editor {
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1.5;
  background: var(--surface-sunken);
  border: 1.5px solid var(--border-default);
  border-radius: 10px; padding: 12px 14px;
  color: var(--text-primary);
  text-transform: uppercase;
  width: 100%;
  outline: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
  cursor: text;
}
.vesta-editor:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(41,121,255,.12);
}
.vesta-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-tertiary);
  pointer-events: none;
  text-transform: none;
}

.vesta-token {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.15em;
  border-radius: 2px;
  margin: 0 1px;
  user-select: all;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}
.vesta-token-red    { background: #d0312d; }
.vesta-token-orange { background: #ff7b00; }
.vesta-token-yellow { background: #f5c518; }
.vesta-token-green  { background: #3cb043; }
.vesta-token-blue   { background: #1f51ff; }
.vesta-token-violet { background: #7f00ff; }
.vesta-token-white  { background: #e8e8e8; }
.vesta-token-black  { background: #1a1a1a; }
.vesta-token-filled { background: #555555; }

/* ─── Chip ─── */
.dh-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: .04em;
}
.chip-red    { background: var(--red-50);    color: var(--red-700);    }
.chip-blue   { background: var(--blue-50);   color: var(--blue-700);   }
.chip-yellow { background: var(--yellow-50); color: var(--yellow-700); }
.chip-dark   { background: var(--neutral-900); color: var(--cream);    }
.chip-neutral{ background: var(--neutral-100); color: var(--neutral-700); }

/* ─── Page layout ─── */
.dh-page { max-width: 680px; margin: 0 auto; padding: 0 16px; }

/* ─── Topbar ─── */
.dh-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0 12px;
}
.dh-topbar-back {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface-raised); border: 1.5px solid var(--border-subtle);
  box-shadow: var(--shadow-xs); display: flex; align-items: center; justify-content: center;
  color: var(--neutral-900); text-decoration: none; flex-shrink: 0;
}
.dh-topbar-back:hover { background: var(--neutral-100); }

/* ─── Field label ─── */
.dh-field-label {
  font-family: var(--font-body); font-weight: 800;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-secondary); margin-bottom: 8px; display: block;
}

/* ─── Podium mark (logo) ─── */
.podium-mark {
  background: var(--neutral-900); border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ─── Flash messages ─── */
.flash-notice {
  background: var(--success-50); color: var(--success-700);
  border-bottom: 1.5px solid #b7e8c8;
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  font-family: var(--font-body);
}
.flash-alert {
  background: var(--red-50); color: var(--red-700);
  border-bottom: 1.5px solid var(--red-200);
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  font-family: var(--font-body);
}

/* ─── VestaGrid (fluid, full width of container) ─── */
.vesta-grid-wrap {
  background: #0b0b0c;
  border-radius: 10px;
  border: 1.5px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.25);
  display: block;
  width: 100%;
  padding: clamp(4px, 0.8cqw, 8px);
  container-type: inline-size;
  box-sizing: border-box;
}
.vesta-grid {
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: clamp(1px, 0.5cqw, 3px);
  width: 100%;
  aspect-ratio: 240 / 82;
}
.vesta-tile {
  background: #141418;
  border-radius: clamp(1px, 0.4cqw, 3px);
  border: 0.5px solid rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 3.6cqw;
  color: #fff7ec;
  text-transform: uppercase;
  line-height: 1;
}
.vesta-tile-red    { background: #d8352e; }
.vesta-tile-orange { background: #e86a20; }
.vesta-tile-yellow { background: #e6b91f; }
.vesta-tile-green  { background: #2fa35a; }
.vesta-tile-blue   { background: #2470c4; }
.vesta-tile-violet { background: #7a4dbf; }
.vesta-tile-white  { background: #efece3; }
.vesta-tile-black  { background: #0b0b0c; }
.vesta-tile-filled { background: #fff7ec; }