/* ────────────────────────────────────────────────────────────────────────────
   CounselAI — Colors & Type
   Source of truth for color and typography in this brand.
   Mirrors projects/design-preview/src/styles/theme.css + guidelines/design.md.
   ──────────────────────────────────────────────────────────────────────────── */

/* Webfonts — Manrope (sans), Source Serif 4 (display), Hanken Grotesk (alt sans) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────────────────── */
  --brand-black: #0B1120;       /* primary text, primary actions, dark nav */
  --brand-white: #FFFFFF;
  --brand-blue: #2A3F5F;        /* secondary brand accent */
  --brand-emerald: #10B981;     /* live indicators, "Done" */

  /* ── Surfaces ──────────────────────────────────────────────── */
  --bg: #FFFFFF;                /* page */
  --bg-muted: #F4F6F8;          /* inputs, hover, subtle surface */
  --bg-card: #FFFFFF;
  --bg-overlay: #FFFFFF;
  --bg-dark-nav: #0B1120;       /* fixed top navigator */

  /* ── Foreground / text ─────────────────────────────────────── */
  --fg: #0B1120;                /* primary text */
  --fg-muted: #8A9AB0;          /* secondary text, placeholders, metadata */
  --fg-subtle: #A3A3A3;         /* neutral-400 — timestamps */
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-muted: rgba(255,255,255,0.50);

  /* ── Borders ───────────────────────────────────────────────── */
  --border: #DDE3EA;            /* every border, divider, input */
  --border-strong: rgba(11,17,32,0.10);

  /* ── Semantic / status (5 levels — never invent more) ──────── */
  --status-critical-fg: #DC2626; /* red-600 */
  --status-critical-bg: #FEF2F2; /* red-50 */
  --status-critical-border: #FECACA; /* red-200 */

  --status-high-fg: #D97706;    /* amber-600 */
  --status-high-bg: #FFFBEB;    /* amber-50 */
  --status-high-border: #FDE68A; /* amber-200 */

  --status-standard-fg: #2563EB; /* blue-600 */
  --status-standard-bg: #EFF6FF; /* blue-50 */
  --status-standard-border: #BFDBFE; /* blue-200 */

  --status-low-fg: #059669;     /* emerald-600 */
  --status-low-bg: #ECFDF5;     /* emerald-50 */
  --status-low-border: #A7F3D0; /* emerald-200 */

  --status-neutral-fg: #A3A3A3; /* neutral-400 */
  --status-neutral-bg: #F5F5F5; /* neutral-100 */

  --destructive: #C0392B;
  --destructive-fg: #FFFFFF;

  /* ── Org-swappable slots (per-tenant theme override hooks) ── */
  --slot-primary: var(--brand-black);
  --slot-accent: #86EFAC;       /* mint-300, default org accent */
  --slot-surface: #FAF9F7;
  --slot-surface-ai: #F5F5F4;

  /* ── Shadows / elevation ──────────────────────────────────── */
  --shadow-card: 0 10px 40px -10px rgba(0,0,0,0.03);
  --shadow-card-hover: 0 20px 60px -15px rgba(0,0,0,0.06);
  --shadow-overlay: 0 30px 60px rgba(0,0,0,0.08);
  --shadow-button: 0 1px 2px rgba(11,17,32,0.10);

  /* ── Radius ───────────────────────────────────────────────── */
  --radius: 0.5rem;
  --radius-sm: 4px;             /* tags, micro badges */
  --radius-md: 6px;             /* buttons, inputs */
  --radius-lg: 8px;             /* cards, panels */
  --radius-xl: 12px;            /* large cards, modals */
  --radius-2xl: 16px;           /* command palette, hero inputs */
  --radius-full: 9999px;

  /* ── Typography — families ────────────────────────────────── */
  --font-sans: 'Manrope', 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Typography — base ────────────────────────────────────── */
  --font-size: 14px;            /* base */
  --line-height: 1.5;
  --letter-spacing: -0.3px;     /* tighten by default */

  /* ── Type scale (semantic tokens) ─────────────────────────── */
  --size-hero: 48px;            /* 2.75–3rem hero */
  --size-display: 32px;         /* page section */
  --size-heading: 20px;         /* card group / h2 */
  --size-subheading: 16px;      /* h3 */
  --size-content: 14px;         /* body */
  --size-ui: 13px;              /* buttons, dense UI */
  --size-meta: 12px;            /* timestamps */
  --size-caption: 10px;         /* metadata */
  --size-micro: 9px;            /* uppercase tracked label */

  --weight-display: 800;        /* extrabold for hero serif */
  --weight-heading: 700;        /* bold */
  --weight-ui: 700;             /* dense UI labels are bold */
  --weight-body: 500;           /* body copy is medium */
  --weight-micro: 800;          /* micro labels are extrabold */

  --tracking-tight: -0.02em;
  --tracking-micro: 0.2em;      /* the signature uppercase track */
  --tracking-widest: 0.15em;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-counsel: cubic-bezier(0.23, 1, 0.32, 1); /* fast out, natural settle */
  --dur-micro: 150ms;
  --dur-transition: 250ms;
  --dur-reveal: 400ms;
}

