@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap");
/* Welly design tokens, copied verbatim from welly-design/tokens (fonts, colors, typography, spacing,
   radius, shadow, motion, base). Update by re-copying; don't edit here. */
/* Brand font is "Vartex" (per brand guide) — no files provided. Outfit is the closest Google Fonts geometric match; swap the family here when Vartex files arrive. */
:root{--font-brand:"Vartex","Outfit",ui-sans-serif,system-ui,sans-serif;--font-display:var(--font-brand);--font-body:var(--font-brand);--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}

:root{
/* Brand (from brand guide p.6) */
--gold-50:oklch(97% 0.02 80);--gold-100:oklch(93% 0.05 80);--gold-200:oklch(86% 0.09 80);--gold-300:oklch(78% 0.12 78);--gold-400:oklch(70% 0.13 76);--gold-500:#B3842D;--gold-600:oklch(56% 0.12 74);--gold-700:oklch(48% 0.10 72);--gold-800:oklch(38% 0.08 70);--gold-900:oklch(28% 0.05 68);
--black:#000000;--white:#FFFFFF;
/* Neutrals — pure grey, no tint (brand is black/white/gold) */
--grey-50:#F7F7F7;--grey-100:#EFEFEF;--grey-200:#E1E1E1;--grey-300:#C9C9C9;--grey-400:#A3A3A3;--grey-500:#7A7A7A;--grey-600:#5C5C5C;--grey-700:#3F3F3F;--grey-800:#262626;--grey-900:#171717;--grey-950:#0A0A0A;
/* Semantic hues — same chroma family as gold */
--green-500:oklch(60% 0.13 150);--green-100:oklch(94% 0.05 150);--green-800:oklch(35% 0.08 150);
--red-500:oklch(58% 0.19 25);--red-100:oklch(94% 0.04 25);--red-800:oklch(36% 0.12 25);
--amber-500:oklch(75% 0.15 75);--amber-100:oklch(95% 0.05 80);--amber-800:oklch(40% 0.09 70);
--blue-500:oklch(58% 0.13 250);--blue-100:oklch(94% 0.03 250);--blue-800:oklch(36% 0.09 250);
/* Semantic aliases — LIGHT */
--surface-page:var(--white);--surface-card:var(--white);--surface-sunken:var(--grey-50);--surface-raised:var(--white);--surface-inverse:var(--black);--surface-overlay:rgba(0,0,0,.55);
--text-primary:var(--black);--text-secondary:var(--grey-600);--text-muted:var(--grey-400);--text-inverse:var(--white);--text-link:var(--gold-600);--text-on-accent:var(--white);
--border-subtle:var(--grey-200);--border-strong:var(--grey-300);--border-focus:var(--gold-500);
--accent:var(--gold-500);--accent-hover:var(--gold-600);--accent-active:var(--gold-700);--accent-soft:var(--gold-50);--accent-soft-fg:var(--gold-800);
--fg-1:var(--black);--fg-2:var(--grey-600);--fg-3:var(--grey-400);
--success:var(--green-500);--success-soft:var(--green-100);--success-fg:var(--green-800);
--danger:var(--red-500);--danger-soft:var(--red-100);--danger-fg:var(--red-800);
--warning:var(--amber-500);--warning-soft:var(--amber-100);--warning-fg:var(--amber-800);
--info:var(--blue-500);--info-soft:var(--blue-100);--info-fg:var(--blue-800);
--focus-ring:0 0 0 3px oklch(from var(--gold-500) l c h / .35);
color-scheme:light}
/* DARK */
[data-theme="dark"]{
--surface-page:var(--black);--surface-card:var(--grey-900);--surface-sunken:var(--grey-950);--surface-raised:var(--grey-800);--surface-inverse:var(--white);--surface-overlay:rgba(0,0,0,.7);
--text-primary:var(--white);--text-secondary:var(--grey-400);--text-muted:var(--grey-500);--text-inverse:var(--black);--text-link:var(--gold-300);--text-on-accent:var(--black);
--border-subtle:var(--grey-800);--border-strong:var(--grey-700);--border-focus:var(--gold-400);
--accent:var(--gold-400);--accent-hover:var(--gold-300);--accent-active:var(--gold-500);--accent-soft:oklch(from var(--gold-500) 22% 0.05 h);--accent-soft-fg:var(--gold-200);
--fg-1:var(--white);--fg-2:var(--grey-400);--fg-3:var(--grey-500);
--success-soft:oklch(25% 0.05 150);--success-fg:oklch(85% 0.12 150);
--danger-soft:oklch(26% 0.07 25);--danger-fg:oklch(82% 0.12 25);
--warning-soft:oklch(26% 0.05 75);--warning-fg:oklch(85% 0.12 80);
--info-soft:oklch(26% 0.05 250);--info-fg:oklch(84% 0.09 250);
color-scheme:dark}

:root{
--text-xs:12px;--text-sm:14px;--text-md:16px;--text-lg:18px;--text-xl:22px;--text-2xl:28px;--text-3xl:36px;--text-4xl:48px;--text-5xl:64px;
--leading-tight:1.1;--leading-snug:1.25;--leading-normal:1.5;--leading-relaxed:1.65;
--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--tracking-wordmark:.18em;--tracking-caps:.08em;--tracking-tight:-.02em;--tracking-display:-.01em;
/* Roles */
--type-display:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
--type-h1:var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
--type-h2:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
--type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
--type-body:var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);
--type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
--type-label:var(--weight-medium) var(--text-sm)/1.2 var(--font-body);
--type-caption:var(--weight-regular) var(--text-xs)/1.4 var(--font-body);
--type-eyebrow:var(--weight-semibold) var(--text-xs)/1.2 var(--font-body);
--type-wordmark:var(--weight-bold) var(--text-xl)/1 var(--font-display)}

:root{--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
--gutter-mobile:20px;--gutter-desktop:32px;--content-max:1120px;--content-narrow:640px;--app-max-mobile:480px;
--control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px;--touch-min:44px;--nav-h:56px;--tabbar-h:64px}

/* Sharp, geometric — echoes the faceted brand mark. Pill only for badges/tags. */
:root{--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;
--radius-control:var(--radius-sm);--radius-card:var(--radius-md);--radius-media:var(--radius-md);--radius-badge:var(--radius-xs);--radius-sheet:var(--radius-lg)}

/* Flat by default; shadows only for floating layers. Cards use a 1px border instead. */
:root{--shadow-none:none;--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 12px rgba(0,0,0,.10);--shadow-lg:0 12px 32px rgba(0,0,0,.16);--shadow-gold:0 8px 24px oklch(from var(--gold-500) l c h / .30)}
[data-theme="dark"]{--shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 4px 12px rgba(0,0,0,.6);--shadow-lg:0 12px 32px rgba(0,0,0,.7)}

:root{--dur-fast:120ms;/* @kind other */--dur-base:200ms;/* @kind other */--dur-slow:320ms;/* @kind other */--ease-standard:cubic-bezier(.2,0,0,1);/* @kind other */--ease-out:cubic-bezier(0,0,.2,1);/* @kind other */--ease-in:cubic-bezier(.4,0,1,1);/* @kind other */--transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);/* @kind other */--press-scale:.98;/* @kind other */}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms;/* @kind other */--dur-base:0ms;/* @kind other */--dur-slow:0ms;/* @kind other */}}

html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body);font-family:var(--font-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-color)}a:hover{color:var(--accent-hover);text-decoration:underline}
*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}