/*
 * Earth Science / Beatsmith design tokens
 *
 * Single source of truth for palette + typography across every page on
 * beatsmith.io. Values are extracted from two authoritative sources:
 *
 *   1. earthscience-icon.svg  — the app icon (defines the outer "brand"
 *      slate; being updated so the icon uses the runtime slate too).
 *   2. src/gui/EarthScienceLookAndFeel.cpp — the app's runtime palette
 *      (rack background, element colors, foreground accent).
 *
 * If the app palette changes, mirror the change here. Do NOT introduce
 * new colors on site pages without adding a token here first — that keeps
 * the site and the app visually aligned.
 *
 * The pages under web/install/ (ios.html, macos.html, 404.html) predate this
 * design system and each inline their own copy of these styles with an older
 * slate (`#575571`) and a hand-picked three-slate gradient. They are NOT
 * modified from here — they ship to testers and the deploy
 * (scripts/deploy-website.sh) uploads only web/install/, so they cannot link
 * /assets/*.css until that deploy also ships this directory.
 *
 * Decided: `#474459` (the runtime rack surface) is the target slate, and the
 * install trio migrates onto this file + base.css once the tester build is
 * not in flight. Site pages already align to *this* file.
 */

:root {
  /* ----- Slate (single structural surface color) ----- */
  --slate:           #474459; /* app rack surface — extracted from LookAndFeel::Colors::background.
                                 App icon is being aligned to the same value so the site, icon,
                                 and plugin editor all share one slate. */
  --surface-inset:   color-mix(in oklab, var(--slate), black 12%);
  --icon-ink:        #313045; /* deep glyph color inside icons — for high-contrast text on light */

  /* ----- Element colors (mirrors LookAndFeel::Colors::{earth,air,fire,water}) ----- */
  --earth:           #825B44;
  --air:             #A4D0E0;
  --fire:            #EB7475;
  --water:           #6DB5D5;

  /* ----- Accents ----- */
  --accent-fg:       #A3CFDF; /* app foreground blue — links, focus rings, kicker highlights */
  --coral:           #EB7475; /* alias of --fire — primary CTA (matches "fire" element) */

  /* ----- Text on dark (ios.html-parallel naming: ink / ink-soft / ink-faint) ----- */
  --ink:             #F5F3EE; /* primary text */
  --ink-soft:        #D8D6C8; /* subtitles / lede / muted body */
  --ink-faint:       #948FA3; /* eyebrow / footer / de-emphasised meta */
  --ink-hair:        rgba(255, 255, 255, 0.06); /* hairline separators */

  /* ----- Depth ----- */
  --shadow-cta:      0 18px 32px -18px rgba(235, 117, 117, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --shadow-cta-hover:0 22px 40px -18px rgba(235, 117, 117, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.22);

  /* ----- Radii ----- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-pill: 999px;

  /* ----- Typography (IBM Plex — matches ios.html's shipping choice) ----- */
  --sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Size ramp — matches ios.html conventions. */
  --fs-eyebrow:  11px;   /* uppercase mono top-of-page + section labels */
  --fs-fine:     10px;   /* footer fine print */
  --fs-body:     15px;
  --fs-subtitle: 17px;   /* under-h1 lede */
  --fs-version:  12px;   /* version chip */
  --fs-h2:       26px;
  --fs-h1-min:   52px;   /* clamp() floor — larger than my earlier tokens */
  --fs-h1-max:   88px;   /* clamp() ceiling */

  /* ----- Motion ----- */
  --dur-fast:   .15s;
  --dur-med:    .25s;
  --dur-breathe: 6s;   /* hero pill breathing cycle — from ios.html */
  --ease:       cubic-bezier(.2, .8, .2, 1);

  /* ----- Layout ----- */
  --content-max: 520px;  /* main column width — matches ios.html's <main> */
  --gutter:      24px;
  --safe-bottom: calc(56px + env(safe-area-inset-bottom));
}