/*
 * tokens.css — Homebase design system tokens
 *
 * Single source of truth for color, type, space, radii, shadows.
 * Every component references these. No hardcoded values anywhere.
 *
 * Aesthetic: Linear-inspired. Light mode. Crisp, product-grade,
 * thin borders, tight typography, zero decorative fluff.
 */

:root {
  /* ── Color: surfaces ── */
  --bg-canvas:       #FAFAFA;   /* page background */
  --bg-surface:      #FFFFFF;   /* cards, panels */
  --bg-muted:        #F4F4F5;   /* row hover, subtle fills */
  --bg-inset:        #F9FAFB;   /* nested surfaces (kbd, code) */
  --bg-overlay:      rgba(10, 10, 10, 0.32); /* modal backdrop */

  /* ── Color: ink ── */
  --ink-primary:     #0A0A0A;   /* body text (not pure black) */
  --ink-secondary:   #52525B;   /* labels, metadata */
  --ink-tertiary:    #A1A1AA;   /* placeholder, timestamps */
  --ink-disabled:    #D4D4D8;

  /* ── Color: borders ── */
  --border-hair:     #E4E4E7;   /* default hairline */
  --border-line:     #D4D4D8;   /* emphasized border */
  --border-inset:    #F1F1F4;   /* very subtle divider inside cards */
  --border-focus:    #6366F1;   /* focus ring base */

  /* ── Color: accent (sparingly) ── */
  --accent-500:      #6366F1;   /* primary accent */
  --accent-600:      #4F46E5;   /* hover, active CTA */
  --accent-700:      #4338CA;   /* pressed */
  --accent-fg:       #FFFFFF;   /* text on accent bg */
  --accent-soft:     #EEF2FF;   /* selected row, focus ring bg */
  --accent-soft-hover:#E0E7FF;

  /* ── Color: status ── */
  --status-ok:       #16A34A;
  --status-ok-bg:    #F0FDF4;
  --status-warn:     #CA8A04;
  --status-warn-bg:  #FEFCE8;
  --status-risk:     #EA580C;
  --status-risk-bg:  #FFF7ED;
  --status-crit:     #DC2626;
  --status-crit-bg:  #FEF2F2;
  --status-info:     #0891B2;
  --status-info-bg:  #ECFEFF;
  --status-muted:    #71717A;
  --status-muted-bg: #FAFAFA;

  /* ── Typography: families ── */
  --font-ui:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* ── Typography: sizes + line heights ── */
  --fs-xs:           11px;
  --lh-xs:           16px;
  --fs-sm:           13px;
  --lh-sm:           18px;
  --fs-md:           14px;
  --lh-md:           20px;
  --fs-lg:           16px;
  --lh-lg:           24px;
  --fs-h3:           18px;
  --lh-h3:           24px;
  --fs-h2:           22px;
  --lh-h2:           28px;
  --fs-h1:           28px;
  --lh-h1:           32px;
  --fs-num:          32px;    /* hero KPI mono */
  --lh-num:          36px;

  /* ── Typography: weights (Inter variable) ── */
  --fw-normal:       450;
  --fw-medium:       550;
  --fw-bold:         650;

  /* ── Typography: tracking ── */
  --tracking-tight:  -0.02em;  /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* small caps labels */

  /* ── Space: 4px base scale ── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;

  /* ── Radius ── */
  --r-sm:  4px;    /* chips, badges, kbd */
  --r-md:  6px;    /* buttons, inputs */
  --r-lg:  8px;    /* cards, panels */
  --r-xl:  12px;   /* modals, command palette (cap) */
  --r-full: 9999px;

  /* ── Shadow: one token, used sparingly ── */
  --shadow-pop:      0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-flat:     0 1px 0 rgba(0, 0, 0, 0.02);

  /* ── Layout ── */
  --sidebar-w:           240px;
  --sidebar-w-collapsed: 56px;
  --topbar-h:            48px;
  --max-content:         1440px;

  /* ── Motion ── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-normal: 180ms;
}

/* ── Inter, self-hosted-via-CDN for now ── */
@import url("https://rsms.me/inter/inter.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");

@supports (font-variation-settings: normal) {
  :root { --font-ui: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
}

/* ── Global reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  font-weight: var(--fw-normal);
  color: var(--ink-primary);
  background: var(--bg-canvas);
  min-height: 100vh;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-primary);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

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

/* ── Utility classes ── */
.mono       { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.label      { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: var(--fw-medium);
              color: var(--ink-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.muted      { color: var(--ink-secondary); }
.tertiary   { color: var(--ink-tertiary); }
.truncate   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hidden     { display: none !important; }

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Kbd chip ── */
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-secondary);
  background: var(--bg-inset);
  border: 1px solid var(--border-hair);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-flat);
}