/* ClonifyLab — generated from tokens.json */
:root, [data-theme="light"] {
  --surface-page: #F6F4F0;
  --surface-raised: #FEFDFB;
  --surface-sunken: #EEEBE5;
  --surface-overlay: #FFFFFF;
  --ink-primary: #1D1A17;
  --ink-secondary: #4F4A44;
  --ink-muted: #66615A;
  --line-subtle: #E1DDD7;
  --line-strong: #847E77;
  --brand: #681E4F;
  --brand-hover: #551640;
  --brand-pressed: #4A0E36;
  --on-brand: #FFFAFD;
  --brand-soft: #F7ECF2;
  --brand-text: #681E4F;
  --focus-ring: #8E336E;
  --neutral: #3A3530;
  --neutral-soft: #EAE6E0;
  --info: #485C77;
  --info-soft: #E7F0FA;
  --success: #026A5D;
  --success-soft: #E4F3EF;
  --warning: #643400;
  --warning-soft: #FCF0D3;
  --danger: #B54016;
  --danger-hover: #9E3611;
  --danger-pressed: #8A2E0E;
  --on-danger: #FFFAF9;
  --danger-soft: #FFEAE1;
  --video-frame: #100F0E;
  --video-chip: #100F0EC2;
  --on-video: #F1EEE9;
  --scrim: #1D1A177A;
  --state-hover: #1D1A170D;
  --state-pressed: #1D1A1717;
  --shadow-overlay: 0 1px 2px rgba(29, 26, 23, 0.06), 0 8px 24px rgba(29, 26, 23, 0.12);
}
[data-theme="dark"] {
  --surface-page: #151312;
  --surface-raised: #1D1B1A;
  --surface-sunken: #0F0E0D;
  --surface-overlay: #24211F;
  --ink-primary: #F1EEE9;
  --ink-secondary: #C8C3BC;
  --ink-muted: #A9A299;
  --line-subtle: #33302C;
  --line-strong: #7F7972;
  --brand: #BB78A4;
  --brand-hover: #C98BB4;
  --brand-pressed: #AE6997;
  --on-brand: #1F0B18;
  --brand-soft: #33202C;
  --brand-text: #CF92BA;
  --focus-ring: #E2A9CE;
  --neutral: #C8C3BC;
  --neutral-soft: #2E2B28;
  --info: #B8CFE9;
  --info-soft: #1C2632;
  --success: #64B492;
  --success-soft: #172924;
  --warning: #F7CEA1;
  --warning-soft: #2D2411;
  --danger: #E07760;
  --danger-hover: #E88E79;
  --danger-pressed: #D4664F;
  --on-danger: #1F0F0B;
  --danger-soft: #361E18;
  --video-frame: #0C0B0A;
  --scrim: #0000009E;
  --state-hover: #F1EEE90F;
  --state-pressed: #F1EEE91A;
  --shadow-overlay: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.48);
}
:root {
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 9999px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --touch-target: 44px;
  --row-compact: 36px;
  --row-default: 48px;
  --row-touch: 56px;
  --row-touch-tall: 72px;
  --sidebar-width: 248px;
  --topbar-desktop: 64px;
  --topbar-phone: 56px;
  --tabbar-height: 64px;
  --page-max: 1200px;
  --inspector-width: 360px;
  --breakpoint-desktop: 1024px;
  --measure: 68ch;
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-offset-card: 4px;
  --border-width: 1px;
  --border-selected: 2px;
  --motif-stroke: 1.5px;
  --underline-offset: 3px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}
.type-cover { font-family: var(--font-serif); font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.02em; }
.type-display { font-family: var(--font-serif); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.type-figure { font-family: var(--font-serif); font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; }
.type-title-1 { font-family: var(--font-serif); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.type-title-2 { font-family: var(--font-serif); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.005em; }
.type-heading { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: 0; }
.type-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.type-label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.type-body-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.type-label-sm { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.type-meta { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.01em; }
.type-code { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; }

/* Built: the dark theme follows the device (website only). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --surface-page: #151312;
  --surface-raised: #1D1B1A;
  --surface-sunken: #0F0E0D;
  --surface-overlay: #24211F;
  --ink-primary: #F1EEE9;
  --ink-secondary: #C8C3BC;
  --ink-muted: #A9A299;
  --line-subtle: #33302C;
  --line-strong: #7F7972;
  --brand: #BB78A4;
  --brand-hover: #C98BB4;
  --brand-pressed: #AE6997;
  --on-brand: #1F0B18;
  --brand-soft: #33202C;
  --brand-text: #CF92BA;
  --focus-ring: #E2A9CE;
  --neutral: #C8C3BC;
  --neutral-soft: #2E2B28;
  --info: #B8CFE9;
  --info-soft: #1C2632;
  --success: #64B492;
  --success-soft: #172924;
  --warning: #F7CEA1;
  --warning-soft: #2D2411;
  --danger: #E07760;
  --danger-hover: #E88E79;
  --danger-pressed: #D4664F;
  --on-danger: #1F0F0B;
  --danger-soft: #361E18;
  --video-frame: #0C0B0A;
  --scrim: #0000009E;
  --state-hover: #F1EEE90F;
  --state-pressed: #F1EEE91A;
  --shadow-overlay: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.48);
}
}