@layer twodo-theme {
  :root {
    color-scheme: light dark;
    --twodo-color-background: light-dark(#fbf8f4, #17110d);
    --twodo-color-foreground: light-dark(#241a13, #f6efe7);
    --twodo-color-surface: light-dark(#f4ece2, #20180f);
    --twodo-color-surface-foreground: light-dark(#0a0a0a, #fafafa);
    --twodo-color-surface-raised: light-dark(#ffffff, #1f2937);
    --twodo-color-surface-raised-foreground: light-dark(#0a0a0a, #fafafa);
    --twodo-color-surface-sunken: light-dark(#efe4d6, #1b140d);
    --twodo-color-surface-sunken-foreground: light-dark(#0a0a0a, #fafafa);
    --twodo-color-card: light-dark(#ffffff, #241a13);
    --twodo-color-card-foreground: light-dark(#0a0a0a, #fafafa);
    --twodo-color-popover: light-dark(#ffffff, #241a13);
    --twodo-color-popover-foreground: light-dark(#0a0a0a, #fafafa);
    --twodo-color-overlay: light-dark(#1e293b, #000000);
    --twodo-color-overlay-foreground: #fafafa;
    --twodo-color-primary: light-dark(#8a4a1c, #f0a45c);
    --twodo-color-primary-foreground: light-dark(#ffffff, #1a1209);
    --twodo-color-primary-hover: light-dark(#6f3a14, #f7bd85);
    --twodo-color-primary-active: light-dark(#1e40af, #93c5fd);
    --twodo-color-secondary: light-dark(#f1f5f9, #1f2937);
    --twodo-color-secondary-foreground: light-dark(#0f172a, #f8fafc);
    --twodo-color-secondary-hover: light-dark(#e2e8f0, #374151);
    --twodo-color-secondary-active: light-dark(#cbd5e1, #4b5563);
    --twodo-color-accent: light-dark(#2f6b52, #7fc7a6);
    --twodo-color-accent-foreground: light-dark(#ffffff, #0a0a0a);
    --twodo-color-muted: light-dark(#f1f5f9, #1f2937);
    --twodo-color-muted-foreground: light-dark(#5c4a3c, #c2b2a2);
    --twodo-color-success: light-dark(#15803d, #22c55e);
    --twodo-color-success-foreground: light-dark(#ffffff, #0a0a0a);
    --twodo-color-warning: light-dark(#a16207, #f59e0b);
    --twodo-color-warning-foreground: light-dark(#ffffff, #0a0a0a);
    --twodo-color-danger: light-dark(#dc2626, #ef4444);
    --twodo-color-danger-foreground: light-dark(#ffffff, #0a0a0a);
    --twodo-color-info: light-dark(#2563eb, #3b82f6);
    --twodo-color-info-foreground: light-dark(#ffffff, #0a0a0a);
    --twodo-color-link: light-dark(#8a4a1c, #f0a45c);
    --twodo-color-link-hover: light-dark(#1d4ed8, #93c5fd);
    --twodo-color-link-visited: light-dark(#7c3aed, #c4b5fd);
    --twodo-color-selection: light-dark(#bfdbfe, #1e3a8a);
    --twodo-color-selection-foreground: light-dark(#0f172a, #f8fafc);
    --twodo-color-border: light-dark(#e0d2c0, #3a2c20);
    --twodo-color-border-strong: light-dark(#c6b19a, #54402f);
    --twodo-color-border-subtle: light-dark(#efe4d6, #2b2016);
    --twodo-color-ring: light-dark(#8a4a1c, #f0a45c);
    --twodo-color-input-background: light-dark(#ffffff, #1b140d);
    --twodo-color-input-foreground: light-dark(#0f172a, #f8fafc);
    --twodo-color-input-border: light-dark(#c6b19a, #54402f);
    --twodo-color-input-placeholder: light-dark(#64748b, #94a3b8);
    --twodo-font-family-base: ui-sans-serif, system-ui, 'Segoe UI', 'Noto Sans Arabic', sans-serif;
    --twodo-font-family-heading: ui-serif, Georgia, 'Noto Naskh Arabic', serif;
    --twodo-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    --twodo-font-weight-normal: 400;
    --twodo-font-weight-medium: 500;
    --twodo-font-weight-semibold: 600;
    --twodo-font-weight-bold: 700;
    --twodo-font-size-xs: clamp(0.694rem, calc(0.668rem + 0.065vw), 0.72rem);
    --twodo-font-size-sm: clamp(0.833rem, calc(0.766rem + 0.168vw), 0.9rem);
    --twodo-font-size-md: clamp(1rem, calc(0.875rem + 0.313vw), 1.125rem);
    --twodo-font-size-lg: clamp(1.2rem, calc(0.994rem + 0.515vw), 1.406rem);
    --twodo-font-size-xl: clamp(1.44rem, calc(1.122rem + 0.795vw), 1.758rem);
    --twodo-font-size-2xl: clamp(1.728rem, calc(1.259rem + 1.173vw), 2.197rem);
    --twodo-font-size-3xl: clamp(2.074rem, calc(1.401rem + 1.683vw), 2.747rem);
    --twodo-font-size-4xl: clamp(2.488rem, calc(1.543rem + 2.363vw), 3.433rem);
    --twodo-line-height-tight: 1.25;
    --twodo-line-height-normal: 1.5;
    --twodo-line-height-relaxed: 1.75;
    --twodo-letter-spacing-tight: -0.01em;
    --twodo-letter-spacing-normal: 0em;
    --twodo-letter-spacing-wide: 0.05em;
    --twodo-space-3xs: 0.125rem;
    --twodo-space-2xs: 0.25rem;
    --twodo-space-xs: 0.5rem;
    --twodo-space-sm: 0.75rem;
    --twodo-space-md: 1rem;
    --twodo-space-lg: 1.5rem;
    --twodo-space-xl: 2rem;
    --twodo-space-2xl: 3rem;
    --twodo-space-3xl: 4rem;
    --twodo-space-4xl: 6rem;
    --twodo-container-max-width: 72rem;
    --twodo-content-max-width: 70ch;
    --twodo-radius-sm: 0.125rem;
    --twodo-radius-md: 0.5rem;
    --twodo-radius-lg: 0.9rem;
    --twodo-radius-xl: 0.75rem;
    --twodo-radius-full: 9999px;
    --twodo-shadow-xs: 0 1px 2px 0 light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.6));
    --twodo-shadow-sm: 0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)), 0 1px 2px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
    --twodo-shadow-md: 0 4px 6px -1px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)), 0 2px 4px -2px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
    --twodo-shadow-lg: 0 10px 15px -3px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)), 0 4px 6px -4px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
    --twodo-shadow-xl: 0 20px 25px -5px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)), 0 8px 10px -6px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6));
    --twodo-border-width-thin: 1px;
    --twodo-border-width-medium: 2px;
    --twodo-border-width-thick: 4px;
    --twodo-duration-fast: 150ms;
    --twodo-duration-normal: 250ms;
    --twodo-duration-slow: 400ms;
    --twodo-easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --twodo-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
    --twodo-scale-font-base-min: 1rem;
    --twodo-scale-font-base-max: 1.125rem;
    --twodo-scale-font-ratio-min: 1.2;
    --twodo-scale-font-ratio-max: 1.25;
    --twodo-scale-space-unit: 0.25rem;
  }
  :root[data-twodo-mode='light'] {
    color-scheme: light;
  }
  :root[data-twodo-mode='dark'] {
    color-scheme: dark;
  }
}