/* AUTO-GENERATED FILE — DO NOT EDIT MANUALLY.
   Run `npm run spec:build` after updating specs/portfolio-spec.json */

:root {
  --dt-color-mode-dark-bg-canvas: #020617;
  --dt-color-mode-dark-bg-surface: #020617;
  --dt-color-mode-dark-bg-elevated: #0B1120;
  --dt-color-mode-dark-bg-muted: #020617;
  --dt-color-mode-dark-fg-primary: #F9FAFB;
  --dt-color-mode-dark-fg-secondary: #E5E7EB;
  --dt-color-mode-dark-fg-muted: #9CA3AF;
  --dt-color-mode-dark-fg-inverse: #020617;
  --dt-color-mode-dark-accent-primary: #38BDF8;
  --dt-color-mode-dark-accent-secondary: #A855F7;
  --dt-color-mode-dark-accent-tertiary: #22C55E;
  --dt-color-mode-dark-accent-soft: #0EA5E933;
  --dt-color-mode-dark-semantic-success: #22C55E;
  --dt-color-mode-dark-semantic-warning: #F97316;
  --dt-color-mode-dark-semantic-error: #EF4444;
  --dt-color-mode-dark-semantic-info: #3B82F6;
  --dt-color-mode-dark-border-subtle: #1E293B;
  --dt-color-mode-dark-border-strong: #334155;
  --dt-color-mode-dark-border-accent: #38BDF8;
  --dt-color-mode-dark-overlay-backdrop: rgba(15,23,42,0.75);
  --dt-color-mode-dark-overlay-hover: rgba(148,163,184,0.12);
  --dt-color-mode-dark-overlay-active: rgba(148,163,184,0.18);
  --dt-color-mode-light-bg-canvas: #F9FAFB;
  --dt-color-mode-light-bg-surface: #FFFFFF;
  --dt-color-mode-light-bg-elevated: #F3F4F6;
  --dt-color-mode-light-bg-muted: #E5E7EB;
  --dt-color-mode-light-fg-primary: #020617;
  --dt-color-mode-light-fg-secondary: #111827;
  --dt-color-mode-light-fg-muted: #6B7280;
  --dt-color-mode-light-fg-inverse: #F9FAFB;
  --dt-color-mode-light-accent-primary: #0284C7;
  --dt-color-mode-light-accent-secondary: #7C3AED;
  --dt-color-mode-light-accent-tertiary: #16A34A;
  --dt-color-mode-light-accent-soft: #0EA5E91F;
  --dt-color-mode-light-semantic-success: #16A34A;
  --dt-color-mode-light-semantic-warning: #EA580C;
  --dt-color-mode-light-semantic-error: #DC2626;
  --dt-color-mode-light-semantic-info: #2563EB;
  --dt-color-mode-light-border-subtle: #E5E7EB;
  --dt-color-mode-light-border-strong: #D1D5DB;
  --dt-color-mode-light-border-accent: #0284C7;
  --dt-color-mode-light-overlay-backdrop: rgba(15,23,42,0.55);
  --dt-color-mode-light-overlay-hover: rgba(15,23,42,0.04);
  --dt-color-mode-light-overlay-active: rgba(15,23,42,0.08);
  --dt-color-neutral-0: #020617;
  --dt-color-neutral-50: #020617;
  --dt-color-neutral-100: #0F172A;
  --dt-color-neutral-200: #1E293B;
  --dt-color-neutral-300: #334155;
  --dt-color-neutral-400: #475569;
  --dt-color-neutral-500: #64748B;
  --dt-color-neutral-600: #94A3B8;
  --dt-color-neutral-700: #CBD5F5;
  --dt-color-neutral-800: #E5E7EB;
  --dt-color-neutral-900: #F9FAFB;
  --dt-typography-family-sans: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
  --dt-typography-family-mono: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --dt-typography-size-xs: 0.75rem;
  --dt-typography-size-sm: 0.875rem;
  --dt-typography-size-md: 1rem;
  --dt-typography-size-lg: 1.125rem;
  --dt-typography-size-xl: 1.25rem;
  --dt-typography-size-2xl: 1.5rem;
  --dt-typography-size-3xl: 1.875rem;
  --dt-typography-size-4xl: 2.25rem;
  --dt-typography-weight-regular: 400;
  --dt-typography-weight-medium: 500;
  --dt-typography-weight-semibold: 600;
  --dt-typography-weight-bold: 700;
  --dt-typography-lineheight-tight: 1.1;
  --dt-typography-lineheight-snug: 1.25;
  --dt-typography-lineheight-normal: 1.5;
  --dt-typography-lineheight-relaxed: 1.7;
  --dt-typography-tracking-tight: -0.02;
  --dt-typography-tracking-normal: 0;
  --dt-typography-tracking-wide: 0.04;
  --dt-space-0: 0px;
  --dt-space-1: 4px;
  --dt-space-2: 8px;
  --dt-space-3: 12px;
  --dt-space-4: 16px;
  --dt-space-5: 20px;
  --dt-space-6: 24px;
  --dt-space-8: 32px;
  --dt-space-10: 40px;
  --dt-space-12: 48px;
  --dt-space-16: 64px;
  --dt-space-20: 80px;
  --dt-size-contentwidth-sm: 640px;
  --dt-size-contentwidth-md: 768px;
  --dt-size-contentwidth-lg: 960px;
  --dt-size-contentwidth-xl: 1120px;
  --dt-size-avatar-sm: 32px;
  --dt-size-avatar-md: 48px;
  --dt-size-avatar-lg: 64px;
  --dt-size-icon-sm: 16px;
  --dt-size-icon-md: 20px;
  --dt-size-icon-lg: 24px;
  --dt-radius-none: 0px;
  --dt-radius-xs: 0.25rem;
  --dt-radius-sm: 0.375rem;
  --dt-radius-md: 0.75rem;
  --dt-radius-lg: 1rem;
  --dt-radius-xl: 1.5rem;
  --dt-radius-pill: 9999px;
  --dt-border-width-hairline: 1px;
  --dt-border-width-thin: 1px;
  --dt-border-width-thick: 2px;
  --dt-border-width-extra: 3px;
  --dt-border-style-subtle: solid;
  --dt-border-style-accent: solid;
  --dt-border-style-focus: solid;
  --dt-shadow-none: none;
  --dt-shadow-subtle: 0 8px 20px rgba(15,23,42,0.45);
  --dt-shadow-soft: 0 18px 45px rgba(0,0,0,0.55);
  --dt-shadow-focusring: 0 0 0 2px rgba(56,189,248,0.35);
  --dt-motion-duration-xs: 80ms;
  --dt-motion-duration-sm: 140ms;
  --dt-motion-duration-md: 200ms;
  --dt-motion-duration-lg: 280ms;
  --dt-motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dt-motion-easing-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --dt-motion-easing-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --dt-breakpoint-xs: 360px;
  --dt-breakpoint-sm: 480px;
  --dt-breakpoint-md: 768px;
  --dt-breakpoint-lg: 1024px;
  --dt-breakpoint-xl: 1280px;
  --dt-layout-page-maxwidth: 1120px;
  --dt-layout-page-paddingx-mobile: 16px;
  --dt-layout-page-paddingx-desktop: 32px;
  --dt-layout-page-paddingy-mobile: 24px;
  --dt-layout-page-paddingy-desktop: 48px;
  --dt-layout-grid-columns-mobile: 4;
  --dt-layout-grid-columns-tablet: 8;
  --dt-layout-grid-columns-desktop: 12;
  --dt-layout-grid-gutter-mobile: 12px;
  --dt-layout-grid-gutter-tablet: 16px;
  --dt-layout-grid-gutter-desktop: 24px;
  --dt-layout-section-gapy-tight: 32px;
  --dt-layout-section-gapy-normal: 48px;
  --dt-layout-section-gapy-loose: 64px;
}

