/* ============================================================
   Company OS — Design Tokens
   Source of truth: company-os V1/src/features/company-os/company-os.css
   ============================================================ */

/* Inter as a substitute for Segoe UI (codebase preference).
   Drop a Segoe UI .woff2 in /fonts and add to this @font-face
   stack to match the codebase exactly. */
@font-face {
  font-family: "InterSubst";
  src: url("./fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterSubst";
  src: url("./fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterSubst";
  src: url("./fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterSubst";
  src: url("./fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ----- BASE COLORS ----- */
  --bg:           #0f0f10; /* page background */
  --surface:      #191918; /* topbar, panel base */
  --surface-2:    #222220; /* panels with content */
  --surface-3:    #2c2c29; /* inputs, raised chrome */
  --line:         #383835; /* universal divider */
  --line-strong:  #575750; /* emphasis divider */
  --board-bg:     #20201f; /* board canvas */

  /* ----- TEXT ----- */
  --text:    #f3f3ee; /* primary */
  --muted:   #a7a79e; /* secondary */
  --muted-2: #7f786a; /* tertiary, footnotes */

  /* ----- 5S SIGNAL COLORS ----- */
  --blue:   #4aa3ff; /* strategy / growth / pipeline */
  --green:  #3ed277; /* healthy / done / active */
  --amber:  #ffb340; /* admin / cost / due / infra */
  --pink:   #ff6577; /* risk / blocked / overdue */
  --violet: #b4a6ff; /* knowledge / SOPs / playbooks */
  --lime:   #b6ec50; /* worker momentum / secondary tag */

  /* Soft fills (for pills, card backgrounds) */
  --blue-soft:   rgba(74, 163, 255, 0.14);
  --green-soft:  rgba(62, 210, 119, 0.14);
  --amber-soft:  rgba(255, 179, 64, 0.14);
  --pink-soft:   rgba(255, 101, 119, 0.14);
  --violet-soft: rgba(180, 166, 255, 0.14);
  --lime-soft:   rgba(182, 236, 80, 0.14);

  /* Soft text colors (legible on soft fills) */
  --blue-text:   #b9ddff;
  --green-text:  #b8ffc9;
  --amber-text:  #ffd992;
  --pink-text:   #ffadb6;
  --violet-text: #d6c9ff;

  /* ----- DEPARTMENT ACCENTS (left bar on cards) ----- */
  --dept-leadership:  #4aa3ff;
  --dept-engineering: #3ed277;
  --dept-revenue:     #ffb02e;
  --dept-operations:  #b9a7ff;
  --dept-hr:          #ff6680;
  --dept-unassigned:  #8a8a82;

  /* ----- RADII ----- */
  --radius:    6px; /* cards, panels — never larger */
  --radius-sm: 4px; /* inputs, small chips */
  --radius-pill: 999px; /* signal pills only */

  /* ----- SHADOWS ----- */
  --shadow:      0 14px 35px rgba(0, 0, 0, 0.36); /* board cards */
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.22); /* raised tickets */

  /* ----- LAYOUT ----- */
  --rail-width: 34px;
  --topbar-min-height: 106px;
  --container-max: 1240px;

  /* ----- TYPE STACK ----- */
  --font-ui: "InterSubst", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================
   Type primitives
   ============================================================ */

html, body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.t-h1 {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 650;
  margin: 0;
}

.t-h2 {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
}

.t-h3 {
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  margin: 0;
}

/* Card title */
.t-card-title {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 750;
  color: var(--text);
}

/* Card subline / ID · Type */
.t-card-meta {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
}

/* Body */
.t-body {
  font-size: 13px;
  line-height: 1.6;
}

/* UI label (button, tab, pill text) */
.t-ui {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

/* Small meta */
.t-meta {
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

/* Cockpit metric (Runway numbers, KPI hero) */
.t-metric {
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}

/* Classic widget metric (large, display) */
.t-metric-display {
  font-size: 58px;
  line-height: 1;
  font-weight: 250;
}

/* Public-facing display (PRD-spec website) */
.t-display-1 { font-size: 56px; line-height: 1.02; font-weight: 760; letter-spacing: -0.005em; }
.t-display-2 { font-size: 34px; line-height: 1.12; font-weight: 720; }

/* ============================================================
   Marketing surface overrides
   For the public website — slightly looser type scale.
   ============================================================ */

.surface-marketing .t-h1 { font-size: 56px; line-height: 1.02; font-weight: 760; }
.surface-marketing .t-h2 { font-size: 34px; line-height: 1.12; font-weight: 720; }
.surface-marketing .t-h3 { font-size: 20px; line-height: 1.25; font-weight: 700; }
.surface-marketing .t-body { font-size: 15px; line-height: 1.6; }