/* Font Awesome Free — authorized icon/glyph library, vendored locally (gargoli.md §6.1.3, §6.1.4).
   Loaded once here so every module that uses the design system gets the icon set. */
@import url('/vendor/fontawesome/css/fontawesome.min.css');
@import url('/vendor/fontawesome/css/solid.min.css');
@import url('/vendor/fontawesome/css/regular.min.css');
@import url('/vendor/fontawesome/css/brands.min.css');

/* ==========================================
   Gargoli — Centralized Design System (Cyan, Blue, Pink)
   This file contains all design tokens and shared CSS classes.
   All module-specific styles must import this file first.

   Theming (gargoli.md §3.13): every color below is a design token (CSS
   variable). An organization's theme overrides these variables at runtime
   (see config/themes.js), so all modules re-color automatically. Derived
   tints (focus rings, hover backgrounds, alerts) are computed with
   color-mix() so they follow whatever brand color is active.
   ========================================== */

/* --- Design Tokens (Colors) --- */
:root {
  /* Primary: Cyan (deep, professional) */
  --color-primary-cyan: #0E7490;
  --color-primary-cyan-hover: #155E75;
  --color-primary-cyan-active: #164E63;
  --color-on-primary: #FFFFFF; /* readable text on top of primary */

  /* Secondary: Blue (deep navy) */
  --color-secondary-blue: #102A43;
  --color-secondary-blue-hover: #0B1F33;
  --color-secondary-blue-active: #08182A;
  --color-on-secondary: #E6EDF5;

  /* Accent: Pink (deep rose) */
  --color-accent-pink: #BE185D;
  --color-accent-pink-hover: #9D174D;
  --color-accent-pink-active: #831843;
  --color-on-accent: #FFFFFF;

  /* Background variants (cool neutrals) */
  --color-background-light: #EEF2F6;
  --color-surface-white: #FFFFFF;
  --color-surface-offwhite: #F8FAFC;

  /* Text */
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;

  /* Borders */
  --color-border-pale: #CBD5E1;

  /* Error */
  --color-error-pink: #B91C1C;

  /* --- Design Tokens (Spacing, Radius, Shadows) --- */
  /* Spacing scale (8px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows — soft, slate-tinted, restrained (§3.14) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 28px -12px rgba(15, 23, 42, 0.18);
}

/* Dark templates switch the browser UI (scrollbars, form controls) too. */
[data-theme-mode="dark"] {
  color-scheme: dark;
}

html, body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Shared CSS Classes --- */

/* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    user-select: none;
  }

  .btn:focus-visible {
    outline: 2px solid var(--color-primary-cyan);
    outline-offset: 2px;
  }

  .btn:hover:not(:disabled) {
    transform: translateY(-1px);
  }

  .btn:active:not(:disabled) {
    transform: translateY(0);
  }

  .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Primary: Cyan */
  .btn-primary {
    background-color: var(--color-primary-cyan);
    color: var(--color-on-primary);
  }
  .btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-cyan-hover);
  }
  .btn-primary:active:not(:disabled) {
    background-color: var(--color-primary-cyan-active);
  }

  /* Secondary: Blue outline */
  .btn-secondary {
    background-color: transparent;
    color: var(--color-secondary-blue);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-secondary-blue);
  }
  .btn-secondary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-secondary-blue) 12%, transparent);
  }

  /* Accent: Pink */
  .btn-accent {
    background-color: var(--color-accent-pink);
    color: var(--color-on-accent);
  }
  .btn-accent:hover:not(:disabled) {
    background-color: var(--color-accent-pink-hover);
  }
  .btn-accent:active:not(:disabled) {
    background-color: var(--color-accent-pink-active);
  }

  /* Danger (destructive) */
  .btn-danger {
    background-color: transparent;
    color: var(--color-error-pink);
    border: 2px solid var(--color-error-pink);
  }
  .btn-danger:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--color-error-pink) 12%, transparent);
  }

  .btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: 0.8125rem;
  }

/* Inputs */
  .input-field {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: 1rem;
    color: var(--color-text-primary);
    background-color: var(--color-surface-white);
    border: 2px solid var(--color-border-pale);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .input-field:focus {
    outline: none;
    border-color: var(--color-primary-cyan);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary-cyan) 18%, transparent);
  }

  .input-field:focus:invalid {
    border-color: var(--color-error-pink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-error-pink) 18%, transparent);
  }

  .input-field::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.75;
  }

/* Input with error state */
  .input-field.error {
    border-color: var(--color-error-pink);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-error-pink) 12%, transparent);
  }

  .input-error-message {
    margin-top: var(--space-1);
    font-size: 0.8125rem;
    color: var(--color-error-pink);
  }

/* Cards */
  .card {
    background-color: var(--color-surface-white);
    border: 1px solid var(--color-border-pale);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
  }

/* Navigation */
  .nav-header {
    background-color: var(--color-secondary-blue);
    color: var(--color-on-secondary);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  .nav-link {
    color: var(--color-on-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
  }

  .nav-link:hover {
    color: color-mix(in srgb, var(--color-on-secondary) 80%, var(--color-primary-cyan));
  }

/* Badges */
  .badge {
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .badge-primary { background: color-mix(in srgb, var(--color-primary-cyan) 18%, transparent); color: var(--color-text-primary); }
  .badge-secondary { background: color-mix(in srgb, var(--color-secondary-blue) 18%, transparent); color: var(--color-text-primary); }
  .badge-accent { background: color-mix(in srgb, var(--color-accent-pink) 18%, transparent); color: var(--color-text-primary); }

/* Alerts/Notifications */
  .alert {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
  }

  .alert-success {
    background-color: color-mix(in srgb, var(--color-primary-cyan) 12%, transparent);
    color: var(--color-text-primary);
    border: 1px solid color-mix(in srgb, var(--color-primary-cyan) 35%, transparent);
  }

  .alert-error {
    background-color: color-mix(in srgb, var(--color-error-pink) 12%, transparent);
    color: var(--color-error-pink);
    border: 1px solid color-mix(in srgb, var(--color-error-pink) 35%, transparent);
  }

/* Focus visible (accessibility) */
  *:focus-visible {
    outline: 2px solid var(--color-primary-cyan);
    outline-offset: 2px;
  }

/* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }