/* ==========================================================================
   AVIA Design System — tokens
   Palette and proportions sampled directly from white-paper-eng.pdf.
   Every colour below appears in the document; #0CAEF4 is the dominant accent
   on every page, and the navy ramp is the page-field gradient from top-right
   (#05649A) down to the hero black (#000817).
   ========================================================================== */

:root {
  /* --- Brand accent ----------------------------------------------------- */
  --avia-accent: #0caef4;
  --avia-accent-hi: #52c8ff;
  --avia-accent-lo: #0a8fc8;
  --avia-accent-deep: #05649a;

  /* --- Navy ramp (white paper page field) ------------------------------- */
  --avia-navy-600: #05649a;
  --avia-navy-700: #044c75;
  --avia-navy-800: #033856;
  --avia-navy-900: #02243a;
  --avia-navy-950: #011a2c;
  --avia-ink: #000817;

  /* --- Surfaces --------------------------------------------------------- */
  --avia-surface-0: rgba(255, 255, 255, 0.028);
  --avia-surface-1: rgba(255, 255, 255, 0.05);
  --avia-surface-2: rgba(255, 255, 255, 0.08);
  --avia-surface-3: rgba(255, 255, 255, 0.12);
  --avia-surface-solid: #052f4a;
  --avia-surface-raised: #063a5c;

  /* Hairline card fill — the subtle top-lit gradient used on WP pages 10/23 */
  --avia-card-fill: linear-gradient(162deg, rgba(255, 255, 255, 0.062) 0%, rgba(255, 255, 255, 0.016) 58%, rgba(255, 255, 255, 0.032) 100%);
  --avia-card-fill-hover: linear-gradient(162deg, rgba(12, 174, 244, 0.13) 0%, rgba(255, 255, 255, 0.022) 58%, rgba(255, 255, 255, 0.04) 100%);

  /* --- Strokes ---------------------------------------------------------- */
  --avia-stroke: rgba(255, 255, 255, 0.1);
  --avia-stroke-soft: rgba(255, 255, 255, 0.062);
  --avia-stroke-strong: rgba(255, 255, 255, 0.18);
  --avia-stroke-accent: rgba(12, 174, 244, 0.42);

  /* --- Text ------------------------------------------------------------- */
  --avia-text: #eef6fc;
  --avia-text-dim: rgba(238, 246, 252, 0.66);
  --avia-text-faint: rgba(238, 246, 252, 0.42);
  --avia-text-ghost: rgba(238, 246, 252, 0.2);
  --avia-text-on-accent: #00131f;

  /* --- Status ----------------------------------------------------------- */
  --avia-up: #17d69a;
  --avia-up-bg: rgba(23, 214, 154, 0.14);
  --avia-down: #ff5f6d;
  --avia-down-bg: rgba(255, 95, 109, 0.14);
  --avia-warn: #ffb020;
  --avia-warn-bg: rgba(255, 176, 32, 0.14);
  --avia-info-bg: rgba(12, 174, 244, 0.14);

  /* --- Page field ------------------------------------------------------- */
  --avia-page-bg: radial-gradient(118% 86% at 82% 6%, #05649a 0%, #044268 26%, #033350 50%, #02243a 74%, #000f1e 100%);
  --avia-page-bg-flat: #02243a;
  --avia-hero-bg: radial-gradient(90% 120% at 12% 42%, #0a5f8e 0%, #043b5c 30%, #011d31 62%, #000817 100%);
  --avia-scrim: rgba(0, 8, 23, 0.82);

  /* --- Typography ------------------------------------------------------- */
  --avia-font-display: 'Mulish', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', system-ui, sans-serif;
  --avia-font-body: 'Mulish', 'Segoe UI', Tahoma, 'Noto Naskh Arabic', system-ui, sans-serif;
  --avia-font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid scale — the white paper runs very large display caps against small,
     tightly-leaded body copy; these ratios reproduce that contrast. */
  --avia-fs-display: clamp(2.65rem, 1.15rem + 5.1vw, 5.75rem);
  --avia-fs-h1: clamp(2.1rem, 1.15rem + 3.3vw, 3.9rem);
  --avia-fs-h2: clamp(1.65rem, 1.05rem + 2.1vw, 2.75rem);
  --avia-fs-h3: clamp(1.25rem, 0.98rem + 0.95vw, 1.72rem);
  --avia-fs-h4: clamp(1.06rem, 0.95rem + 0.42vw, 1.25rem);
  --avia-fs-lead: clamp(1rem, 0.94rem + 0.3vw, 1.14rem);
  --avia-fs-body: 0.975rem;
  --avia-fs-sm: 0.875rem;
  --avia-fs-xs: 0.8125rem;
  --avia-fs-eyebrow: 0.6875rem;

  --avia-lh-display: 0.96;
  --avia-lh-head: 1.04;
  --avia-lh-body: 1.58;

  --avia-ls-display: -0.018em;
  --avia-ls-head: -0.012em;
  --avia-ls-eyebrow: 0.15em;

  --avia-fw-body: 400;
  --avia-fw-medium: 500;
  --avia-fw-semi: 600;
  --avia-fw-bold: 700;
  --avia-fw-display: 800;

  /* --- Radii ------------------------------------------------------------ */
  --avia-r-xs: 6px;
  --avia-r-sm: 9px;
  --avia-r-md: 12px;
  --avia-r-lg: 16px;
  --avia-r-xl: 22px;
  --avia-r-pill: 999px;

  /* --- Elevation -------------------------------------------------------- */
  --avia-shadow-sm: 0 1px 2px rgba(0, 8, 23, 0.4);
  --avia-shadow-md: 0 10px 26px -10px rgba(0, 8, 23, 0.72);
  --avia-shadow-lg: 0 28px 60px -22px rgba(0, 8, 23, 0.82);
  --avia-shadow-glow: 0 10px 34px -12px rgba(12, 174, 244, 0.72);
  --avia-shadow-glow-strong: 0 14px 44px -10px rgba(12, 174, 244, 0.85);
  /* 1px inner top highlight that gives the hairline cards their lit edge */
  --avia-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.075);

  /* --- Spacing ---------------------------------------------------------- */
  --avia-sp-1: 4px;
  --avia-sp-2: 8px;
  --avia-sp-3: 12px;
  --avia-sp-4: 16px;
  --avia-sp-5: 24px;
  --avia-sp-6: 32px;
  --avia-sp-7: 48px;
  --avia-sp-8: 64px;
  --avia-sp-9: 96px;

  --avia-section-y: clamp(56px, 6vw, 112px);
  --avia-container: 1280px;
  --avia-container-wide: 1440px;
  --avia-gutter: clamp(16px, 3.2vw, 40px);

  /* --- Motion ----------------------------------------------------------- */
  --avia-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --avia-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --avia-dur-fast: 0.14s;
  --avia-dur: 0.24s;
  --avia-dur-slow: 0.44s;

  /* --- Layers ----------------------------------------------------------- */
  --avia-z-base: 1;
  --avia-z-sticky: 120;
  --avia-z-header: 210;
  --avia-z-drawer: 320;
  --avia-z-modal: 420;
  --avia-z-toast: 520;

  /* --- Marketplace category accents -------------------------------------
     Each asset category keeps the hue it has always had, re-tuned for the
     dark theme. Pages set one of the .category-* classes below and every
     component reads --cat-accent, so nothing is duplicated per category. */
  --cat-accent: var(--avia-accent);
  --cat-accent-hi: var(--avia-accent-hi);
  --cat-glow: rgba(12, 174, 244, 0.28);
}

.category-art-design {
  --cat-accent: #a97bff;
  --cat-accent-hi: #c9adff;
  --cat-glow: rgba(169, 123, 255, 0.3);
}

.category-automobiles {
  --cat-accent: #ff7a45;
  --cat-accent-hi: #ffa878;
  --cat-glow: rgba(255, 122, 69, 0.3);
}

.category-watches {
  --cat-accent: #e0b64a;
  --cat-accent-hi: #f2d484;
  --cat-glow: rgba(224, 182, 74, 0.3);
}

.category-jewelry {
  --cat-accent: #ff5fa8;
  --cat-accent-hi: #ff94c4;
  --cat-glow: rgba(255, 95, 168, 0.3);
}

.category-real-estate {
  --cat-accent: #25d39a;
  --cat-accent-hi: #6fe7bf;
  --cat-glow: rgba(37, 211, 154, 0.3);
}

.category-water-transport {
  --cat-accent: #2fb8f5;
  --cat-accent-hi: #74d2fb;
  --cat-glow: rgba(47, 184, 245, 0.3);
}

.category-applied-arts {
  --cat-accent: #ff6ab0;
  --cat-accent-hi: #ff9ecb;
  --cat-glow: rgba(255, 106, 176, 0.3);
}