:root {
  --dt-color-bg-canvas: #020617;
  --dt-color-bg-surface: #020617;
  --dt-color-bg-elevated: #0B1120;
  --dt-color-bg-muted: #020617;
  --dt-color-fg-primary: #F9FAFB;
  --dt-color-fg-secondary: #E5E7EB;
  --dt-color-fg-muted: #9CA3AF;
  --dt-color-fg-inverse: #020617;
  --dt-color-accent-primary: #38BDF8;
  --dt-color-accent-secondary: #A855F7;
  --dt-color-accent-tertiary: #22C55E;
  --dt-color-accent-soft: #0EA5E933;
  --dt-color-semantic-success: #22C55E;
  --dt-color-semantic-warning: #F97316;
  --dt-color-semantic-error: #EF4444;
  --dt-color-semantic-info: #3B82F6;
  --dt-color-border-subtle: #1E293B;
  --dt-color-border-strong: #334155;
  --dt-color-border-accent: #38BDF8;
  --dt-color-overlay-backdrop: rgba(15,23,42,0.75);
  --dt-color-overlay-hover: rgba(148,163,184,0.12);
  --dt-color-overlay-active: rgba(148,163,184,0.18);
}

html[data-theme='light'] {
  --dt-color-bg-canvas: #F9FAFB;
  --dt-color-bg-surface: #FFFFFF;
  --dt-color-bg-elevated: #F3F4F6;
  --dt-color-bg-muted: #E5E7EB;
  --dt-color-fg-primary: #020617;
  --dt-color-fg-secondary: #111827;
  --dt-color-fg-muted: #6B7280;
  --dt-color-fg-inverse: #F9FAFB;
  --dt-color-accent-primary: #0284C7;
  --dt-color-accent-secondary: #7C3AED;
  --dt-color-accent-tertiary: #16A34A;
  --dt-color-accent-soft: #0EA5E91F;
  --dt-color-semantic-success: #16A34A;
  --dt-color-semantic-warning: #EA580C;
  --dt-color-semantic-error: #DC2626;
  --dt-color-semantic-info: #2563EB;
  --dt-color-border-subtle: #E5E7EB;
  --dt-color-border-strong: #D1D5DB;
  --dt-color-border-accent: #0284C7;
  --dt-color-overlay-backdrop: rgba(15,23,42,0.55);
  --dt-color-overlay-hover: rgba(15,23,42,0.04);
  --dt-color-overlay-active: rgba(15,23,42,0.08);
}

