/* Aurelio design system tokens: colors, typography, spacing, elevation, motion, recipes.
   Copied verbatim from the Claude Design "Aurelio Design Language" bundle of the website round (3 X 2026)
   so the site needs no @import. Keep in step with docs/claude-design-kit/tokens.css and Tokens.swift. */

/* ── tokens/colors.css ── */
/* Aurelio colour tokens — light appearance only. Values match Tokens.swift and the v4 mockups exactly. */
:root{
/* Surfaces */
--au-page:#efede8;
--au-canvas:#f7f5f2;
--au-porcelain:#fcfbf9;
--au-porcelain-well:#f5f3ef;
/* Ink */
--au-ink:#1b1b1f;
--au-ink-strong:#26241f;
--au-ink-soft:#3a3a3f;
--au-icon-stroke:#48484d;
--au-chevron-ink:#3d3d42;
--au-pill-ink:rgba(40,38,35,0.75);
/* Labels: rgb(60 60 67) at fixed opacities */
--au-label-rgb:60,60,67; /* @kind other */
--au-label-75:rgba(60,60,67,0.75);
--au-label-65:rgba(60,60,67,0.65);
--au-label-60:rgba(60,60,67,0.6);
--au-label-55:rgba(60,60,67,0.55);
--au-label-50:rgba(60,60,67,0.5);
--au-label-45:rgba(60,60,67,0.45);
--au-label-40:rgba(60,60,67,0.4);
--au-label-35:rgba(60,60,67,0.35);
--au-label-30:rgba(60,60,67,0.3);
--au-label-18:rgba(60,60,67,0.18);
--au-track:rgba(60,60,67,0.1);
/* Warm neutrals for edges and shadows */
--au-hairline:rgba(84,72,58,0.1);
--au-hairline-raised:rgba(84,72,58,0.12);
--au-divider:rgba(84,72,58,0.09);
--au-divider-detail:rgba(84,72,58,0.08);
--au-well-edge:rgba(84,72,58,0.06);
--au-row-press:rgba(84,72,58,0.05);
--au-shadow-rgb:64,54,42; /* @kind other */
--au-warm-shade-rgb:150,138,120; /* @kind other */
--au-hairline-rgb:84,72,58; /* @kind other */
/* Controls */
--au-switch-off:rgba(120,120,128,0.24);
--au-switch-on:#26241f;
--au-scrim:rgba(30,26,22,0.35);
--au-destructive:#d93a30;
/* Spectral palette — the only colour. Interaction + one key moment per screen. */
--au-pink:#ff8296;
--au-amber:#ffd782;
--au-mint:#8ce1af;
--au-sky:#82afff;
--au-violet:#c88cff;
--au-pink-rgb:255,130,150; /* @kind other */
--au-amber-rgb:255,215,130; /* @kind other */
--au-mint-rgb:140,225,175; /* @kind other */
--au-sky-rgb:130,175,255; /* @kind other */
--au-violet-rgb:200,140,255; /* @kind other */
/* Prism angle; DeviceTilt rewrites this from the gyroscope (pointer on desktop). Never animate it on a timer. */
--au-tilt:210deg; /* @kind other */
--au-spectrum:linear-gradient(90deg,rgba(255,130,150,0.55),rgba(255,215,130,0.5),rgba(140,225,175,0.46),rgba(130,175,255,0.55)); /* @kind color */
--au-spectrum-edge:linear-gradient(180deg,rgba(255,130,150,0.4),rgba(255,215,130,0.36),rgba(140,225,175,0.34),rgba(130,175,255,0.4)); /* @kind color */
--au-ring:conic-gradient(from var(--au-tilt),rgba(255,130,150,0.5),rgba(255,215,130,0.45),rgba(140,225,175,0.42),rgba(130,175,255,0.5),rgba(200,140,255,0.45),rgba(255,130,150,0.5)); /* @kind color */
--au-halo:linear-gradient(120deg,rgba(255,130,160,0.2),rgba(255,220,140,0.16),rgba(140,225,180,0.16),rgba(130,175,255,0.2)); /* @kind color */
--au-press-bloom:0 0 22px rgba(255,170,190,0.35),0 0 22px rgba(150,190,255,0.3); /* @kind shadow */
--au-press-bloom-small:0 0 18px rgba(255,170,190,0.35),0 0 18px rgba(150,190,255,0.3); /* @kind shadow */
--au-backdrop:radial-gradient(42% 34% at 22% 16%,rgba(255,198,208,0.11),transparent 70%),radial-gradient(38% 30% at 82% 26%,rgba(184,209,255,0.11),transparent 70%),radial-gradient(44% 36% at 28% 78%,rgba(203,240,214,0.1),transparent 70%),radial-gradient(36% 30% at 78% 86%,rgba(255,237,189,0.1),transparent 70%); /* @kind color */
--au-backdrop-rich:radial-gradient(46% 38% at 24% 18%,rgba(255,198,208,0.15),transparent 70%),radial-gradient(42% 34% at 80% 28%,rgba(184,209,255,0.15),transparent 70%),radial-gradient(48% 40% at 30% 78%,rgba(203,240,214,0.13),transparent 70%),radial-gradient(40% 34% at 76% 86%,rgba(255,237,189,0.13),transparent 70%); /* @kind color */

/* Semantic aliases */
--surface-page:var(--au-page);
--surface-canvas:var(--au-canvas);
--surface-card:var(--au-porcelain);
--surface-well:var(--au-porcelain-well);
--surface-glass:rgba(255,255,255,0.4);
--surface-glass-strong:rgba(255,255,255,0.5);
--surface-glass-segment:rgba(255,255,255,0.34);
--surface-hero:rgba(255,255,255,0.44);
--surface-selected:rgba(255,255,255,0.8);
--text-primary:var(--au-ink);
--text-secondary:var(--au-label-60);
--text-tertiary:var(--au-label-55);
--text-quiet:var(--au-label-45);
--text-detail-label:var(--au-label-75);
--text-placeholder:var(--au-label-30);
--icon-primary:var(--au-icon-stroke);
--border-card:var(--au-hairline);
--border-divider:var(--au-divider);
--accent-selection:var(--au-ring); /* @kind color */
}

