/* HowardAI Brand Identity v2 (2026-09-08), matched to howardai.us and support.howardai.us.
   Text is only ever Ink or Gray. Thunder and Washed are surfaces only, never text.
   Yellow appears in the logo files only: the wordmark's "AI" and the mark. Never in CSS. */
:root {
  /* Text */
  --ink: #1C1C1C;          /* headlines, body, icons */
  --gray: #5C5C5A;         /* secondary text */
  --gray-muted: #6E6D69;   /* captions, placeholders (4.58:1 on Washed pale) */

  /* Surfaces */
  --page: #F2F1ED;         /* Washed pale: default page ground */
  --panel: #E9E7E0;        /* surface tint: panels one step down from the page */
  --panel-pressed: #DCD9D1;
  --card: #FFFFFF;         /* inputs, cards, modals sitting on the page */
  --thunder: #23272E;      /* dark surfaces: toasts, avatar, camera */
  --thunder-light: #99A2AC;

  /* Lines */
  --line: #D8D6D0;         /* component borders */
  --line-hover: #A79C8A;   /* Washed mid */
  --hairline: #DCD9D1;     /* rules and dividers */

  /* Action (semantic Info blue, repurposed as the primary action) */
  --action: #3E6E8C;
  --action-hover: #35607B;
  --action-active: #2E5468;
  --ring: rgba(62, 110, 140, 0.18);

  /* Functional colors: status, validation, feedback. Never decoration, never brand.
     Bright for icons, meters, and borders; the -text variants pass 4.5:1 for small text. */
  --ok: #34C759;
  --ok-text: #248A3D;
  --ok-tint: rgba(52, 199, 89, 0.14);
  --warn: #FF9F0A;
  --warn-text: #C93400;
  --warn-tint: rgba(255, 159, 10, 0.14);
  --caution: #FFCC00;
  --err: #FF3B30;
  --err-hover: #FF453A;
  --err-pressed: #D70015;
  --err-text: #D70015;
  --err-tint: rgba(255, 59, 48, 0.10);
  --info: #3E6E8C;
  --info-tint: rgba(62, 110, 140, 0.12);

  --scrim: rgba(28, 28, 28, 0.45);

  /* Spacing (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Elevation */
  --e1: 0 1px 3px rgba(28, 28, 28, 0.06);
  --e2: 0 4px 24px rgba(0, 0, 0, 0.08);
  --e3: 0 24px 64px rgba(0, 0, 0, 0.16);

  /* Motion: one easing curve everywhere, as on howardai.us */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --d-instant: 100ms;
  --d-micro: 150ms;
  --d-short: 250ms;
  --d-medium: 350ms;
  --d-long: 500ms;

  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sidebar-w: 288px;
}