/*
 * HealthCrew AI platform BrandKit tokens — single source of truth for UI colors.
 * Each product consumes these values through its own styling pipeline:
 *   - CrewSource (Vite/MUI): src/theme.tsx reads the same palette
 *   - CrewHire (Jinja/Tailwind): app/templates/layout.html declares matching --hc-* variables
 *   - CrewBazaar (Next.js/Tailwind): src/app/globals.css declares matching --md-sys-color-* variables
 * Update this file when the brand palette changes and regenerate product theme files to match.
 */

:root {
  --hc-brand-primary: #0B7A8E;
  --hc-brand-primary-dark: #054D5A;
  --hc-brand-primary-light: #5BC9E5;
  --hc-brand-secondary: #0B3D99;
  --hc-brand-secondary-light: #8EB4FF;
  --hc-brand-accent: #B83D1A;
  --hc-brand-accent-light: #FF9B7A;
  --hc-brand-success: #2E7D32;
  --hc-brand-warning: #B45309;
  --hc-brand-error: #E53935;

  --hc-surface-light: #FFFFFF;
  --hc-surface-container-light: #F5F9FC;
  --hc-surface-dark: #171C24;
  --hc-surface-container-dark: #1E2733;

  --hc-text-primary-light: #0A0A0A;
  --hc-text-secondary-light: #4A5568;
  --hc-text-primary-dark: #F4F7FB;
  --hc-text-secondary-dark: #B7C1D1;

  --hc-outline-light: #D9E3EA;
  --hc-outline-dark: #2E3946;

  --hc-radius-pill: 999px;
  --hc-radius-lg: 18px;
  --hc-radius-xl: 22px;

  --hc-shadow-sm: 0 8px 22px rgba(11, 61, 153, 0.08);
  --hc-shadow-md: 0 18px 48px rgba(11, 61, 153, 0.10);
  --hc-shadow-lg: 0 24px 70px rgba(11, 61, 153, 0.14);

  --hc-gradient-hero: linear-gradient(135deg, var(--hc-brand-primary-dark), var(--hc-brand-primary), var(--hc-brand-secondary));
  --hc-gradient-card: linear-gradient(135deg, rgba(11, 122, 142, 0.12), rgba(11, 61, 153, 0.08));

  --hc-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hc-font-weight-regular: 400;
  --hc-font-weight-medium: 600;
  --hc-font-weight-bold: 800;

  /*
   * Mobile-first responsive primitives — shared across CrewSource, CrewBazaar, CrewHire.
   *
   * Breakpoints match MUI / Tailwind defaults so product-level media queries stay
   * interchangeable. Spacing / typography tokens use clamp() so we don't need a
   * media query for every fluid value.
   */
  --hc-bp-sm: 640px;
  --hc-bp-md: 768px;
  --hc-bp-lg: 1024px;
  --hc-bp-xl: 1280px;

  /* Minimum comfortable tap target (WCAG 2.5.5). Use for any interactive control
     that needs to be usable on touch devices — buttons, icon buttons, nav links. */
  --hc-tap-min: 44px;

  /* Fluid horizontal gutters: 16px on phones, up to 32px on desktop. */
  --hc-gutter-x: clamp(16px, 4vw, 32px);
  /* Section-level vertical rhythm: tighter on phones. */
  --hc-section-y: clamp(40px, 8vw, 96px);

  /* Readable content width for long-form blocks on wide screens. */
  --hc-container-max: 1200px;

  /* Fluid type scale — mobile-first, ceilings for large desktops. */
  --hc-text-xs: clamp(0.75rem, 0.70rem + 0.2vw, 0.8125rem);
  --hc-text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem);
  --hc-text-base: clamp(0.9375rem, 0.90rem + 0.2vw, 1rem);
  --hc-text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --hc-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --hc-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --hc-text-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --hc-text-hero: clamp(2rem, 1.4rem + 3.5vw, 3.75rem);

  /* CrewVisa /chat — layout surfaces (see globals.css .chat-page--split) */
  --cv-chat-page-bg: #FAFBFC;
  --cv-chat-panel-bg: #FFFFFF;
  --cv-chat-panel-border: var(--hc-outline-light);
  --cv-chat-msg-user-start: rgba(11, 122, 142, 0.12);
  --cv-chat-msg-user-end: rgba(11, 61, 153, 0.08);
  --cv-chat-msg-assistant: #FFFFFF;
  --cv-chat-source-tag-bg: rgba(11, 122, 142, 0.08);
  --cv-chat-source-tag-border: rgba(11, 122, 142, 0.22);
  --cv-chat-source-tag-text: #0B7A8E;
  --cv-chat-compose-bg: #FFFFFF;
  --cv-chat-input-fill: #F5F9FC;
  --cv-chat-send: #0b7a8e;
  --cv-dashboard-page-bg: transparent;
  --cv-employers-page-bg: transparent;
}

[data-theme="dark"] {
  --hc-brand-primary: #5BC9E5;
  --hc-brand-primary-dark: #0B7A8E;
  --hc-brand-secondary: #8EB4FF;
  --hc-brand-accent: #FF9B7A;

  --hc-surface: var(--hc-surface-dark);
  --hc-surface-container: var(--hc-surface-container-dark);
  --hc-text-primary: var(--hc-text-primary-dark);
  --hc-text-secondary: var(--hc-text-secondary-dark);
  --hc-outline: var(--hc-outline-dark);
}

:root {
  --hc-surface: var(--hc-surface-light);
  --hc-surface-container: var(--hc-surface-container-light);
  --hc-text-primary: var(--hc-text-primary-light);
  --hc-text-secondary: var(--hc-text-secondary-light);
  --hc-outline: var(--hc-outline-light);
}