/* ── tokens/typography.css ── */
/* SF Pro via the system stack. Never bundle or substitute it. Hero figures: semibold, tabular, tight tracking. */
:root{
--au-font:-apple-system,"SF Pro Display","SF Pro Text",system-ui,sans-serif;
--au-weight-regular:400; /* @kind font */
--au-weight-medium:500; /* @kind font */
--au-weight-semibold:600; /* @kind font */
--au-weight-figure:650; /* @kind font */
--au-weight-bold:700; /* @kind font */
--au-weight-heavy:750; /* @kind font */
/* Sizes (pt == px in mockups) */
--au-text-hero:40px;
--au-text-hero-result:41px;
--au-text-hero-2:33px;
--au-text-landing:42px;
--au-text-wordmark:31px;
--au-text-title:26px;
--au-text-step-title:25px;
--au-text-amount-unit:26px;
--au-text-pinned-figure:21px;
--au-text-share-wordmark:20px;
--au-text-stepper:18px;
--au-text-button:17px;
--au-text-pinned:16.5px;
--au-text-row-large:16px;
--au-text-row:15.5px;
--au-text-nav:15px;
--au-text-card-title:14.5px;
--au-text-body:14px;
--au-text-detail:13.5px;
--au-text-footnote:13px;
--au-text-sub:12.5px;
--au-text-caption:12px;
--au-text-section:11.5px;
--au-text-micro:11px;
--au-text-tag:10.5px;
/* Tracking */
--au-track-hero:-0.8px; /* @kind font */
--au-track-result:-1px; /* @kind font */
--au-track-wordmark:-0.7px; /* @kind font */
--au-track-title:-0.5px; /* @kind font */
--au-track-row:-0.2px; /* @kind font */
--au-track-card:-0.3px; /* @kind font */
--au-track-section:0.6px; /* @kind font */
--au-track-label:0.5px; /* @kind font */
--au-track-pill:0.3px; /* @kind font */
--au-track-tag:0.4px; /* @kind font */
/* Semantic aliases */
--font-display:var(--au-font);
--font-body:var(--au-font);
--text-hero-size:var(--au-text-hero);
--text-title-size:var(--au-text-title);
--text-body-size:var(--au-text-body);
--text-caption-size:var(--au-text-caption);
}

