:root {
  /* Tidelight environment */
  --canvas-warm: #ece2de;
  --canvas-cool: #d8dfe9;
  --canvas-cloud: #f4efed;
  --ink-primary: #17151b;
  --ink-secondary: #625d68;
  --ink-inverse: #fffdfa;

  /* Accent light */
  --accent-aqua: #45d9d2;
  --accent-violet: #7657f6;
  --accent-coral: #ff8eae;
  --accent-blue: #8bb7ff;
  --signal-success: #3bcb77;
  --signal-warning: #e2a548;
  --signal-error: #cf4862;

  /* Parent surfaces */
  --glass-parent-bg: rgba(248, 247, 246, 0.27);
  --glass-parent-bg-strong: rgba(245, 244, 245, 0.42);
  --glass-parent-border: rgba(255, 255, 255, 0.62);
  --glass-parent-edge-cool: rgba(176, 208, 236, 0.36);
  --glass-reading-bg: rgba(252, 250, 249, 0.76);
  --glass-reading-border: rgba(255, 255, 255, 0.78);

  /* Floating sea glass */
  --glass-aqua-bg: rgba(69, 217, 210, 0.44);
  --glass-aqua-edge: rgba(183, 255, 250, 0.82);
  --glass-violet-bg: rgba(118, 87, 246, 0.58);
  --glass-violet-edge: rgba(216, 202, 255, 0.88);
  --glass-coral-bg: rgba(255, 142, 174, 0.42);
  --glass-coral-edge: rgba(255, 224, 232, 0.84);
  --glass-blue-bg: rgba(139, 183, 255, 0.38);
  --glass-blue-edge: rgba(221, 235, 255, 0.88);
  --glass-pearl-bg: rgba(255, 252, 250, 0.72);
  --glass-pearl-edge: rgba(255, 255, 255, 0.92);
  --media-well-bg: #171a26;

  /* Refraction and shadow */
  --shadow-parent: 0 34px 76px rgba(54, 48, 62, 0.2),
    0 10px 24px rgba(58, 71, 92, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(128, 155, 184, 0.2);
  --shadow-float: 0 18px 28px rgba(61, 54, 74, 0.23),
    0 6px 10px rgba(55, 62, 80, 0.13),
    inset 0 2px 1px rgba(255, 255, 255, 0.56),
    inset 0 -5px 10px rgba(63, 51, 101, 0.13);
  --shadow-float-hover: 0 23px 34px rgba(61, 54, 74, 0.25),
    0 8px 13px rgba(55, 62, 80, 0.15),
    inset 0 2px 1px rgba(255, 255, 255, 0.66),
    inset 0 -5px 11px rgba(63, 51, 101, 0.16);
  --glow-aqua: 0 14px 28px rgba(69, 217, 210, 0.28);
  --glow-violet: 0 14px 28px rgba(118, 87, 246, 0.25);
  --glow-coral: 0 14px 28px rgba(255, 142, 174, 0.23);

  /* Typography */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-label: clamp(0.72rem, 0.7rem + 0.1vw, 0.82rem);
  --font-size-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --font-size-product: clamp(1.7rem, 1.25rem + 2vw, 3rem);
  --font-size-section: clamp(2.1rem, 1.35rem + 3.4vw, 4.5rem);
  --font-size-hero: clamp(3.3rem, 1.6rem + 7vw, 7.4rem);
  --line-tight: 0.94;
  --line-heading: 1.03;
  --line-body: 1.6;
  --reading-width: 68ch;

  /* Layout */
  /* One shared page shell. 1180px left roughly a third of a 1877px viewport
     empty on each side; the content now takes 86–92% of large screens while
     the circuitry still frames it. */
  --page-max: 1560px;
  --page-gutter: clamp(20px, 4.5vw, 72px);
  --container-wide: var(--page-max);
  --container-reading: 760px;
  --gutter: var(--page-gutter);
  --space-1: 0.375rem;
  --space-2: 0.625rem;
  --space-3: 0.875rem;
  --space-4: 1.25rem;
  --space-5: 1.75rem;
  --space-6: 2.5rem;
  --space-7: 3.5rem;
  --space-8: 5rem;
  --space-9: 7rem;

  /* Shape */
  --radius-pill: 999px;
  --radius-control: 22px;
  --radius-card: 30px;
  --radius-tray: 42px;
  --border-hairline: 1px;

  /* Motion */
  --ease-glass: cubic-bezier(0.2, 0.75, 0.25, 1);
  --duration-fast: 160ms;
  --duration-medium: 260ms;
  --duration-slow: 520ms;
  --lift-rest: translateY(0);
  --lift-hover: translateY(-4px);
  --lift-pressed: translateY(1px);

  /* Accessibility */
  --focus-ring: #174f9b;
  --focus-halo: rgba(255, 255, 255, 0.9);
}

@media (max-width: 720px) {
  :root {
    --radius-control: 18px;
    --radius-card: 24px;
    --radius-tray: 30px;
    --space-8: 4rem;
    --space-9: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-medium: 0ms;
    --duration-slow: 0ms;
    --lift-hover: translateY(0);
    --lift-pressed: translateY(0);
  }
}