/*
 * Theme: JA — deep teal-blue brand (#1b5f73) with bright cyan-teal accent (#009fad).
 * Both blues come straight from the JA logo and work over white and black.
 * Surfaces stay mostly neutral; teal lives in the brand, focus ring, and accents.
 * Selectors use html:root / html.dark (specificity 0,1,1) to beat the bundle's
 * plain :root / .dark (0,1,0) regardless of stylesheet load order.
 * Override CSS custom properties from client/src/style.css here.
 * Replace this file via the dokploy volume mount in prod.
 */

html:root {
  /* surfaces — neutral slate with a whisper of teal on interactive states */
  --surface-primary: #ffffff;
  --surface-primary-alt: #f8fafc; /* slate-50 */
  --surface-primary-contrast: #f1f5f9; /* slate-100 */
  --surface-secondary: #f8fafc;
  --surface-secondary-alt: #f1f5f9;
  --surface-tertiary: #f1f5f9;
  --surface-tertiary-alt: #f8fafc;
  --surface-dialog: #ffffff;
  --surface-active: #cffafe; /* cyan-100 — gentle teal on active */
  --surface-active-alt: #a5f3fc; /* cyan-200 */
  --surface-hover: #ecfeff; /* cyan-50 — faint teal hover */
  --surface-hover-alt: #cffafe; /* cyan-100 */
  --surface-chat: #ffffff;

  /* presentation = chat canvas */
  --presentation: #ffffff;

  /* header */
  --header-primary: #ffffff;
  --header-hover: #ecfeff;
  --header-button-hover: #cffafe;

  /* text — deep teal primary, neutral slate for secondary/tertiary */
  --text-primary: #0c2e3a; /* deeper than brand, AA on tinted surfaces */
  --text-secondary: #334155; /* slate-700 */
  --text-secondary-alt: #475569; /* slate-600 */
  --text-tertiary: #64748b; /* slate-500 */

  /* borders — neutral slate, teal only on heaviest emphasis */
  --border-light: #e2e8f0; /* slate-200 */
  --border-medium: #cbd5e1; /* slate-300 */
  --border-medium-alt: #cbd5e1;
  --border-heavy: #94a3b8; /* slate-400 */
  --border-xheavy: #009fad; /* cyan-teal — strongest emphasis pops */

  /* focus ring = bright cyan-teal */
  --ring-primary: #009fad;

  /* base brand = deep teal-blue (AA-safe with white text) */
  --brand-primary: #1b5f73;
  --brand-primary-hover: #144a5b;
  --brand-border: #1b5f73;
  --brand-footer: #1b5f73;
  --brand-bg: #1b5f73;

  /* accent = deep teal so white labels hit AA */
  --surface-submit: #1b5f73;
  --surface-submit-hover: #144a5b;

  /* temporary chat (ephemeral indicator) — teal-tinted */
  --surface-chat-temp: rgba(0, 159, 173, 0.06);
  --border-chat-temp: rgba(0, 159, 173, 0.5);

  /* destructive (semantic — kept red by intent) */
  /* --surface-destructive: ...; --surface-destructive-hover: ...; */
  /* --text-destructive: ...; --border-destructive: ...; */
  /* --text-warning: ...; (amber) */
}

html.dark {
  /* surfaces — neutral zinc (no teal undertone, easy to read against) */
  --surface-primary: #18181b; /* zinc-900 */
  --surface-primary-alt: #09090b; /* zinc-950 */
  --surface-primary-contrast: #27272a; /* zinc-800 */
  --surface-secondary: #27272a;
  --surface-secondary-alt: #27272a;
  --surface-tertiary: #3f3f46; /* zinc-700 */
  --surface-tertiary-alt: #3f3f46;
  --surface-dialog: #27272a;
  --surface-active: #1b5f73; /* deep teal on active */
  --surface-active-alt: #144a5b;
  --surface-hover: #2a2a2d; /* between primary and tertiary — visible step */
  --surface-hover-alt: #3f3f46;
  --surface-chat: #18181b;

  /* presentation */
  --presentation: #18181b;

  /* header */
  --header-primary: #09090b;
  --header-hover: #27272a;
  --header-button-hover: #3f3f46;

  /* text */
  --text-primary: #fafafa; /* zinc-50 */
  --text-secondary: #d4d4d8; /* zinc-300 */
  --text-secondary-alt: #a1a1aa; /* zinc-400 */
  --text-tertiary: #a1a1aa;

  /* borders — neutral zinc */
  --border-light: #3f3f46;
  --border-medium: #52525b;
  --border-medium-alt: #52525b;
  --border-heavy: #71717a;
  --border-xheavy: #009fad; /* cyan-teal — strongest emphasis pops */

  /* focus ring = bright cyan-teal */
  --ring-primary: #009fad;

  /* base brand = bright cyan-teal (lifted for dark) */
  --brand-primary: #009fad;
  --brand-primary-hover: #1b5f73;
  --brand-border: #009fad;
  --brand-footer: #009fad;
  --brand-bg: #1b5f73;

  /* accent = deep teal so white labels hit AA */
  --surface-submit: #1b5f73;
  --surface-submit-hover: #144a5b;

  /* temporary chat — teal-tinted */
  --surface-chat-temp: rgba(0, 159, 173, 0.12);
  --border-chat-temp: rgba(0, 159, 173, 0.5);
}