/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ─── Google Fonts ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ─── Hiveora Design System — CSS Custom Properties ─────────────────────────── */
:root {

  /* ─── COLOR: Violet ─── */
  --hv-violet-50: #F5F3FF;
  --hv-violet-100: #EDE9FE;
  --hv-violet-200: #DDD6FE;
  --hv-violet-300: #C4B5FD;
  --hv-violet-400: #A78BFA;
  --hv-violet-500: #8B5CF6;
  --hv-violet-600: #7C3AED;
  --hv-violet-700: #6D28D9;
  --hv-violet-800: #4C1D95;
  --hv-violet-900: #2D1B69;

  /* ─── COLOR: Fuchsia ─── */
  --hv-fuchsia-50: #FDF4FF;
  --hv-fuchsia-100: #FAE8FF;
  --hv-fuchsia-200: #F5D0FE;
  --hv-fuchsia-400: #E879F9;
  --hv-fuchsia-600: #C026D3;
  --hv-fuchsia-700: #A21CAF;
  --hv-fuchsia-900: #701A75;

  /* ─── COLOR: Sky ─── */
  --hv-sky-100: #E0F2FE;
  --hv-sky-200: #BAE6FD;
  --hv-sky-500: #0EA5E9;
  --hv-sky-700: #0369A1;

  /* ─── COLOR: Ink (neutral scale) ─── */
  --hv-ink-0: #FFFFFF;
  --hv-ink-50: #FAFAFF;
  --hv-ink-100: #F0EEFF;
  --hv-ink-200: #E2DEFF;
  --hv-ink-300: #C8C2F5;
  --hv-ink-400: #9B93D8;
  --hv-ink-500: #6B62B8;
  --hv-ink-600: #4A4570;
  --hv-ink-700: #3D3860;
  --hv-ink-800: #2D2850;
  --hv-ink-900: #1E1B4B;

  /* ─── COLOR: Semantic ─── */
  --hv-success-subtle: #F0FDF4;
  --hv-success-border: #A7F3D0;
  --hv-success: #059669;
  --hv-success-dark: #065F46;
  --hv-warning-subtle: #FFFBEB;
  --hv-warning-border: #FDE68A;
  --hv-warning: #D97706;
  --hv-warning-dark: #92400E;
  --hv-error-subtle: #FEF2F2;
  --hv-error-border: #FECACA;
  --hv-error: #DC2626;
  --hv-error-dark: #991B1B;
  --hv-info-subtle: #EFF6FF;
  --hv-info-border: #BFDBFE;
  --hv-info: #2563EB;
  --hv-info-dark: #1E40AF;

  /* ─── COLOR: Gradients ─── */
  --hv-gradient-primary: linear-gradient(135deg, #7C3AED 0%, #C026D3 100%);
  --hv-gradient-violet-soft: linear-gradient(135deg, #EDE9FE 0%, #FAE8FF 100%);
  --hv-gradient-progress: linear-gradient(90deg, #7C3AED 0%, #C026D3 100%);
  --hv-gradient-dark-hero: linear-gradient(135deg, #1E1B4B 0%, #2D1B69 100%);
  --hv-gradient-glow-violet: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 65%);
  --hv-gradient-glow-fuchsia: radial-gradient(circle, rgba(192,38,211,0.14) 0%, transparent 65%);

  /* ─── TYPOGRAPHY: Font Families ─── */
  --hv-font-display: 'Bricolage Grotesque', sans-serif;
  --hv-font-body: 'Instrument Sans', sans-serif;
  --hv-font-mono: 'JetBrains Mono', monospace;

  /* ─── TYPOGRAPHY: Font Sizes ─── */
  --hv-text-2xs: 10px;
  --hv-text-xs: 11px;
  --hv-text-sm: 12px;
  --hv-text-md: 13px;
  --hv-text-lg: 14px;
  --hv-text-xl: 16px;
  --hv-text-2xl: 18px;
  --hv-text-3xl: 22px;
  --hv-text-4xl: 28px;
  --hv-text-5xl: 36px;
  --hv-text-6xl: 48px;
  --hv-text-7xl: 60px;
  --hv-text-8xl: 72px;

  /* ─── TYPOGRAPHY: Font Weights ─── */
  --hv-weight-light: 300;
  --hv-weight-regular: 400;
  --hv-weight-medium: 500;
  --hv-weight-semibold: 600;
  --hv-weight-bold: 700;
  --hv-weight-extrabold: 800;

  /* ─── TYPOGRAPHY: Line Heights ─── */
  --hv-leading-none: 1.0;
  --hv-leading-tight: 1.1;
  --hv-leading-snug: 1.3;
  --hv-leading-normal: 1.5;
  --hv-leading-relaxed: 1.65;
  --hv-leading-loose: 1.8;

  /* ─── TYPOGRAPHY: Letter Spacing ─── */
  --hv-tracking-tight: -0.045em;
  --hv-tracking-snug: -0.03em;
  --hv-tracking-normal: 0em;
  --hv-tracking-wide: 0.04em;
  --hv-tracking-wider: 0.08em;
  --hv-tracking-widest: 0.14em;

  /* ─── SPACING ─── */
  --hv-space-0: 0px;
  --hv-space-px: 1px;
  --hv-space-0-5: 2px;
  --hv-space-1: 4px;
  --hv-space-1-5: 6px;
  --hv-space-2: 8px;
  --hv-space-2-5: 10px;
  --hv-space-3: 12px;
  --hv-space-3-5: 14px;
  --hv-space-4: 16px;
  --hv-space-5: 20px;
  --hv-space-6: 24px;
  --hv-space-7: 28px;
  --hv-space-8: 32px;
  --hv-space-9: 36px;
  --hv-space-10: 40px;
  --hv-space-12: 48px;
  --hv-space-14: 56px;
  --hv-space-16: 64px;
  --hv-space-20: 80px;
  --hv-space-24: 96px;
  --hv-space-32: 128px;

  /* ─── SIZING: Component Heights ─── */
  --hv-h-topbar: 54px;
  --hv-h-sidebar: 100vh;
  --hv-h-input-sm: 32px;
  --hv-h-input-md: 40px;
  --hv-h-input-lg: 48px;
  --hv-h-btn-sm: 30px;
  --hv-h-btn-md: 40px;
  --hv-h-btn-lg: 48px;
  --hv-h-tab-bar: 44px;
  --hv-h-progress: 6px;
  --hv-h-progress-thin: 3px;
  --hv-h-toggle: 24px;
  --hv-h-toggle-thumb: 18px;

  /* ─── SIZING: Component Widths ─── */
  --hv-w-sidebar: 272px;
  --hv-w-sidebar-icon: 48px;
  --hv-w-right-rail: 220px;
  --hv-w-modal-sm: 400px;
  --hv-w-modal-md: 520px;
  --hv-w-modal-lg: 720px;
  --hv-w-search: 480px;
  --hv-w-toggle: 44px;
  --hv-w-filter-search: 220px;
  --hv-w-filter-side: 200px;

  /* ─── SIZING: Avatars ─── */
  --hv-avatar-xs: 20px;
  --hv-avatar-sm: 28px;
  --hv-avatar-md: 36px;
  --hv-avatar-lg: 48px;
  --hv-avatar-xl: 64px;
  --hv-avatar-2xl: 96px;

  /* ─── SIZING: Icons ─── */
  --hv-icon-xs: 12px;
  --hv-icon-sm: 14px;
  --hv-icon-md: 16px;
  --hv-icon-lg: 20px;
  --hv-icon-xl: 24px;
  --hv-icon-2xl: 32px;
  --hv-icon-3xl: 48px;

  /* ─── SIZING: Layout ─── */
  --hv-max-content: 1280px;
  --hv-max-prose: 66ch;
  --hv-max-hero: 680px;
  --hv-card-min: 240px;
  --hv-touch-min: 44px;

  /* ─── BORDER RADIUS ─── */
  --hv-r-none: 0px;
  --hv-r-xs: 4px;
  --hv-r-sm: 8px;
  --hv-r-md: 12px;
  --hv-r-lg: 16px;
  --hv-r-xl: 24px;
  --hv-r-2xl: 32px;
  --hv-r-full: 9999px;

  /* ─── SHADOWS ─── */
  --hv-sh-none: none;
  --hv-sh-xs: 0 1px 2px rgba(30,27,75,0.04), 0 0px 1px rgba(30,27,75,0.06);
  --hv-sh-sm: 0 2px 8px rgba(30,27,75,0.07), 0 1px 2px rgba(30,27,75,0.04);
  --hv-sh-md: 0 4px 20px rgba(30,27,75,0.09), 0 2px 4px rgba(30,27,75,0.05);
  --hv-sh-lg: 0 8px 40px rgba(30,27,75,0.11), 0 4px 8px rgba(30,27,75,0.06);
  --hv-sh-xl: 0 16px 64px rgba(30,27,75,0.14), 0 8px 16px rgba(30,27,75,0.07);
  --hv-sh-2xl: 0 24px 80px rgba(30,27,75,0.18), 0 12px 24px rgba(30,27,75,0.09);
  --hv-sh-violet: 0 6px 24px rgba(124,58,237,0.28);
  --hv-sh-fuchsia: 0 6px 24px rgba(192,38,211,0.28);
  --hv-sh-error: 0 4px 16px rgba(220,38,38,0.24);
  --hv-sh-inset: inset 0 1px 2px rgba(30,27,75,0.08);

  /* ─── MOTION: Easing ─── */
  --hv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hv-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --hv-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --hv-ease-linear: linear;

  /* ─── MOTION: Duration ─── */
  --hv-dur-instant: 80ms;
  --hv-dur-fast: 120ms;
  --hv-dur-normal: 160ms;
  --hv-dur-moderate: 240ms;
  --hv-dur-slow: 400ms;
  --hv-dur-relaxed: 600ms;
  --hv-dur-celebration: 1400ms;

  /* ─── MOTION: Delay ─── */
  --hv-delay-none: 0ms;
  --hv-delay-short: 80ms;
  --hv-delay-loader: 300ms;
  --hv-delay-tooltip: 600ms;

  /* ─── FOCUS RINGS ─── */
  --hv-focus-width: 3px;
  --hv-focus-offset: 2px;
  --hv-focus-color: #7C3AED;
  --hv-focus-opacity: 1.0;
  --hv-focus-style: solid;
  --hv-focus-ring: 3px solid #7C3AED;
  --hv-focus-inset: 0 0 0 3px rgba(124,58,237,0.5);
  --hv-focus-ring-error: 3px solid #DC2626;

  /* ─── Z-INDEX ─── */
  --hv-z-base: 0;
  --hv-z-raised: 10;
  --hv-z-sticky: 20;
  --hv-z-overlay: 30;
  --hv-z-drawer: 40;
  --hv-z-modal: 50;
  --hv-z-toast: 60;
  --hv-z-skip: 70;
  --hv-z-max: 9999;

  /* ─── OPACITY ─── */
  --hv-opacity-disabled: 0.4;
  --hv-opacity-muted: 0.6;
  --hv-opacity-hover: 0.85;
  --hv-opacity-backdrop: 0.45;

  /* ─── BORDER WIDTHS ─── */
  --hv-border-hairline: 1px;
  --hv-border-default: 1.5px;
  --hv-border-strong: 2px;
  --hv-border-thick: 3px;

  /* ─── GRID ─── */
  --hv-gutter-mobile: 16px;
  --hv-gutter-tablet: 20px;
  --hv-gutter-desktop: 24px;
  --hv-margin-mobile: 16px;
  --hv-margin-tablet: 32px;
  --hv-margin-desktop: 52px;
}

/* ─── Reduced Motion Overrides ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hv-ease-spring:  linear;
    --hv-ease-smooth:  linear;
    --hv-dur-instant:  1ms;
    --hv-dur-fast:     1ms;
    --hv-dur-normal:   1ms;
    --hv-dur-moderate: 1ms;
    --hv-dur-slow:     1ms;
    --hv-dur-relaxed:  1ms;
    --hv-dur-celebration: 1ms;
  }
}

/* ─── Base Styles ─────────────────────────────────────────────────────────── */
body {
  font-family: var(--hv-font-body);
  background-color: var(--hv-ink-50);
  color: var(--hv-ink-900);
  line-height: var(--hv-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}