:root {
  --paper: #f3f3f5;
  --card: #ffffff;
  --ink: #101014;
  --ink-2: #55555f;
  --ink-3: #8a8a95;
  --line: #e6e6ea;
  --line-2: #d6d6dc;

  --accent: #5b82f6;
  --accent-deep: #3a63e8;
  --accent-soft: #e9eefe;

  --tint-lav: #eceaf7;
  --tint-mint: #dff1ec;
  --tint-sky: #e3eaf5;
  --tint-sand: #f6efe3;
  --tint-blush: #f8e9e6;

  --success: #12996b;
  --alert: #d93b3b;

  --font-display: "Inter Tight", system-ui, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, sans-serif;

  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-15: 0.9375rem;
  --t-17: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --t-21: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  --t-28: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --t-40: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  --t-64: clamp(2.25rem, 1.4rem + 3.7vw, 4rem);

  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --section: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);
  --shell: 84rem;

  --r-8: 8px;
  --r-14: 14px;
  --r-20: 20px;
  --r-28: 28px;

  --dur: 200ms;
  --dur-slow: 560ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-card: 0 10px 30px -14px rgb(16 16 20 / 0.18);
  --shadow-lift: 0 22px 48px -20px rgb(16 16 20 / 0.28);

  --dots: radial-gradient(circle at 1px 1px, rgb(16 16 20 / 0.07) 1px, transparent 0) 0 0 / 20px 20px;
  --hatch: repeating-linear-gradient(-45deg, rgb(16 16 20 / 0.035) 0 1px, transparent 1px 9px);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --z-header: 30;
  --z-modal: 40;
  --z-toast: 50;
}