/* SKARA — component stylesheet: base element defaults and the values tokens.json does not declare (composite type roles, motion, focus ring). Loaded after tokens.css. */
:root, [data-theme="light"] {
  --focus-ring: 0 0 0 2px var(--bg-surface),0 0 0 4px rgba(192,154,100,.55);
  color-scheme: light;
}
[data-theme="dark"] {
  --focus-ring: 0 0 0 2px var(--bg-app),0 0 0 4px rgba(212,175,124,.6);
  color-scheme: dark;
}
/* Composite type roles — use with `font: var(--type-…)` */
:root {
  --type-display-1: 300 68px/1.04 var(--font-sans);
  --type-display-2: 300 52px/1.06 var(--font-sans);
  --type-h1: 400 40px/1.1 var(--font-sans);
  --type-h2: 400 30px/1.15 var(--font-sans);
  --type-h3: 500 24px/1.2 var(--font-sans);
  --type-h4: 500 18px/1.3 var(--font-sans);
  --type-h5: 500 16px/1.35 var(--font-sans);
  --type-body-lg: 400 16px/1.6 var(--font-sans);
  --type-body: 400 14px/1.5 var(--font-sans);
  --type-body-sm: 400 13px/1.45 var(--font-sans);
  --type-caption: 400 12px/1.4 var(--font-sans);
  --type-label: 500 13px/1.3 var(--font-sans);
  --type-eyebrow: 500 11px/1.2 var(--font-sans);
  --type-data: 400 13px/1.3 var(--font-mono);
  --type-data-lg: 400 28px/1.1 var(--font-mono);
  --type-code: 400 12.5px/1.5 var(--font-mono);
}
/* Motion — calm, short, no bounce */
:root {
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);
  --ease-in: cubic-bezier(.5,0,.8,.4);
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-deliberate: 420ms;
}
/* SKARA — base element defaults */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{margin:0;font:var(--type-body);color:var(--fg-1);background:var(--bg-app);font-feature-settings:'ss01' on,'cv11' on}
a{color:var(--fg-link);text-decoration:underline;text-decoration-color:color-mix(in oklab,currentColor 35%,transparent);text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--fg-link-hover);text-decoration-color:currentColor}
::selection{background:rgba(212,175,124,.35);color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.sk-num,.tabular{font-variant-numeric:tabular-nums}
.sk-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--fg-3)}
h1,h2,h3,h4,h5,p{margin:0;text-wrap:pretty}