/* ── tokens/spacing.css ── */
/* 8 pt grid, 20 pt margins, ≥ 44 pt targets, continuous corners everywhere. */
:root{
--au-grid:8px;
--au-margin:20px;
--au-margin-home:16px;
--au-target:44px;
--au-gap-grid:12px;
--au-gap-row:13px;
--au-button-height:52px;
--au-button-small-height:32px;
--au-pill-height:30px;
--au-segment-height:38px;
--au-segment-track-height:44px;
--au-row-height:64px;
--au-detail-row-height:44px;
--au-icon-button:44px;
--au-switch-width:51px;
--au-switch-height:31px;
--au-radio:22px;
--au-phone-width:402px;
--au-phone-height:874px;
/* Radii */
--au-radius-hero:28px;
--au-radius-hero-result:26px;
--au-radius-tile:24px;
--au-radius-card:22px;
--au-radius-amount:22px;
--au-radius-list:20px;
--au-radius-compare:14px;
--au-radius-row:12px;
--au-radius-row-selected:13px;
--au-radius-well:13px;
--au-radius-well-md:12px;
--au-radius-well-sm:10px;
--au-radius-key:10px;
--au-radius-capsule:999px;
/* Semantic aliases */
--space-screen-x:var(--au-margin);
--radius-card:var(--au-radius-card);
--radius-control:var(--au-radius-capsule);
}

/* ── tokens/elevation.css ── */
/* Materials: canvas → porcelain (two elevations) → Liquid Glass (chrome + one hero slab). Never glass on glass. */
:root{
--au-porcelain-shadow:inset 0 1px 0 rgba(255,255,255,0.92),0 1px 2px rgba(64,54,42,0.05),0 12px 30px rgba(64,54,42,0.07);
--au-porcelain-shadow-tile:inset 0 1px 0 rgba(255,255,255,0.92),0 1px 2px rgba(64,54,42,0.04),0 12px 30px rgba(64,54,42,0.06);
--au-porcelain-shadow-raised:inset 0 1px 0 rgba(255,255,255,0.95),0 2px 4px rgba(64,54,42,0.06),0 20px 44px rgba(64,54,42,0.11);
--au-well-shadow:inset 0 1px 0 #fff,inset 0 0 0 0.5px rgba(84,72,58,0.06);
--au-glass-blur:blur(16px) saturate(170%); /* @kind other */
--au-glass-blur-strong:blur(20px) saturate(180%); /* @kind other */
--au-glass-blur-segment:blur(12px) saturate(160%); /* @kind other */
--au-glass-blur-hero:blur(22px) saturate(180%); /* @kind other */
--au-glass-shadow:inset 0 1px 1px rgba(255,255,255,0.95),inset 0 0 0 0.5px rgba(255,255,255,0.55),inset 0 -1px 2px rgba(150,138,120,0.28),0 2px 8px rgba(64,54,42,0.1);
--au-glass-shadow-button:inset 0 1px 1px rgba(255,255,255,0.98),inset 0 0 0 0.5px rgba(255,255,255,0.6),inset 0 -2px 4px -2px rgba(150,138,120,0.32),0 4px 14px rgba(64,54,42,0.14);
--au-glass-shadow-segment:inset 0 1px 1px rgba(255,255,255,0.9),inset 0 0 0 0.5px rgba(255,255,255,0.5),inset 0 -1px 2px rgba(150,138,120,0.24),0 2px 8px rgba(64,54,42,0.08);
--au-glass-shadow-amount:inset 0 1px 1px rgba(255,255,255,0.95),inset 0 0 0 0.5px rgba(255,255,255,0.55),inset 0 -2px 4px -2px rgba(150,138,120,0.32),0 3px 10px rgba(64,54,42,0.09);
--au-hero-shadow:inset 0 1.5px 1.5px rgba(255,255,255,0.95),inset 0 0 0 0.5px rgba(255,255,255,0.55),inset 0 -4px 8px -4px rgba(150,138,120,0.36),0 4px 14px rgba(64,54,42,0.1),0 24px 50px rgba(64,54,42,0.11);
--au-hero-shadow-result:inset 0 1px 1px rgba(255,255,255,0.95),inset 0 0 0 0.5px rgba(255,255,255,0.55),inset 0 -3px 6px -3px rgba(150,138,120,0.34),0 4px 14px rgba(64,54,42,0.1),0 22px 48px rgba(64,54,42,0.1);
--au-thumb-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(64,54,42,0.14);
--au-thumb-fill:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.88)); /* @kind color */
--au-knob-shadow:0 2px 6px rgba(0,0,0,0.2),0 0 0 0.5px rgba(0,0,0,0.04);
--au-share-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 30px 70px rgba(20,16,12,0.4);
--au-phone-shadow:0 0 60px rgba(64,54,42,0.08);
/* Semantic aliases */
--shadow-card:var(--au-porcelain-shadow);
--shadow-card-raised:var(--au-porcelain-shadow-raised);
--shadow-glass:var(--au-glass-shadow);
--shadow-hero:var(--au-hero-shadow);
}

