/* Aqualyt — Two-Color Design System
 * Ink:   #0B262A  (text, dark sections, primary marks)
 * Mint:  #3FCBB5  (signal, accents, CTA surface)
 * Cream: #F2EDE2  (paper background, neutral)
 */
:root {
  /* The two brand colors */
  --color-ink:    #0B262A;
  --color-mint:   #3FCBB5;
  --color-cream:  #F2EDE2;

  /* Surfaces */
  --bg-page:      var(--color-cream);
  --bg-page-alt:  #ECE5D2;
  --bg-elevated:  #FBF7EC;
  --bg-deep:      var(--color-ink);
  --bg-deep-alt:  var(--color-ink);
  --bg-sand:      var(--color-mint);

  /* Aliases (kept so site.css doesn't need rewriting) */
  --color-deep:    var(--color-ink);
  --color-petrol:  var(--color-ink);
  --color-aqua:    var(--color-mint);
  --color-moss:    var(--color-mint);
  --color-sand:    var(--color-mint);

  /* Text on light */
  --text-strong:  var(--color-ink);
  --text-body:    color-mix(in srgb, var(--color-ink) 82%, transparent);
  --text-mute:    color-mix(in srgb, var(--color-ink) 60%, transparent);
  --text-faint:   color-mix(in srgb, var(--color-ink) 40%, transparent);

  /* Text on dark */
  --text-on-dark:        var(--color-cream);
  --text-on-dark-soft:   color-mix(in srgb, var(--color-cream) 72%, transparent);
  --text-on-dark-mute:   color-mix(in srgb, var(--color-cream) 50%, transparent);

  /* Lines */
  --rule:          color-mix(in srgb, var(--color-ink) 16%, transparent);
  --rule-soft:     color-mix(in srgb, var(--color-ink) 10%, transparent);
  --rule-on-dark:  color-mix(in srgb, var(--color-cream) 18%, transparent);

  /* Typography */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout */
  --container-max:    78rem;
  --container-narrow: 56rem;
  --container-px:     1.5rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 14px;

  --section-py:    7rem;
  --section-py-sm: 5rem;
}

@media (max-width: 720px) {
  :root {
    --section-py:    4.5rem;
    --section-py-sm: 3.5rem;
    --container-px:  1.25rem;
  }
}