/**
 * Flow Medical - Default Theme
 *
 * This file defines CSS custom properties for theming.
 * To create a custom theme, copy this file and modify the color values.
 *
 * Color values are in RGB format (space-separated) to support Tailwind's
 * opacity modifier syntax: rgb(var(--color) / <alpha-value>)
 */

:root {
  /* ========================================
   * BRAND COLORS
   * Primary brand palette - the main identity colors
   * ======================================== */

  /* Primary (fiumedbase) - Dark teal */
  --color-primary-50: 230 237 238;
  --color-primary-100: 204 220 222;
  --color-primary-200: 179 202 205;
  --color-primary-300: 153 185 189;
  --color-primary-400: 128 167 172;
  --color-primary-500: 102 149 155;
  --color-primary-600: 77 132 139;
  --color-primary-700: 51 114 122;
  --color-primary-800: 26 97 106;
  --color-primary-900: 0 79 89;
  --color-primary: var(--color-primary-900);

  /* Secondary (fiumedsecond) - Light blue */
  --color-secondary-50: 240 246 248;
  --color-secondary-100: 225 237 241;
  --color-secondary-200: 211 228 234;
  --color-secondary-300: 196 219 227;
  --color-secondary-400: 181 210 220;
  --color-secondary-500: 166 200 212;
  --color-secondary-600: 151 191 205;
  --color-secondary-700: 137 182 198;
  --color-secondary-800: 122 173 191;
  --color-secondary-900: 107 164 184;
  --color-secondary: var(--color-secondary-900);

  /* Highlight (fiumedhighlight) - Pale blue */
  --color-highlight-50: 244 248 250;
  --color-highlight-100: 238 244 248;
  --color-highlight-200: 232 240 245;
  --color-highlight-300: 227 237 243;
  --color-highlight-400: 221 233 241;
  --color-highlight-500: 215 229 238;
  --color-highlight-600: 209 225 236;
  --color-highlight-700: 204 222 233;
  --color-highlight-800: 198 218 231;
  --color-highlight: var(--color-highlight-800);

  /* Accent (carrot) - Orange */
  --color-accent: 255 153 0;

  /* ========================================
   * SEMANTIC COLORS - Light Mode
   * These change between light and dark themes
   * ======================================== */

  /* Backgrounds */
  --color-bg: 255 255 255;
  --color-bg-secondary: 249 250 251;
  --color-bg-tertiary: 243 244 246;
  --color-bg-elevated: 255 255 255;

  /* Text */
  --color-text: 17 24 39;
  --color-text-secondary: 107 114 128;
  --color-text-tertiary: 156 163 175;
  --color-text-inverse: 255 255 255;

  /* Borders */
  --color-border: 229 231 235;
  --color-border-secondary: 209 213 219;
  --color-border-focus: 107 164 184;

  /* ========================================
   * STATUS COLORS
   * Success and Error colors inherited from theme-base.css
   * Warning and Info can be customized per theme
   * ======================================== */

  /* Warning (yellow/amber) */
  --color-warning-50: 254 249 195;
  --color-warning-100: 254 240 138;
  --color-warning-200: 253 224 71;
  --color-warning-500: 234 179 8;
  --color-warning-600: 202 138 4;
  --color-warning-700: 161 98 7;
  --color-warning-800: 133 77 14;
  --color-warning: var(--color-warning-500);
  --color-warning-light: 253 224 71;
  --color-warning-dark: 133 77 14;

  /* Info (blue) */
  --color-info-50: 239 246 255;
  --color-info-100: 219 234 254;
  --color-info-200: 191 219 254;
  --color-info-500: 59 130 246;
  --color-info-600: 37 99 235;
  --color-info-700: 29 78 216;
  --color-info-800: 30 64 175;
  --color-info: var(--color-info-500);
  --color-info-light: 191 219 254;
  --color-info-dark: 30 64 175;

  /* Link color */
  --color-link: 59 130 246;
  --color-link-hover: 37 99 235;

  /* ========================================
   * COMPONENT-SPECIFIC TOKENS
   * ======================================== */

  /* Sidebar */
  --color-sidebar-bg: var(--color-primary-900);
  --color-sidebar-text: 255 255 255;
  --color-sidebar-text-secondary: var(--color-secondary-400);
  --color-sidebar-hover: var(--color-primary-800);
  --color-sidebar-active: var(--color-primary-700);

  /* Cards */
  --color-card-bg: var(--color-bg);
  --color-card-border: var(--color-border);

  /* Tables */
  --color-table-header-bg: var(--color-primary-900);
  --color-table-header-text: 255 255 255;
  --color-table-row-hover: var(--color-highlight-50);
  --color-table-row-alt: var(--color-bg-secondary);

  /* Forms */
  --color-input-bg: var(--color-bg);
  --color-input-border: var(--color-border);
  --color-input-focus-ring: var(--color-secondary-900);

  /* Buttons */
  --color-btn-primary-bg: var(--color-primary-900);
  --color-btn-primary-text: 255 255 255;
  --color-btn-primary-hover: var(--color-primary-800);

  --color-btn-secondary-bg: var(--color-secondary-100);
  --color-btn-secondary-text: var(--color-primary-900);
  --color-btn-secondary-hover: var(--color-secondary-200);

  /* Danger button - for destructive actions */
  --color-btn-danger-bg: var(--color-error-600);
  --color-btn-danger-text: 255 255 255;
  --color-btn-danger-hover: var(--color-error-700);

  /* Chat Bubbles */
  --color-chat-user-bg: 219 234 254;       /* Light blue for user bubbles */
  --color-chat-user-text: 30 64 175;       /* Dark blue text for contrast */
  --color-chat-assistant-bg: var(--color-bg-secondary);
  --color-chat-assistant-text: var(--color-text);

  /* ========================================
   * RECORDING & TRANSPORT CONTROLS
   * Braun-inspired button hierarchy
   * ======================================== */

  /* Recording - Braun vermillion orange */
  --color-record: 223 92 21;
  --color-record-hover: 199 82 19;

  /* Transport controls - neutral gray */
  --color-transport: 107 114 128;
  --color-transport-hover: 75 85 99;
}

