/* Dutavo design system — imported verbatim from the Claude Design project
   (fd866fc0-3ba6-4fb1-bd87-c59c8af02b15). Token values are the source of truth for
   colour, type, spacing, radii and elevation; do not fork them per page. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&display=swap");

:root{
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  --accent:#0e6e8c;
  --accent-700:#0a5670;
  --accent-800:#08404f;
  --accent-100:#d2e6ed;
  --accent-50:#eaf3f6;

  --ink:#171c1f;
  --ink-2:#495256;
  --ink-3:#7b8388;
  --ink-4:#a6acb0;

  --bg:#f2f4f5;
  --surface:#ffffff;
  --surface-2:#f9fafb;
  --bd:#e4e8ea;
  --bd-2:#d2d8db;

  --amber:#b98a2e;
  --blue:#3e6fc7;
  --violet:#7a5ac7;
  --rose:#c05563;

  --text-strong:var(--ink);
  --text-body:var(--ink-2);
  --text-muted:var(--ink-3);
  --text-faint:var(--ink-4);
  --surface-card:var(--surface);
  --surface-sunken:var(--bg);
  --border-hairline:var(--bd);
  --border-strong:var(--bd-2);
  --success:var(--accent);
  --danger:var(--rose);
  --warning:var(--amber);
  --info:var(--blue);

  --fs-display:46px;
  --fs-h1:34px;
  --fs-h2:24px;
  --fs-h3:19px;
  --fs-lg:16px;
  --fs-body:14px;
  --fs-sm:13px;
  --fs-xs:12.5px;
  --fs-2xs:11px;

  --lh-tight:1.05;
  --lh-heading:1.2;
  --lh-body:1.6;
  --lh-ui:1.45;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  --tracking-tight:-.02em;
  --tracking-label:.06em;
  --tracking-caps:.14em;

  --space-1:4px;  --space-2:8px;  --space-3:10px; --space-4:12px;
  --space-5:14px; --space-6:16px; --space-8:18px; --space-10:22px;
  --space-12:26px; --space-16:40px; --space-20:52px;

  --radius-sm:8px;
  --radius-md:9px;
  --radius-field:var(--radius-md);
  --field-height:38px;
  --field-padding-x:var(--space-4);
  --field-border:var(--border-strong);
  --field-background:var(--surface-card);
  --field-color:var(--text-strong);
  --field-placeholder:var(--text-faint);
  --field-font-size:var(--fs-body);
  --radius-lg:14px;
  --radius-xl:18px;
  --radius-pill:20px;
  --radius-round:50%;

  --shadow-btn:0 1px 2px rgba(14,110,140,.35);
  --shadow-xs:0 1px 2px rgba(23,28,31,.05);
  --shadow-sm:0 1px 3px rgba(23,28,31,.08);
  --shadow-md:0 6px 20px rgba(23,28,31,.10);
  --shadow-lg:0 18px 48px rgba(23,28,31,.18);
  --focus-ring:0 0 0 3px var(--accent-50);

  --ease:cubic-bezier(.2,.6,.2,1);
  --dur-fast:.12s;
  --dur:.18s;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-700);text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent-100)}

@keyframes dvfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dvpop{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dvtoastin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}