/* Look: heavy frosted glass over the dish still washed in the palette accent; serif numbers, mono labels. Sets no palette colour. */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@300;400&display=swap");

:root {
  --font-body: 300 15px/1.6 "Inter", system-ui, sans-serif;
  --font-h1: 400 clamp(28px, 4vw, 40px)/1.15 "EB Garamond", Georgia, serif;
  --font-label: 400 11px/1.4 "JetBrains Mono", ui-monospace, monospace;
  --font-stamp: 300 12px/1.4 "JetBrains Mono", ui-monospace, monospace;
  --font-num: 400 min(40px, 23cqw)/1.1 "EB Garamond", Georgia, serif;
  --font-small: 300 13px/1.5 "Inter", system-ui, sans-serif;
  --font-axis: 300 11px/1.4 "JetBrains Mono", ui-monospace, monospace;
  --font-table: 300 14px/1.5 "Inter", system-ui, sans-serif;
  --font-th: 400 11px/1.4 "JetBrains Mono", ui-monospace, monospace;
  --font-button: 400 13px/1.3 "Inter", system-ui, sans-serif;
  --font-pills: 300 12px/1.4 "JetBrains Mono", ui-monospace, monospace;

  --label-case: uppercase;
  --label-tracking: .22em;
  --label-color: var(--accent);
  --stamp-tracking: .04em;
  --axis-tracking: .06em;
  --th-case: uppercase;
  --th-tracking: .12em;
  --th-on: var(--accent);
  --th-bg: transparent;
  --pills-tracking: .06em;
  --num-color: color-mix(in srgb, var(--t1) 50%, #ffffff);
  --num-glow: none;

  --page-max: 1080px;
  --page-pad: 56px 16px 120px;
  --page-pad-wide: 88px 40px 160px;
  --section-gap: 84px;
  --label-gap: 20px;
  --tiles-top: 48px;
  --gap: 16px;
  --tile-pad: 24px;
  --tile-label-gap: 4px;
  --chart-pad: 26px 26px 18px;
  --chart-h: 170px;
  --axis-gap: 10px;
  --cell-pad: 13px 18px;
  --thumb-pad: 8px 18px;
  --empty-pad: 26px;
  --card-pad: 10px;
  --meta-margin: 10px 4px;
  --button-pad: 9px;
  --pills-margin: -6px 0 20px;

  --radius-panel: 18px;
  --radius-media: 12px;
  --radius-thumb: 10px;
  --radius-button: 12px;

  --panel-bg: color-mix(in srgb, var(--t1) 7%, transparent);
  --panel-border: 1px solid color-mix(in srgb, var(--border) 18%, transparent);
  --glass: blur(30px) saturate(1.25);
  --panel-shadow: 0 30px 60px -36px rgba(0, 0, 0, .6);
  --menu-bg: color-mix(in srgb, var(--bg-base) 80%, transparent);
  --chart-line: var(--accent);
  --chart-core: color-mix(in srgb, var(--accent) 35%, var(--t1));
  --thumb-bg: color-mix(in srgb, var(--t1) 8%, transparent);
  --media-bg: #000;
  --button-border: color-mix(in srgb, var(--border) 18%, transparent);
  --button-bg: color-mix(in srgb, var(--t1) 5%, transparent);

  --bg-image: url("dish-still.jpg");
  --bg-bleed: -12%;
  --bg-image-filter: blur(30px) saturate(.75) brightness(.85);
  --bg-tint: color-mix(in srgb, var(--accent) 28%, transparent);
  --bg-tint-blend: color;
  --bg-overlay: radial-gradient(70% 50% at 80% 10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
                linear-gradient(180deg, color-mix(in srgb, var(--bg-base) 25%, transparent),
                color-mix(in srgb, var(--bg-base) 60%, transparent) 60%, color-mix(in srgb, var(--bg-base) 80%, transparent));
  --drift-duration: 60s;
  --drift-x: -3vw;
  --drift-y: 5vh;
}