/* Hallmark · macrostructure: Workbench · theme: studied-DNA (source: https://www.usehallmark.com/examples/hum-07/) · paper: oklch(97% 0.012 95) · accents: pear oklch(86% 0.18 95), cyan oklch(66% 0.18 235) · display/body: Plus Jakarta Sans · mono: JetBrains Mono · studied: yes · DNA-source: url · design-system: design.md · designed-as-app */
:root {
  color-scheme: light;

  --sy-paper: oklch(97% 0.012 95);
  --sy-paper-2: oklch(94% 0.016 95);
  --sy-paper-3: oklch(91% 0.02 95);
  --sy-paper-raised: oklch(99% 0.008 95);
  --sy-ink: oklch(20% 0.012 250);
  --sy-ink-soft: oklch(34% 0.014 250);
  --sy-muted: oklch(43% 0.012 250);
  --sy-rule: oklch(79% 0.018 95);
  --sy-rule-strong: oklch(58% 0.018 250);

  --sy-pear: oklch(86% 0.18 95);
  --sy-pear-soft: oklch(93% 0.082 95);
  --sy-pear-deep: oklch(68% 0.16 95);
  --sy-cyan: oklch(66% 0.18 235);
  --sy-cyan-soft: oklch(93% 0.052 235);
  --sy-cyan-deep: oklch(40% 0.12 235);
  --sy-coral: oklch(68% 0.24 18);
  --sy-coral-soft: oklch(93% 0.055 18);
  --sy-coral-deep: oklch(40% 0.16 18);
  --sy-mint: oklch(80% 0.16 150);
  --sy-mint-soft: oklch(94% 0.045 150);
  --sy-mint-deep: oklch(40% 0.1 150);
  --sy-lavender: oklch(74% 0.16 305);
  --sy-lavender-soft: oklch(94% 0.04 305);

  --sy-focus: oklch(30% 0.14 235);
  --sy-danger: oklch(48% 0.19 22);
  --sy-danger-soft: oklch(94% 0.045 22);
  --sy-success: oklch(43% 0.12 150);
  --sy-success-soft: oklch(94% 0.04 150);
  --sy-on-brand: oklch(99% 0.008 95);
  --sy-transparent: oklch(97% 0.012 95 / 0);
  --sy-paper-veil: oklch(99% 0.008 95 / 0.72);
  --sy-paper-glass: oklch(99% 0.008 95 / 0.94);
  --sy-pear-glow: oklch(86% 0.18 95 / 0.16);
  --sy-pear-cast: oklch(76% 0.2 95 / 0.38);
  --sy-pear-shadow: oklch(68% 0.16 95 / 0.45);
  --sy-pear-shadow-soft: oklch(68% 0.16 95 / 0.42);
  --sy-cyan-ring: oklch(66% 0.18 235 / 0.18);
  --sy-cyan-ring-soft: oklch(66% 0.18 235 / 0.16);
  --sy-cyan-cast: oklch(48% 0.13 235 / 0.18);
  --sy-coral-ring: oklch(48% 0.19 22 / 0.14);
  --sy-coral-cast: oklch(51% 0.19 18 / 0.18);
  --sy-ink-shadow-6: oklch(20% 0.012 250 / 0.06);
  --sy-ink-shadow-8: oklch(20% 0.012 250 / 0.08);
  --sy-ink-shadow-10: oklch(20% 0.012 250 / 0.1);
  --sy-ink-scrim: oklch(20% 0.012 250 / 0.42);

  --sy-font-body: "Plus Jakarta Sans", "Avenir Next", ui-rounded, sans-serif;
  --sy-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --sy-text-xs: 0.75rem;
  --sy-text-sm: 0.875rem;
  --sy-text-base: 1rem;
  --sy-text-md: 1.125rem;
  --sy-text-lg: 1.25rem;
  --sy-text-xl: 1.5rem;
  --sy-text-2xl: 1.875rem;
  --sy-text-3xl: 2.5rem;

  --sy-space-3xs: 0.125rem;
  --sy-space-2xs: 0.25rem;
  --sy-space-xs: 0.5rem;
  --sy-space-sm: 0.75rem;
  --sy-space-md: 1rem;
  --sy-space-lg: 1.5rem;
  --sy-space-xl: 2rem;
  --sy-space-2xl-tight: 2.5rem;
  --sy-space-2xl: 3rem;
  --sy-space-3xl: 4rem;

  --sy-shell-inset: var(--sy-space-sm);
  --sy-shell-border: 2px;
  --sy-z-modal: 120;

  --sy-radius-xs: 0.5rem;
  --sy-radius-input: 0.75rem;
  --sy-radius-compact: 0.875rem;
  --sy-radius-card: 1.25rem;
  --sy-radius-stage: 1.875rem;
  --sy-radius-pill: 999px;

  --sy-ease-press: cubic-bezier(0.2, 0.7, 0.3, 1);
  --sy-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sy-ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --sy-dur-instant: 80ms;
  --sy-dur-fast: 140ms;
  --sy-dur-short: 220ms;
  --sy-dur-medium: 300ms;

  --sy-shadow-contact: 0 3px 0 oklch(20% 0.012 250 / 0.14);
  --sy-shadow-card: 0 3px 0 oklch(20% 0.012 250 / 0.14), 0 18px 38px -24px oklch(20% 0.012 250 / 0.12);
  --sy-shadow-raised: 0 5px 0 oklch(20% 0.012 250 / 0.14), 0 26px 46px -22px oklch(20% 0.012 250 / 0.13);
  --sy-shadow-float: 0 16px 38px -20px oklch(20% 0.012 250 / 0.25);

  --font: var(--sy-font-body);
  --display: var(--sy-font-body);
  --ink: var(--sy-ink);
  --ink-2: var(--sy-ink-soft);
  --muted: var(--sy-muted);
  --line: var(--sy-rule);
  --line-2: var(--sy-paper-2);
  --bg: var(--sy-paper);
  --surface: var(--sy-paper-raised);
  --red: var(--sy-coral);
  --red-d: var(--sy-coral-deep);
  --violet: var(--sy-lavender);
  --coral: var(--sy-coral);
  --amber: var(--sy-pear-deep);
  --green: var(--sy-mint-deep);
  --danger: var(--sy-danger);
  --radius: var(--sy-radius-compact);
  --radius-lg: var(--sy-radius-card);
  --shadow-sm: var(--sy-shadow-contact);
  --shadow-md: var(--sy-shadow-card);
  --shadow-pop: var(--sy-shadow-float);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --sy-paper: oklch(22% 0.016 250);
  --sy-paper-2: oklch(25% 0.018 250);
  --sy-paper-3: oklch(29% 0.02 250);
  --sy-paper-raised: oklch(32% 0.02 250);
  --sy-ink: oklch(95% 0.012 95);
  --sy-ink-soft: oklch(86% 0.014 95);
  --sy-muted: oklch(74% 0.014 95);
  --sy-rule: oklch(42% 0.02 250);
  --sy-rule-strong: oklch(66% 0.02 250);

  --sy-pear: oklch(79% 0.16 95);
  --sy-pear-soft: oklch(38% 0.08 95);
  --sy-pear-deep: oklch(69% 0.15 95);
  --sy-cyan: oklch(72% 0.15 235);
  --sy-cyan-soft: oklch(32% 0.06 235);
  --sy-cyan-deep: oklch(78% 0.11 235);
  --sy-coral: oklch(72% 0.19 18);
  --sy-coral-soft: oklch(34% 0.07 18);
  --sy-coral-deep: oklch(78% 0.13 18);
  --sy-mint: oklch(75% 0.13 150);
  --sy-mint-soft: oklch(33% 0.055 150);
  --sy-mint-deep: oklch(79% 0.1 150);
  --sy-lavender: oklch(76% 0.14 305);
  --sy-lavender-soft: oklch(34% 0.05 305);

  --sy-focus: oklch(82% 0.12 235);
  --sy-danger: oklch(72% 0.17 22);
  --sy-danger-soft: oklch(33% 0.06 22);
  --sy-success: oklch(76% 0.1 150);
  --sy-success-soft: oklch(33% 0.05 150);
  --sy-on-brand: oklch(20% 0.012 250);
  --sy-transparent: oklch(22% 0.016 250 / 0);
  --sy-paper-veil: oklch(25% 0.018 250 / 0.78);
  --sy-paper-glass: oklch(29% 0.02 250 / 0.94);
  --sy-pear-glow: oklch(79% 0.16 95 / 0.12);
  --sy-pear-cast: oklch(79% 0.16 95 / 0.24);
  --sy-pear-shadow: oklch(14% 0.012 250 / 0.52);
  --sy-pear-shadow-soft: oklch(14% 0.012 250 / 0.42);
  --sy-cyan-ring: oklch(72% 0.15 235 / 0.23);
  --sy-cyan-ring-soft: oklch(72% 0.15 235 / 0.18);
  --sy-cyan-cast: oklch(72% 0.15 235 / 0.18);
  --sy-coral-ring: oklch(72% 0.19 18 / 0.2);
  --sy-coral-cast: oklch(72% 0.19 18 / 0.18);
  --sy-ink-shadow-6: oklch(10% 0.01 250 / 0.16);
  --sy-ink-shadow-8: oklch(10% 0.01 250 / 0.2);
  --sy-ink-shadow-10: oklch(10% 0.01 250 / 0.28);
  --sy-ink-scrim: oklch(10% 0.01 250 / 0.72);

  --sy-shadow-contact: 0 3px 0 oklch(10% 0.01 250 / 0.42);
  --sy-shadow-card: 0 3px 0 oklch(10% 0.01 250 / 0.42), 0 18px 38px -24px oklch(10% 0.01 250 / 0.56);
  --sy-shadow-raised: 0 5px 0 oklch(10% 0.01 250 / 0.48), 0 26px 46px -22px oklch(10% 0.01 250 / 0.62);
  --sy-shadow-float: 0 16px 38px -20px oklch(10% 0.01 250 / 0.72);

  --ink: var(--sy-ink);
  --ink-2: var(--sy-ink-soft);
  --muted: var(--sy-muted);
  --line: var(--sy-rule);
  --line-2: var(--sy-paper-2);
  --bg: var(--sy-paper);
  --surface: var(--sy-paper-raised);
  --red: var(--sy-coral);
  --red-d: var(--sy-coral-deep);
  --violet: var(--sy-lavender);
  --coral: var(--sy-coral);
  --amber: var(--sy-pear-deep);
  --green: var(--sy-mint-deep);
  --danger: var(--sy-danger);
}