:root {
  --dt-component-appshell-bg: var(--dt-tokens-color-mode-dark-bg-canvas);
  --dt-component-appshell-fg: var(--dt-tokens-color-mode-dark-fg-primary);
  --dt-component-appshell-maxwidth: var(--dt-tokens-layout-page-maxwidth);
  --dt-component-appshell-paddingx-mobile: var(--dt-tokens-layout-page-paddingx-mobile);
  --dt-component-appshell-paddingx-desktop: var(--dt-tokens-layout-page-paddingx-desktop);
  --dt-component-appshell-paddingy-mobile: var(--dt-tokens-layout-page-paddingy-mobile);
  --dt-component-appshell-paddingy-desktop: var(--dt-tokens-layout-page-paddingy-desktop);
  --dt-component-navbar-height: 64px;
  --dt-component-navbar-bg: transparent;
  --dt-component-navbar-borderbottomcolor: var(--dt-tokens-color-mode-dark-border-subtle);
  --dt-component-navbar-linkcolor: var(--dt-tokens-color-mode-dark-fg-muted);
  --dt-component-navbar-linkcoloractive: var(--dt-tokens-color-mode-dark-fg-primary);
  --dt-component-navbar-gap: var(--dt-tokens-space-4);
  --dt-component-card-bg: var(--dt-tokens-color-mode-dark-bg-elevated);
  --dt-component-card-bordercolor: var(--dt-tokens-color-mode-dark-border-subtle);
  --dt-component-card-borderwidth: var(--dt-tokens-border-width-hairline);
  --dt-component-card-radius: var(--dt-tokens-radius-lg);
  --dt-component-card-shadow: var(--dt-tokens-shadow-subtle);
  --dt-component-card-padding: var(--dt-tokens-space-6);
  --dt-component-card-gap: var(--dt-tokens-space-3);
  --dt-component-button-primary-bg: var(--dt-tokens-color-mode-dark-accent-primary);
  --dt-component-button-primary-fg: var(--dt-tokens-color-mode-dark-fg-inverse);
  --dt-component-button-primary-bghover: #0EA5E9;
  --dt-component-button-primary-bgactive: #0369A1;
  --dt-component-button-primary-radius: var(--dt-tokens-radius-pill);
  --dt-component-button-primary-paddingx: var(--dt-tokens-space-4);
  --dt-component-button-primary-paddingy: var(--dt-tokens-space-2);
  --dt-component-button-primary-fontsize: var(--dt-tokens-typography-size-sm);
  --dt-component-button-primary-fontweight: var(--dt-tokens-typography-weight-semibold);
  --dt-component-button-primary-shadow: var(--dt-tokens-shadow-soft);
  --dt-component-button-ghost-bg: transparent;
  --dt-component-button-ghost-fg: var(--dt-tokens-color-mode-dark-fg-secondary);
  --dt-component-button-ghost-bghover: var(--dt-tokens-color-mode-dark-overlay-hover);
  --dt-component-button-ghost-bgactive: var(--dt-tokens-color-mode-dark-overlay-active);
  --dt-component-button-ghost-radius: var(--dt-tokens-radius-pill);
  --dt-component-button-ghost-paddingx: var(--dt-tokens-space-3);
  --dt-component-button-ghost-paddingy: var(--dt-tokens-space-2);
  --dt-component-button-ghost-bordercolor: var(--dt-tokens-color-mode-dark-border-subtle);
  --dt-component-button-ghost-borderwidth: var(--dt-tokens-border-width-hairline);
  --dt-component-tag-bg: var(--dt-tokens-color-mode-dark-overlay-hover);
  --dt-component-tag-fg: var(--dt-tokens-color-mode-dark-fg-secondary);
  --dt-component-tag-radius: var(--dt-tokens-radius-pill);
  --dt-component-tag-paddingx: var(--dt-tokens-space-2);
  --dt-component-tag-paddingy: 2px;
  --dt-component-tag-fontsize: var(--dt-tokens-typography-size-xs);
  --dt-component-tag-fontweight: var(--dt-tokens-typography-weight-medium);
  --dt-component-badge-highlight-bg: var(--dt-tokens-color-mode-dark-accent-soft);
  --dt-component-badge-highlight-fg: var(--dt-tokens-color-mode-dark-accent-primary);
  --dt-component-badge-highlight-radius: var(--dt-tokens-radius-pill);
  --dt-component-badge-highlight-paddingx: var(--dt-tokens-space-2);
  --dt-component-badge-highlight-paddingy: 2px;
  --dt-component-badge-highlight-fontsize: var(--dt-tokens-typography-size-xs);
  --dt-component-chip-tech-bg: var(--dt-tokens-color-mode-dark-bg-elevated);
  --dt-component-chip-tech-bordercolor: var(--dt-tokens-color-mode-dark-border-subtle);
  --dt-component-chip-tech-borderwidth: var(--dt-tokens-border-width-hairline);
  --dt-component-chip-tech-radius: var(--dt-tokens-radius-pill);
  --dt-component-chip-tech-paddingx: var(--dt-tokens-space-3);
  --dt-component-chip-tech-paddingy: 4px;
  --dt-component-chip-tech-gap: var(--dt-tokens-space-1);
  --dt-component-chip-tech-fontsize: var(--dt-tokens-typography-size-xs);
  --dt-component-chip-tech-iconsize: var(--dt-tokens-size-icon-sm);
  --dt-component-section-header-titlesize: var(--dt-tokens-typography-size-2xl);
  --dt-component-section-header-titleweight: var(--dt-tokens-typography-weight-semibold);
  --dt-component-section-header-subtitlesize: var(--dt-tokens-typography-size-md);
  --dt-component-section-header-subtitlecolor: var(--dt-tokens-color-mode-dark-fg-muted);
  --dt-component-section-header-gap: var(--dt-tokens-space-2);
  --dt-component-hero-titlesize: var(--dt-tokens-typography-size-4xl);
  --dt-component-hero-titleweight: var(--dt-tokens-typography-weight-bold);
  --dt-component-hero-titletracking: var(--dt-tokens-typography-tracking-tight);
  --dt-component-hero-subtitlesize: var(--dt-tokens-typography-size-lg);
  --dt-component-hero-subtitlecolor: var(--dt-tokens-color-mode-dark-fg-muted);
  --dt-component-hero-avatarsize: var(--dt-tokens-size-avatar-lg);
  --dt-component-form-control-bg: var(--dt-tokens-color-mode-dark-bg-surface);
  --dt-component-form-control-fg: var(--dt-tokens-color-mode-dark-fg-primary);
  --dt-component-form-control-bordercolor: var(--dt-tokens-color-mode-dark-border-subtle);
  --dt-component-form-control-borderradius: var(--dt-tokens-radius-md);
  --dt-component-form-control-paddingx: var(--dt-tokens-space-3);
  --dt-component-form-control-paddingy: var(--dt-tokens-space-2);
  --dt-component-form-control-fontsize: var(--dt-tokens-typography-size-sm);
  --dt-component-form-control-labelcolor: var(--dt-tokens-color-mode-dark-fg-secondary);
  --dt-component-form-control-helpercolor: var(--dt-tokens-color-mode-dark-fg-muted);
  --dt-component-form-control-errorcolor: var(--dt-tokens-color-mode-dark-semantic-error);
  --dt-component-form-control-focusshadow: var(--dt-tokens-shadow-focusring);
}