@layer tokens, base, components, layout, sections, motion, utilities;

@layer tokens {
  :root {
    --color-dew: #f4f8ec;
    --color-sprout: #deedc8;
    --color-chamomile: #fbf0cb;
    --color-sun: #f7e6b0;
    --color-apricot: #fbe6c2;
    --color-petal: #fbfcf5;
    --color-pollen: #f5df95;
    --color-cream: #fffdf4;
    --color-evergreen: #14392b;
    --color-evergreen-deep: #0e2c20;
    --color-evergreen-night: #0a241a;
    --color-grove: #184131;
    --color-grove-warm: #1e4a38;
    --color-grove-sage: #22523d;
    --color-grove-field: #1f4a39;
    --color-fern: #245c38;
    --color-fern-light: #2a6640;
    --color-leaf: #2b6a3c;
    --color-leaf-deep: #1d5130;
    --color-leaf-ink: #2d6734;
    --color-leaf-fresh: #86ba5c;
    --color-leaf-light: #a9d67f;
    --color-stamen: #e9c25a;
    --color-stamen-light: #f1d27e;
    --color-stamen-bright: #f0cf73;
    --color-persimmon: #a4431a;
    --color-persimmon-deep: #963c15;
    --color-persimmon-soft: #d98150;
    --color-forest: #15271d;
    --color-forest-soft: #33453a;
    --color-forest-muted: #45564b;
    --color-lichen: #b4c9a2;
    --color-mist: #f5f9ec;
    --color-error: #b0261c;
    --color-error-light: #f3a08e;
    --color-white: #ffffff;

    --surface-page: var(--color-dew);
    --surface-warm: var(--color-chamomile);
    --surface-sage: var(--color-sprout);
    --surface-dark: var(--color-evergreen);
    --surface-plate: var(--color-evergreen-deep);
    --surface-plate-inverse: var(--color-petal);
    --surface-raised: rgb(244 248 236 / 0.95);
    --surface-frosted: rgb(244 248 236 / 0.92);
    --surface-field: var(--color-white);
    --surface-bubble: var(--color-pollen);

    --ink: var(--color-forest);
    --ink-soft: var(--color-forest-soft);
    --ink-muted: var(--color-forest-muted);
    --ink-inverse: var(--color-dew);
    --ink-on-dark: var(--color-mist);
    --ink-on-dark-soft: rgb(245 249 236 / 0.88);
    --ink-on-dark-muted: rgb(245 249 236 / 0.78);
    --ink-on-accent: var(--color-white);
    --ink-accent: var(--color-persimmon);
    --ink-sage: var(--color-leaf-ink);
    --ink-error: var(--color-error);

    --accent: var(--color-leaf);
    --accent-strong: var(--color-leaf-deep);
    --accent-soft: var(--color-leaf-fresh);
    --accent-wash: rgb(134 186 92 / 0.14);
    --accent-tint: var(--color-chamomile);
    --accent-mark: var(--color-sun);
    --accent-halo: rgb(43 106 60 / 0.16);
    --focus-ring: var(--color-leaf);
    --focus-ring-on-dark: var(--color-stamen);
    --error-halo: rgb(176 38 28 / 0.14);
    --error-wash: rgb(176 38 28 / 0.06);

    --line-faint: rgb(21 39 29 / 0.07);
    --line: rgb(21 39 29 / 0.15);
    --line-strong: rgb(21 39 29 / 0.32);
    --line-control: rgb(21 39 29 / 0.56);
    --line-on-dark: rgb(245 249 236 / 0.18);
    --line-sage: rgb(45 103 52 / 0.3);
    --line-rose: rgb(217 129 80 / 0.6);
    --line-champagne: rgb(233 194 90 / 0.55);

    --scrim: rgb(14 44 32 / 0.58);
    --scrim-statement: linear-gradient(90deg, var(--color-evergreen) 0%, rgb(20 57 43 / 0.74) 38%, rgb(20 57 43 / 0.16) 100%);
    --scrim-statement-mobile: linear-gradient(180deg, rgb(20 57 43 / 0.6) 0%, rgb(20 57 43 / 0.94) 100%);

    --font-display: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Georgia, serif;
    --font-text: "Hanken Grotesk", "Hanken Grotesk Fallback", "Segoe UI", Arial, sans-serif;

    --weight-display: 500;
    --weight-heading: 600;
    --weight-light: 400;
    --weight-text: 450;
    --weight-medium: 600;
    --weight-strong: 600;

    --text-2xs: 0.8125rem;
    --text-xs: 0.875rem;
    --text-sm: 0.9375rem;
    --text-ui: 1rem;
    --text-base: clamp(1.0625rem, 1.03rem + 0.14vw, 1.125rem);
    --text-md: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
    --text-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
    --text-xl: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
    --text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
    --text-3xl: clamp(2.375rem, 1.6rem + 3.3vw, 4.5rem);
    --text-quote: clamp(2rem, 1.3rem + 3vw, 4.125rem);
    --text-display: clamp(3rem, 1rem + 7.4vw, 7.75rem);

    --leading-display: 0.98;
    --leading-tight: 1.04;
    --leading-title: 1.14;
    --leading-snug: 1.3;
    --leading-body: 1.65;
    --tracking-label: 0.16em;
    --tracking-display: -0.028em;
    --tracking-title: -0.016em;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: 3rem;
    --space-2xl: clamp(3rem, 2rem + 4vw, 5rem);
    --space-3xl: clamp(4rem, 2.5rem + 6vw, 7.5rem);
    --space-section: clamp(4.5rem, 2.8rem + 5.6vw, 8.5rem);

    --gutter: clamp(1rem, 0.35rem + 2.8vw, 3rem);
    --grid-gap: clamp(1rem, 0.4rem + 2.4vw, 2.5rem);
    --container-max: 84rem;
    --utility-height: 0rem;
    --header-height: 4.5rem;
    --quick-bar-height: 4rem;
    --margin-plate-row: 2.75rem;
    --margin-plate-width: 9.75rem;

    --radius-xs: 2px;
    --radius-s: 4px;
    --radius-m: 10px;
    --radius-pill: 999px;
    --radius-arch: 999px 999px 0 0;

    --shadow-card: 0 18px 40px -28px rgb(20 57 43 / 0.42);
    --shadow-plate: 0 28px 50px -26px rgb(14 44 32 / 0.6);
    --shadow-panel: 0 40px 70px -48px rgb(20 57 43 / 0.5);
    --shadow-dialog: 0 50px 100px -40px rgb(14 44 32 / 0.62);
    --shadow-bubble: drop-shadow(0 14px 18px rgb(14 44 32 / 0.2)) drop-shadow(0 2px 3px rgb(14 44 32 / 0.12));

    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 180ms;
    --duration-base: 320ms;
    --duration-slow: 700ms;
    --duration-reveal: 1200ms;
    --duration-draw: 1800ms;

    --z-margin-plate: 54;
    --z-quick-bar: 55;
    --z-header: 60;
    --z-panel: 61;
    --z-skip: 200;
  }

  @media (min-width: 64em) {
    :root {
      --utility-height: 2.5rem;
      --header-height: 5.25rem;
    }
  }

  @media (min-width: 75em) {
    :root {
      --margin-plate-width: 12.5rem;
    }
  }

  .tone-light {
    --surface-page: var(--color-chamomile);
    --surface-warm: var(--color-sun);
    --surface-sage: var(--color-sprout);
    --surface-raised: rgb(251 240 203 / 0.95);
    --surface-frosted: rgb(251 240 203 / 0.92);
    --surface-field: var(--color-cream);

    --ink-inverse: var(--color-chamomile);
    --ink-accent: #9c3f17;
    --ink-sage: #2a6231;
    --ink-error: #a8241a;

    --accent-soft: var(--color-persimmon-soft);
    --accent-wash: rgb(233 194 90 / 0.18);
    --accent-tint: #fdf7e3;
    --line-rose: rgb(196 104 56 / 0.6);

    --shadow-card: 0 18px 40px -28px rgb(92 70 20 / 0.36);
    --shadow-panel: 0 40px 70px -48px rgb(92 70 20 / 0.4);

    color-scheme: light;
  }

  .tone-dark {
    --surface-page: var(--color-grove);
    --surface-warm: var(--color-grove-warm);
    --surface-sage: var(--color-grove-sage);
    --surface-dark: var(--color-evergreen-deep);
    --surface-plate: var(--color-evergreen-night);
    --surface-raised: rgb(24 65 49 / 0.96);
    --surface-frosted: rgb(24 65 49 / 0.95);
    --surface-field: var(--color-grove-field);

    --ink: var(--color-mist);
    --ink-soft: var(--ink-on-dark-soft);
    --ink-muted: var(--ink-on-dark-muted);
    --ink-inverse: var(--color-grove);
    --ink-on-accent: var(--color-evergreen-deep);
    --ink-accent: var(--color-stamen);
    --ink-sage: var(--color-leaf-light);
    --ink-error: var(--color-error-light);

    --accent: var(--color-stamen);
    --accent-strong: var(--color-stamen-light);
    --accent-soft: var(--color-leaf-fresh);
    --accent-wash: rgb(169 214 127 / 0.12);
    --accent-tint: rgb(169 214 127 / 0.2);
    --accent-mark: rgb(233 194 90 / 0.3);
    --accent-halo: rgb(233 194 90 / 0.22);
    --focus-ring: var(--color-stamen);

    --line-faint: rgb(245 249 236 / 0.07);
    --line: rgb(245 249 236 / 0.16);
    --line-strong: rgb(245 249 236 / 0.32);
    --line-control: rgb(245 249 236 / 0.52);
    --line-sage: rgb(169 214 127 / 0.34);
    --line-rose: rgb(233 194 90 / 0.5);

    --shadow-card: 0 18px 40px -26px rgb(0 0 0 / 0.5);
    --shadow-panel: 0 40px 70px -44px rgb(0 0 0 / 0.55);

    color-scheme: dark;
  }
}