/* ========================================
 * DARK MODE OVERRIDES
 * ======================================== */

.dark {
  /* Backgrounds */
  --color-bg: 17 24 39;
  --color-bg-secondary: 31 41 55;
  --color-bg-tertiary: 55 65 81;
  --color-bg-elevated: 31 41 55;

  /* Text */
  --color-text: 243 244 246;
  --color-text-secondary: 156 163 175;
  --color-text-tertiary: 107 114 128;
  --color-text-inverse: 17 24 39;

  /* Borders */
  --color-border: 55 65 81;
  --color-border-secondary: 75 85 99;
  --color-border-focus: 137 182 198;

  /* Sidebar - stays the same in dark mode for this brand */
  --color-sidebar-bg: var(--color-primary-900);
  --color-sidebar-hover: var(--color-primary-800);
  --color-sidebar-active: var(--color-primary-700);

  /* Cards */
  --color-card-bg: var(--color-bg-secondary);
  --color-card-border: var(--color-border);

  /* Tables */
  --color-table-row-hover: 55 65 81;
  --color-table-row-alt: var(--color-bg-secondary);

  /* Forms */
  --color-input-bg: var(--color-bg-secondary);
  --color-input-border: var(--color-border);

  /* Buttons */
  --color-btn-secondary-bg: var(--color-bg-tertiary);
  --color-btn-secondary-text: var(--color-text);
  --color-btn-secondary-hover: 75 85 99;

  /* Danger button */
  --color-btn-danger-bg: var(--color-error-600);
  --color-btn-danger-text: 255 255 255;
  --color-btn-danger-hover: var(--color-error-500);

  /* Chat Bubbles */
  --color-chat-user-bg: 30 64 175;         /* Dark blue for user bubbles */
  --color-chat-user-text: 219 234 254;     /* Light text for contrast */
  --color-chat-assistant-bg: var(--color-bg-tertiary);
  --color-chat-assistant-text: var(--color-text);

  /* Recording & Transport - slightly lighter for dark mode */
  --color-record: 239 91 10;
  --color-record-hover: 255 101 20;
  --color-transport: 156 163 175;
  --color-transport-hover: 209 213 219;
}