/* doSomeReps/frontend/src/styles/global.css */

:root {
  --rep-color-loading-indicator: #007bff;

  --rep-color-action-accent: #319795;
  --rep-color-action-accent-hover: #2c7a7b;
  --rep-color-action-primary: #3182ce;
  --rep-color-action-primary-hover: #2b6cb0;
  --rep-color-on-action: #ffffff;
  --rep-color-divider-on-action: rgba(255, 255, 255, 0.25);

  --rep-color-surface: #ffffff;
  --rep-color-surface-subtle: #f8fafc;
  --rep-color-surface-secondary: #edf2f7;
  --rep-color-surface-secondary-hover: #e2e8f0;

  --rep-color-text-primary: #2d3748;
  --rep-color-text-secondary: #4a5568;

  --rep-color-text-muted: #6c757d;
  --rep-color-text-subtle: #718096;

  --rep-color-border: #e2e8f0;
  --rep-color-border-strong: #cbd5e0;

  --rep-color-focus: #4299e1;
  --rep-color-focus-ring: rgba(66, 153, 225, 0.15);

  --rep-color-success-text: #155724;
  --rep-color-success-surface: #d4edda;
  --rep-color-success-border: #c3e6cb;

  --rep-color-error-text: #721c24;
  --rep-color-error-surface: #f8d7da;
  --rep-color-error-border: #f5c6cb;
  --rep-color-error-text-strong: #c53030;
  --rep-color-error-surface-subtle: #fff5f5;
  --rep-color-error-border-subtle: #feb2b2;

  --rep-color-overlay: rgba(0, 0, 0, 0.45);

  /* Navbar Design Tokens */
  --rep-color-navbar-bg-start: #1e293b;
  --rep-color-navbar-bg-end: #0f172a;
  --rep-color-navbar-accent: #ff8c00;
  --rep-color-navbar-accent-hover: #ffa500;
  --rep-color-navbar-text-muted: #cbd5e1;
  --rep-color-navbar-accent-glow: rgba(255, 140, 0, 0.4);
  --rep-color-navbar-accent-glow-subtle: rgba(255, 140, 0, 0.2);
  --rep-color-navbar-accent-bg-highlight: rgba(255, 140, 0, 0.1);
  --rep-color-navbar-accent-bg-hover: rgba(255, 140, 0, 0.05);
  --rep-shadow-navbar: 0 4px 20px rgba(0, 0, 0, 0.25);

  /* Category Picker Design Tokens */
  --rep-cp-item-bg: #ffa500;
  --rep-cp-item-bg-active: #ff8c00;
  --rep-cp-item-border: #ffa500;
  --rep-cp-item-border-active: #ff8c00;
  --rep-cp-item-text: #000000;
  --rep-cp-item-text-active: #000000;

  --rep-radius-small: 0.25rem;
  --rep-radius-control: 6px;
  --rep-radius-dialog: 8px;

  --rep-opacity-disabled: 0.65;
  --rep-transition-fast: 0.15s ease;

  --rep-shadow-dialog:
    0 20px 25px -5px rgba(0, 0, 0, 0.15),
    0 10px 10px -5px rgba(0, 0, 0, 0.08);

--rep-btn-height-md: 46px;
  --rep-btn-padding-x-md: 24px;
  --rep-btn-font-size-md: 1rem;
  --rep-btn-min-width-md: 180px;

  --rep-btn-height-sm: 34px;
  --rep-btn-padding-x-sm: 14px;
  --rep-btn-font-size-sm: 0.875rem;
  --rep-btn-min-width-sm: 0;

  --rep-btn-height: var(--rep-btn-height-md);
  --rep-btn-padding-x: var(--rep-btn-padding-x-md);
  --rep-btn-font-size: var(--rep-btn-font-size-md);
  --rep-btn-min-width: var(--rep-btn-min-width-md);

  --rep-btn-radius: 12px;
  --rep-btn-gap: 8px;
  --rep-btn-row-gap: 12px;

  --rep-btn-font-weight: 700;
  --rep-btn-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --rep-btn-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.1);
  --rep-btn-transition:
    transform 120ms ease,
    opacity 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}