@import "tailwindcss";

:root {
  /* Backgrounds */
  --hm-bg-base: #0f0f0f;
  --hm-bg-surface: #171717;
  --hm-bg-elevated: #1f1f1f;
  --hm-bg-overlay: #2a2a2a;

  /* Borders */
  --hm-border-subtle: #2a2a2a;
  --hm-border-default: #383838;
  --hm-border-strong: #505050;

  /* Text */
  --hm-text-primary: #f0f0f0;
  --hm-text-secondary: #a0a0a0;
  --hm-text-tertiary: #606060;
  --hm-text-disabled: #404040;

  /* Brand — Personal (teal) */
  --hm-personal: #1d9e75;
  --hm-personal-dim: #0f6e56;
  --hm-personal-bg: #0d2820;
  --hm-personal-ring: #1d9e7540;

  /* Brand — Workspace (purple) */
  --hm-workspace: #7f77dd;
  --hm-workspace-dim: #3c3489;
  --hm-workspace-bg: #1a1830;
  --hm-workspace-ring: #7f77dd40;

  /* Semantic states */
  --hm-warning: #ba7517;
  --hm-warning-bg: #2a1e0a;
  --hm-warning-border: #fac775;
  --hm-danger: #a32d2d;
  --hm-danger-bg: #220f0f;
  --hm-danger-border: #f09595;
  --hm-success: #1d9e75;
  --hm-pending: #ba7517;

  /* Monospace surfaces */
  --hm-mono-bg: #161616;
  --hm-mono-border: #2a2a2a;

  /* Typography */
  --hm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hm-font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "SF Mono", monospace;

  /* Type scale */
  --hm-text-xs: 10px;
  --hm-text-sm: 11px;
  --hm-text-base: 12px;
  --hm-text-md: 13px;
  --hm-text-lg: 14px;
  --hm-text-xl: 15px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #app {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  font-family: var(--hm-font-sans);
  font-size: var(--hm-text-base);
  color: var(--hm-text-primary);
  background: var(--hm-bg-base);
  -webkit-font-smoothing: antialiased;
}

.hm-shell {
  display: flex;
  height: 100vh;
  background: var(--hm-bg-base);
  overflow: hidden;
  min-width: 1100px;
}

/* Inputs */
.hm-input {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  font-family: var(--hm-font-sans);
  background: var(--hm-bg-elevated);
  border: 0.5px solid var(--hm-border-subtle);
  border-radius: 6px;
  color: var(--hm-text-primary);
  outline: none;
  width: 100%;
}

.hm-input:focus {
  border-color: var(--hm-border-default);
}

.hm-input::placeholder {
  color: var(--hm-text-tertiary);
}

/* Buttons */
.hm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 5px;
  cursor: pointer;
  border: 0.5px solid transparent;
  font-family: var(--hm-font-sans);
  font-size: 12px;
  height: 32px;
  padding: 0 14px;
  transition: background 0.1s;
  white-space: nowrap;
}

.hm-btn-sm {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-family: var(--hm-font-mono);
}

.hm-btn-primary {
  background: var(--hm-personal-bg);
  border-color: var(--hm-personal);
  color: var(--hm-personal);
}

.hm-btn-primary:hover {
  background: color-mix(in srgb, var(--hm-personal-bg) 70%, var(--hm-personal));
}

.hm-btn-default {
  background: transparent;
  border-color: var(--hm-border-subtle);
  color: var(--hm-text-secondary);
}

.hm-btn-default:hover {
  background: var(--hm-bg-elevated);
}

.hm-btn-danger {
  background: var(--hm-danger-bg);
  border-color: var(--hm-danger-border);
  color: var(--hm-danger);
}

.hm-btn-danger:hover {
  background: color-mix(in srgb, var(--hm-danger-bg) 70%, var(--hm-danger));
}

.hm-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--hm-text-secondary);
}

.hm-btn-ghost:hover {
  background: var(--hm-bg-elevated);
}

.hm-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Section labels */
.hm-label {
  font-size: var(--hm-text-xs);
  font-family: var(--hm-font-mono);
  color: var(--hm-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  display: block;
}

/* Scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hm-border-strong); border-radius: 2px; }

/* Skeleton shimmer */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.hm-skeleton {
  background: linear-gradient(
    90deg,
    var(--hm-bg-elevated) 25%,
    var(--hm-bg-overlay) 50%,
    var(--hm-bg-elevated) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