/* ── tokens/motion.css ── */
/* Snappy, spring-like curves. States morph, never cross-fade. Every touch answers with light. */
:root{
--au-ease-enter:cubic-bezier(0.2,0.7,0.2,1); /* @kind other */
--au-ease-morph:cubic-bezier(0.3,0.8,0.3,1); /* @kind other */
--au-ease-thumb:cubic-bezier(0.2,0.8,0.2,1); /* @kind other */
--au-ease-sweep:cubic-bezier(0.3,0.6,0.3,1); /* @kind other */
--au-duration-enter:0.5s; /* @kind other */
--au-duration-morph:0.35s; /* @kind other */
--au-duration-thumb:0.28s; /* @kind other */
--au-duration-switch:0.25s; /* @kind other */
--au-duration-progress:0.45s; /* @kind other */
--au-duration-sweep:2.4s; /* @kind other */
--au-duration-drift:46s; /* @kind other */
--au-press-in:0.08s; /* @kind other */
--au-press-out:0.55s; /* @kind other */
--au-stagger:0.06s; /* @kind other */
--au-rise:14px; /* @kind spacing */
--au-press-large:0.98; /* @kind other */
--au-press-small:0.95; /* @kind other */
--au-press-icon:0.92; /* @kind other */
--au-press-card:0.97; /* @kind other */
--au-press-row:0.985; /* @kind other */
}
@keyframes au-drift{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(1.5%,2%,0) scale(1.07)}}
@keyframes au-sweep{from{left:-32%}to{left:118%}}
@keyframes au-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes au-fade{from{opacity:0}to{opacity:1}}
@keyframes au-caret{0%,45%{opacity:1}55%,100%{opacity:0}}
@keyframes au-spec{from{transform:translate(-8px,-3px)}to{transform:translate(10px,4px)}}
@keyframes au-pulse{0%,100%{opacity:0.5}50%{opacity:1}}
@keyframes au-globe{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes au-glint{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* ── tokens/recipes.css ── */
/* Plain-HTML recipes — the web twin of Porcelain.swift, Glass.swift, HeroSlab.swift, Prismatic.swift. */
.au-screen{position:relative;min-height:100dvh;overflow:hidden;background:var(--au-canvas);color:var(--au-ink);font-family:var(--au-font);-webkit-font-smoothing:antialiased}
.au-backdrop{position:absolute;inset:-22%;background:var(--au-backdrop);animation:au-drift var(--au-duration-drift) ease-in-out infinite alternate;pointer-events:none}
.au-porcelain{background:var(--au-porcelain);border:0.5px solid var(--au-hairline);border-radius:var(--au-radius-card);box-shadow:var(--au-porcelain-shadow)}
.au-porcelain.au-raised{border-color:var(--au-hairline-raised);box-shadow:var(--au-porcelain-shadow-raised)}
.au-glass{background:var(--surface-glass);backdrop-filter:var(--au-glass-blur);-webkit-backdrop-filter:var(--au-glass-blur);box-shadow:var(--au-glass-shadow);border-radius:var(--au-radius-capsule);transition:transform var(--au-press-out) var(--au-ease-morph),box-shadow var(--au-press-out) var(--au-ease-morph)}
.au-glass:active{transform:scale(0.98);transition-duration:var(--au-press-in)}
.au-hero-slab{position:relative;overflow:hidden;border-radius:var(--au-radius-hero);padding:18px 22px 20px;background:var(--surface-hero);backdrop-filter:var(--au-glass-blur-hero);-webkit-backdrop-filter:var(--au-glass-blur-hero);box-shadow:var(--au-hero-shadow)}
.au-selected{position:relative}
.au-selected::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;background:var(--au-ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;filter:blur(0.5px);pointer-events:none}
.au-sweep{position:absolute;top:-10%;bottom:-10%;left:-32%;width:120px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 46%,rgba(255,251,242,0.3) 58%,rgba(255,255,255,0) 100%);filter:blur(9px);transform:rotate(10deg);pointer-events:none;animation:au-sweep var(--au-duration-sweep) var(--au-ease-sweep) 0.1s both}
.au-materialize{animation:au-enter var(--au-duration-enter) var(--au-ease-enter) var(--au-delay,0s) both}
.au-section-label{font-size:var(--au-text-section);font-weight:600;letter-spacing:var(--au-track-section);text-transform:uppercase;color:var(--au-label-50)}
.au-figure{font-size:var(--au-text-hero);font-weight:650;letter-spacing:var(--au-track-hero);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.au-backdrop,.au-sweep{animation:none}.au-materialize{animation-name:au-fade}}