/* Mula design tokens, v2.1 (D-032 grammar, D-033 amendments). Source of truth: docs/DESIGN.md.
   Light only for now (D-035). A dark palette comes back as a separate token block when there is a reason for one.
   Components style through tokens, never literals. */

:root {
  --paper: #FFFFFF;
  --paper-2: #FFFFFF;
  --paper-3: #F4F7F6;
  --band-mint: #EEF6F3;
  --band-peach: #FFF5EE;
  --ink: #0A0A0A;
  --ink-2: #666666;
  --line: #E6E9E8;
  --teal: #026E78;
  --teal-hover: #025C64;
  --teal-ink: #FFFFFF;
  --teal-soft: rgba(2, 110, 120, 0.10);
  --mint: #2E9C80;
  --coral: #D9704A;
  --coral-text: #C9563A;
  --tint-mint: linear-gradient(160deg, #E4F3EE 0%, #F7FBF9 100%);
  --tint-peach: linear-gradient(160deg, #FBEBE0 0%, #FFF8F3 100%);
  --panel-teal: linear-gradient(150deg, #7FC2B7 0%, #CFE8E2 100%);
  --panel-peach: linear-gradient(150deg, #F2C4A8 0%, #FBE7DB 100%);
  --card-shadow: 0 8px 30px rgba(10, 10, 10, 0.08);
  --card-shadow-hover: 0 14px 40px rgba(10, 10, 10, 0.12);
  /* Glass (D-039, after Apple's Liquid Glass). Two contexts: light (over the page)
     and clear (over a photo). The rim is a masked 1px gradient, never a border. */
  --glass-light: rgba(255, 255, 255, 0.58);
  --glass-light-top: rgba(255, 255, 255, 0.30);
  --glass-clear: rgba(255, 255, 255, 0.12);
  --glass-blur-light: blur(16px) saturate(180%) brightness(1.04);
  --glass-blur-clear: blur(14px) saturate(180%) brightness(1.08);
  --rim-light: linear-gradient(160deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 255, 255, 0.40) 100%);
  --rim-clear: linear-gradient(160deg, rgba(255, 255, 255, 0.70) 0%, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.04) 62%, rgba(255, 255, 255, 0.32) 100%);
  --sheen: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0) 58%);
  --glass-shadow-light: 0 8px 28px rgba(10, 10, 10, 0.08);
  --glass-shadow-dark: 0 12px 32px rgba(0, 0, 0, 0.28);
  --ink-on-clear: #F5F7F6;
  --ink-on-clear-2: rgba(245, 247, 246, 0.90);
  --ink-glass-2: #3E4A48;
  --brand-mint: #59BDA2;
  --mint-ink: #06181A;
  --wash-mint: linear-gradient(110deg, #7AD2BA 0%, #59BDA2 45%, #3DAE99 100%);
  --wash-teal: linear-gradient(110deg, #026E78 0%, #1E8F86 55%, #59BDA2 100%);
  --wash-white: linear-gradient(110deg, #FFFFFF 0%, #E6F4EF 55%, #D3EDE3 100%);
  --focus: rgba(2, 110, 120, 0.40);

  --font-display: "Archivo", "Inter", -apple-system, sans-serif;
  --font: "Inter", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --text-13: 0.8125rem;
  --text-15: 0.9375rem;
  --text-17: 1.0625rem;
  --text-18: 1.125rem;
  --text-22: 1.375rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-36: 2.25rem;
  --text-42: 2.625rem;
  --text-60: 3.75rem;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;

  --radius-btn: 6px;
  --radius-input: 8px;
  --radius-float: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-pill: 32px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-hover: 160ms;
  --dur-reveal: 240ms;
  --dur-moment: 420ms;

  --col: 1120px;
}