/*
 * Marine Science Visual Language
 *
 * Global visual primitives only.
 *
 * Rules:
 * - no page-specific selectors
 * - no component layout
 * - only values intended to change globally
 * - add tokens only after repeated real usage
 * - platform implementations may differ while preserving token meaning
 */

:root {
  color-scheme: dark;

  /* Anemone's lower-left cyan water, shifted gently toward the turtle's blue;
     preserve a readable dark-water floor instead of fading to black. */
  --abyss: #0b3548;
  --deep: #0c4657;
  --surface: #0d5467;
  --surface-soft: #176778;
  --panel: #123e50;

  --text: #f5f4eb;
  --muted: #d7e5df;
  --line: rgba(231, 242, 238, 0.24);

  --sea: #b7efdf;
  --sand: #eddfbd;

  /* Shared ink/accent channels; navigation and card materials remain independent. */
  --ink-rgb: 11, 53, 72;
  --sea-rgb: 183, 239, 223;
  /* Marine Depth: accepted reflection pattern over the older dark blue-green field. */
  --depth-surface: #0d5467;
  --depth-midwater: #0c4c5e;
  --depth-light: rgba(91, 175, 213, 0.07);
  --depth-beam: rgba(84, 167, 212, 0.085);
  --depth-glint: rgba(157, 201, 224, 0.02);
  /* Deeper water shadow shared by the three diffuse moving patches. */
  --depth-shadow-rgb: 3, 28, 43;
  --depth-drift-period: 20s;
  --depth-refraction-period: 26s;

  --content: 76rem;
  --reading: 46rem;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 5rem;
  --space-8: 8rem;

  --radius: 1.5rem;
  --radius-lg: 2rem;
  --shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.25);

  /* Bounded glass surfaces; solid defaults also work without filter support. */
  --glass-background: var(--panel);
  --glass-filter: none;
  /* Broad editorial panels share the same material, with a heavier shadow. */
  --slab-background: var(--panel);
  --slab-shadow:
    inset 0 1px 0 rgba(227, 241, 247, 0.2),
    inset 0 -1px 0 rgba(var(--sea-rgb), 0.08),
    0 1.5rem 4rem rgba(var(--ink-rgb), 0.38);
  --navigation-background: var(--deep);
  --navigation-filter: none;
  --navigation-shadow:
    inset 0 -1px 0 rgba(var(--sea-rgb), 0.12),
    0 0.35rem 1.25rem rgba(var(--ink-rgb), 0.1);
  --glass-shadow:
    inset 0 1px 0 rgba(227, 241, 247, 0.1),
    0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  --ambient-layer-display: block;

  /* Typography: installed platform fonts, no late network font swap. */
  --font-ui:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-editorial:
    Georgia,
    "Times New Roman",
    serif;

  /* Public typography roles: compact enough that photography remains primary. */
  --type-display: clamp(2.1rem, 1.75rem + 1.4vw, 3rem);
  --type-section: clamp(1.65rem, 1.4rem + 0.9vw, 2.2rem);
  --type-subhead: clamp(1.25rem, 1.12rem + 0.4vw, 1.5rem);
  --type-pull: clamp(1.6rem, 1.35rem + 1vw, 2.3rem);

  /* Motion */
  --motion-fast: 180ms;
  --motion-medium: 300ms;
  --motion-slow: 700ms;
  --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-background:
      linear-gradient(145deg, rgba(231, 242, 238, 0.06), transparent),
      rgba(18, 62, 80, 0.88);
    --glass-filter: blur(12px) saturate(115%);
    --slab-background:
      linear-gradient(145deg, rgba(231, 242, 238, 0.075), transparent 65%),
      rgba(12, 57, 76, 0.8);
    /* Navigation needs a more translucent backdrop than reading cards. */
    --navigation-background: rgba(11, 53, 72, 0.62);
    --navigation-filter: blur(18px);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glass-background: var(--panel);
    --glass-filter: none;
    --slab-background: var(--panel);
    --navigation-background: var(--deep);
    --navigation-filter: none;
    --navigation-shadow: none;
    --ambient-layer-display: none;
  }
}

@media (forced-colors: active) {
  :root {
    --glass-background: Canvas;
    --glass-filter: none;
    --slab-background: Canvas;
    --slab-shadow: none;
    --navigation-background: Canvas;
    --navigation-filter: none;
    --navigation-shadow: none;
    --glass-shadow: none;
    --ambient-layer-display: none;
  }
}