/* ────────────────────────────────────────────────────────────────────────────
   Semantic element styles — drop-in defaults
   ──────────────────────────────────────────────────────────────────────────── */

html { font-size: 14px; }

body {
  font-family: var(--font-sans);
  font-size: var(--size-content);
  font-weight: var(--weight-body);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { letter-spacing: -0.3px; }

/* Hero / display — the signature serif moment */
.serif-text,
.h-hero {
  font-family: var(--font-serif);
  font-size: var(--size-hero);
  font-weight: var(--weight-display);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--size-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--size-heading);
  font-weight: var(--weight-heading);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--size-subheading);
  font-weight: var(--weight-heading);
  line-height: 1.4;
  color: var(--fg);
}

h4, .h4 {
  font-size: var(--size-ui);
  font-weight: var(--weight-heading);
  line-height: 1.4;
  color: var(--fg);
}

p, .body, .text-narrative {
  font-size: var(--size-content);
  font-weight: var(--weight-body);
  line-height: 1.6;
  color: var(--fg);
}

.text-muted { color: var(--fg-muted); }
.text-subtle { color: var(--fg-subtle); }

/* The signature CounselAI micro label — 9px, extrabold, uppercase, 0.2em track */
.micro-label {
  font-family: var(--font-sans);
  font-size: var(--size-micro);
  font-weight: var(--weight-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  color: var(--fg-subtle);
  line-height: 1;
}

.metadata {
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-subtle);
}

/* Status chip pattern (use one of five levels) */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--size-micro);
  font-weight: var(--weight-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-micro);
  border: 1px solid transparent;
  line-height: 1.4;
}
.status-chip.critical { color: var(--status-critical-fg); background: var(--status-critical-bg); border-color: var(--status-critical-border); }
.status-chip.high     { color: var(--status-high-fg);     background: var(--status-high-bg);     border-color: var(--status-high-border); }
.status-chip.standard { color: var(--status-standard-fg); background: var(--status-standard-bg); border-color: var(--status-standard-border); }
.status-chip.low      { color: var(--status-low-fg);      background: var(--status-low-bg);      border-color: var(--status-low-border); }
.status-chip.neutral  { color: var(--status-neutral-fg);  background: var(--status-neutral-bg); }

.status-dot { width: 6px; height: 6px; border-radius: 9999px; display: inline-block; }
.status-dot.critical { background: var(--status-critical-fg); }
.status-dot.high     { background: var(--status-high-fg); }
.status-dot.standard { background: var(--status-standard-fg); }
.status-dot.low      { background: var(--status-low-fg); }
.status-dot.neutral  { background: var(--status-neutral-fg); }

/* Card surfaces */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
.card:hover { box-shadow: var(--shadow-card-hover); }

/* Inputs (bg-muted, never white — keeps them distinct from card surface) */
.input {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--size-ui);
  padding: 10px 14px;
  color: var(--fg);
}
.input::placeholder { color: var(--fg-muted); }
.input:focus { outline: none; border-color: var(--brand-black); }