/* kukudze.com tokens v1.0. Copied from docs/brand/tokens.css with the same names and values.
   Only change: mobile-first. :root holds the 390 values; min-width queries step up to 768 / 1024 / 1440.
   Same result as the source max-width queries at every width. Dark tokens are kept for later (no toggle yet). */
:root {
  --color-page: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F3F5F8;
  --color-surface-blue: #EDF3FF;
  --color-text: #0B0D12;
  --color-text-muted: #475569;
  --color-border: #D5DBE5;
  --color-control-border: #64748B;
  --color-primary: #1746D1;
  --color-primary-hover: #123AAE;
  --color-primary-active: #102D84;
  --color-on-primary: #FFFFFF;
  --color-link: #1746D1;
  --color-focus: #1746D1;
  --color-success: #166534;
  --color-success-bg: #ECFDF3;
  --color-error: #B91C1C;
  --color-error-bg: #FEF2F2;
  --color-warning: #854D0E;
  --color-warning-bg: #FFFBEB;
  --color-unknown: #475569;
  --color-unknown-bg: #F1F5F9;
  --color-info: #1E40AF;
  --color-info-bg: #EFF6FF;
  --color-accent: #FFD34D;
  --color-on-accent: #0B0D12;
  --color-brand-band: #1746D1;
  --color-on-brand-band: #FFFFFF;
  --color-disabled-bg: #E2E8F0;
  --color-disabled-text: #475569;
  --color-overlay: rgba(11,13,18,0.56);
  --font-display: "Inter Tight", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-code: "IBM Plex Mono", monospace;
  --space-0: 0px;
  --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;
  --space-96: 96px;
  --space-128: 128px;
  --radius-none: 0px;
  --radius-control: 4px;
  --radius-panel: 8px;
  --radius-dialog: 12px;
  --radius-badge: 4px;
  --radius-pill: 999px;
  --border-thin: 1px;
  --border-strong: 2px;
  --shadow-none: none;
  --shadow-menu: 0 8px 24px rgba(11,13,18,0.12);
  --shadow-dialog: 0 20px 64px rgba(11,13,18,0.20);
  --shadow-dark-menu: 0 8px 24px rgba(0,0,0,0.32);
  --shadow-dark-dialog: 0 20px 64px rgba(0,0,0,0.48);
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-ease: cubic-bezier(0.2,0,0,1);
  --motion-exit: cubic-bezier(0.4,0,1,1);
  --motion-press-scale: 0.98;
  --motion-entry-offset: 8px;
  --breakpoint-phone: 390px;
  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1440px;
  --layout-max-width: 1600px;
  --layout-header: 80px;
  --layout-header-mobile: 64px;
  --layout-touch-target: 44px;
  --layout-button-small: 44px;
  --layout-button-default: 48px;
  --layout-button-large: 56px;
  --layout-input-height: 48px;
  --layout-table-row: 56px;
  --layout-table-head: 48px;
  --layout-focus-width: 3px;
  --layout-focus-offset: 3px;
  --layout-dialog-width: 560px;
  --layout-sidebar: 224px;
  --layout-z-header: 100;
  --layout-z-menu: 200;
  --layout-z-overlay: 300;
  --layout-z-dialog: 400;
  --layout-z-toast: 500;
  --font-size-display-1440: 96px;
  --font-size-display-1024: 80px;
  --font-size-display-768: 64px;
  --font-size-display-390: 44px;
  --font-size-display: 44px;
  --font-weight-display: 800;
  --line-height-display: 1.0;
  --letter-spacing-display: -3px;
  --font-size-h1-1440: 72px;
  --font-size-h1-1024: 64px;
  --font-size-h1-768: 52px;
  --font-size-h1-390: 36px;
  --font-size-h1: 36px;
  --font-weight-h1: 800;
  --line-height-h1: 1.05;
  --letter-spacing-h1: -2px;
  --font-size-h2-1440: 48px;
  --font-size-h2-1024: 44px;
  --font-size-h2-768: 38px;
  --font-size-h2-390: 30px;
  --font-size-h2: 30px;
  --font-weight-h2: 700;
  --line-height-h2: 1.1;
  --letter-spacing-h2: -1.3px;
  --font-size-h3-1440: 32px;
  --font-size-h3-1024: 30px;
  --font-size-h3-768: 28px;
  --font-size-h3-390: 24px;
  --font-size-h3: 24px;
  --font-weight-h3: 700;
  --line-height-h3: 1.2;
  --letter-spacing-h3: -0.6px;
  --font-size-h4-1440: 24px;
  --font-size-h4-1024: 24px;
  --font-size-h4-768: 22px;
  --font-size-h4-390: 20px;
  --font-size-h4: 20px;
  --font-weight-h4: 700;
  --line-height-h4: 1.25;
  --letter-spacing-h4: -0.3px;
  --font-size-lead-1440: 24px;
  --font-size-lead-1024: 22px;
  --font-size-lead-768: 20px;
  --font-size-lead-390: 18px;
  --font-size-lead: 18px;
  --font-weight-lead: 400;
  --line-height-lead: 1.45;
  --letter-spacing-lead: -0.2px;
  --font-size-body-1440: 16px;
  --font-size-body-1024: 16px;
  --font-size-body-768: 16px;
  --font-size-body-390: 16px;
  --font-size-body: 16px;
  --font-weight-body: 400;
  --line-height-body: 1.55;
  --letter-spacing-body: 0px;
  --font-size-small-1440: 16px;
  --font-size-small-1024: 16px;
  --font-size-small-768: 16px;
  --font-size-small-390: 16px;
  --font-size-small: 16px;
  --font-weight-small: 400;
  --line-height-small: 1.4;
  --letter-spacing-small: 0px;
  --font-size-caption-1440: 16px;
  --font-size-caption-1024: 16px;
  --font-size-caption-768: 16px;
  --font-size-caption-390: 16px;
  --font-size-caption: 16px;
  --font-weight-caption: 400;
  --line-height-caption: 1.4;
  --letter-spacing-caption: 0px;
  --font-size-label-1440: 16px;
  --font-size-label-1024: 16px;
  --font-size-label-768: 16px;
  --font-size-label-390: 16px;
  --font-size-label: 16px;
  --font-weight-label: 600;
  --line-height-label: 1.25;
  --letter-spacing-label: 0px;
  --font-size-code-1440: 16px;
  --font-size-code-1024: 16px;
  --font-size-code-768: 16px;
  --font-size-code-390: 16px;
  --font-size-code: 16px;
  --font-weight-code: 400;
  --line-height-code: 1.5;
  --letter-spacing-code: 0px;
  --responsive-390-gutter: 20px;
  --responsive-390-columns: 4;
  --responsive-390-gap: 16px;
  --responsive-390-section: 48px;
  --responsive-390-plan-columns: 1;
  --responsive-390-blog-columns: 1;
  --responsive-768-gutter: 32px;
  --responsive-768-columns: 8;
  --responsive-768-gap: 24px;
  --responsive-768-section: 64px;
  --responsive-768-plan-columns: 2;
  --responsive-768-blog-columns: 2;
  --responsive-1024-gutter: 40px;
  --responsive-1024-columns: 12;
  --responsive-1024-gap: 24px;
  --responsive-1024-section: 80px;
  --responsive-1024-plan-columns: 2;
  --responsive-1024-blog-columns: 3;
  --responsive-1440-gutter: 64px;
  --responsive-1440-columns: 12;
  --responsive-1440-gap: 24px;
  --responsive-1440-section: 96px;
  --responsive-1440-plan-columns: 4;
  --responsive-1440-blog-columns: 3;
  --page-gutter: 20px;
  --page-columns: 4;
  --page-gap: 16px;
  --page-section: 48px;
  --page-plan-columns: 1;
  --page-blog-columns: 1;
  --header-height: 64px;
  color-scheme: light;
}
[data-theme="dark"] {
  --color-page: #0C1018;
  --color-surface: #141B27;
  --color-surface-muted: #1B2636;
  --color-surface-blue: #182A4A;
  --color-text: #F8FAFC;
  --color-text-muted: #B8C5D8;
  --color-border: #35445B;
  --color-control-border: #8296B3;
  --color-primary: #A5BEFF;
  --color-primary-hover: #C2D2FF;
  --color-primary-active: #DBE4FF;
  --color-on-primary: #0C1018;
  --color-link: #A5BEFF;
  --color-focus: #C2D2FF;
  --color-success: #86EFAC;
  --color-success-bg: #102B22;
  --color-error: #FCA5A5;
  --color-error-bg: #351C27;
  --color-warning: #FDE68A;
  --color-warning-bg: #302710;
  --color-unknown: #CBD5E1;
  --color-unknown-bg: #223047;
  --color-info: #BFDBFE;
  --color-info-bg: #182B48;
  --color-accent: #FFD34D;
  --color-on-accent: #0B0D12;
  --color-brand-band: #1746D1;
  --color-on-brand-band: #FFFFFF;
  --color-disabled-bg: #27364D;
  --color-disabled-text: #B8C5D8;
  --color-overlay: rgba(0,0,0,0.72);
  --shadow-menu: var(--shadow-dark-menu);
  --shadow-dialog: var(--shadow-dark-dialog);
  color-scheme: dark;
}
@media (min-width: 768px) { :root {
  --page-gutter: 32px;
  --page-columns: 8;
  --page-gap: 24px;
  --page-section: 64px;
  --page-plan-columns: 2;
  --page-blog-columns: 2;
  --font-size-display: 64px;
  --font-size-h1: 52px;
  --font-size-h2: 38px;
  --font-size-h3: 28px;
  --font-size-h4: 22px;
  --font-size-lead: 20px;
  --font-size-body: 16px;
  --font-size-small: 16px;
  --font-size-caption: 16px;
  --font-size-label: 16px;
  --font-size-code: 16px;
  --header-height: 80px;
} }
@media (min-width: 1024px) { :root {
  --page-gutter: 40px;
  --page-columns: 12;
  --page-gap: 24px;
  --page-section: 80px;
  --page-plan-columns: 2;
  --page-blog-columns: 3;
  --font-size-display: 80px;
  --font-size-h1: 64px;
  --font-size-h2: 44px;
  --font-size-h3: 30px;
  --font-size-h4: 24px;
  --font-size-lead: 22px;
  --font-size-body: 16px;
  --font-size-small: 16px;
  --font-size-caption: 16px;
  --font-size-label: 16px;
  --font-size-code: 16px;
} }
@media (min-width: 1440px) { :root {
  --page-gutter: 64px;
  --page-columns: 12;
  --page-gap: 24px;
  --page-section: 96px;
  --page-plan-columns: 4;
  --page-blog-columns: 3;
  --font-size-display: 96px;
  --font-size-h1: 72px;
  --font-size-h2: 48px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-lead: 24px;
  --font-size-body: 16px;
  --font-size-small: 16px;
  --font-size-caption: 16px;
  --font-size-label: 16px;
  --font-size-code: 16px;
} }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Media queries use literals; custom properties cannot drive media conditions. */