/* AquaJoy design tokens */

:root {
  /* Brand, taken 1:1 from the logo and the existing brand kit */
  --aj-aqua: #00f6d5;
  --aj-cyan: #00ffff;
  --aj-teal: #004e64;
  --aj-teal-600: #013d4f;
  --aj-teal-300: #0f80aa;
  --aj-ink: #0a1128;
  --aj-blue: #1d4e89;
  --aj-sun: #fdc500;
  --aj-sun-deep: #e0ac00;

  /* Neutrals tinted toward the water palette so nothing reads as flat grey */
  --aj-white: #ffffff;
  --aj-surface: #f5f9fa;
  --aj-surface-2: #eaf2f4;
  --aj-line: #dbe6e9;
  --aj-line-soft: #edf3f5;
  --aj-muted: #5b6b73;
  --aj-muted-soft: #8698a1;

  /* Semantic */
  --aj-bg: var(--aj-white);
  --aj-fg: var(--aj-ink);
  --aj-accent: var(--aj-teal);
  --aj-ok: #0f8a5f;
  --aj-warn: #b26a00;
  --aj-err: #c02b2b;

  /* Gradients */
  --aj-grad-deep: linear-gradient(160deg, #0a1128 0%, #013d4f 55%, #004e64 100%);
  --aj-grad-aqua: linear-gradient(120deg, var(--aj-aqua) 0%, var(--aj-cyan) 100%);
  --aj-grad-sun: linear-gradient(120deg, #ffd633 0%, var(--aj-sun) 100%);
  --aj-grad-surface: linear-gradient(180deg, #ffffff 0%, var(--aj-surface) 100%);

  /* Type */
  --aj-font-display: "Libre Franklin", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --aj-font-body: "Lato", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale, min at 360px viewport and max at 1440px */
  --aj-fs-xs: clamp(0.75rem, 0.72rem + 0.13vw, 0.8125rem);
  --aj-fs-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --aj-fs-base: clamp(1rem, 0.96rem + 0.19vw, 1.0625rem);
  --aj-fs-lg: clamp(1.125rem, 1.05rem + 0.32vw, 1.25rem);
  --aj-fs-xl: clamp(1.3rem, 1.17rem + 0.56vw, 1.5rem);
  --aj-fs-2xl: clamp(1.6rem, 1.36rem + 1.05vw, 2.1rem);
  --aj-fs-3xl: clamp(2rem, 1.55rem + 1.95vw, 3rem);
  --aj-fs-4xl: clamp(2.4rem, 1.63rem + 3.35vw, 4rem);

  --aj-lh-tight: 1.08;
  --aj-lh-snug: 1.24;
  --aj-lh-base: 1.65;

  --aj-track-tight: -0.028em;
  --aj-track-snug: -0.018em;
  --aj-track-wide: 0.08em;

  /* Space, 4px base */
  --aj-1: 0.25rem;
  --aj-2: 0.5rem;
  --aj-3: 0.75rem;
  --aj-4: 1rem;
  --aj-5: 1.5rem;
  --aj-6: 2rem;
  --aj-7: 2.5rem;
  --aj-8: 3rem;
  --aj-9: 4rem;
  --aj-10: 5rem;
  --aj-11: 6.5rem;
  --aj-12: 8rem;

  /* Section rhythm shrinks hard on mobile so the page feels like an app, not a brochure */
  --aj-section-y: clamp(3.5rem, 2.2rem + 5.6vw, 7rem);
  --aj-gutter: clamp(1.15rem, 0.7rem + 1.9vw, 2rem);
  --aj-maxw: 1200px;
  --aj-maxw-narrow: 720px;
  --aj-maxw-wide: 1400px;

  /* Radius */
  --aj-r-sm: 8px;
  --aj-r: 14px;
  --aj-r-lg: 20px;
  --aj-r-xl: 28px;
  --aj-r-2xl: 36px;
  --aj-r-pill: 999px;

  /* Shadows, tinted with the teal so they sit in the palette */
  --aj-sh-xs: 0 1px 2px rgba(10, 17, 40, 0.06);
  --aj-sh-sm: 0 2px 8px rgba(10, 17, 40, 0.06), 0 1px 2px rgba(10, 17, 40, 0.04);
  --aj-sh: 0 8px 24px rgba(1, 61, 79, 0.08), 0 2px 6px rgba(10, 17, 40, 0.04);
  --aj-sh-lg: 0 18px 48px rgba(1, 61, 79, 0.12), 0 4px 12px rgba(10, 17, 40, 0.05);
  --aj-sh-xl: 0 32px 80px rgba(1, 61, 79, 0.16), 0 8px 20px rgba(10, 17, 40, 0.06);
  --aj-sh-aqua: 0 12px 32px rgba(0, 246, 213, 0.28);
  --aj-sh-sun: 0 12px 30px rgba(253, 197, 0, 0.32);

  /* Motion */
  --aj-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --aj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --aj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --aj-t-fast: 140ms;
  --aj-t: 260ms;
  --aj-t-slow: 520ms;

  --aj-header-h: 68px;
  --aj-z-header: 100;
  --aj-z-drawer: 200;
  --aj-z-modal: 300;
  --aj-z-toast: 400;
}

@media (min-width: 1024px) {
  :root {
    --aj-header-h: 84px;
  }
}

/* Honour the OS setting. Every animation in the theme is decorative. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --aj-t-fast: 1ms;
    --aj-t: 1ms;
    --aj-t-slow: 1ms;
  }
}