@layer defaults {
  :root {
    --color-primary: oklch(56.59% 0.241 13.72);
    --color-primary-alt: oklch(67.19% 0.241 13.72);
    --color-primary-invert: #ffffff;
    --color-secondary: #f17f29;
    --color-secondary-alt: #c16621;
    --color-text: #0d1f2d;
    --color-text-secondary: #546a7b;
    --color-text-disabled: #666;
    --color-title: var(--color-text);
    --color-heading: var(--color-text);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-alt);
    --color-link-decoration: var(--color-primary);
    --color-border: #94a1b2;
    --color-border-alt: var(--color-background-alt);
    --color-background: #fff;
    --color-background-alt: #ccd2da;
    --color-surface: #f3f5f6;
    --color-code: #010203;
    --color-logo: var(--color-title);
    --color-logo-hover: var(--color-primary);
    --color-nav: var(--color-title);
    --color-nav-hover: var(--color-secondary);
    --color-nav-decoration: var(--color-primary);
    --color-list-marker: var(--color-primary);  
    --hyphens: auto;
  }

  
}

@layer theme {
  [data-theme='default'] {
    --color-primary: oklch(56.59% 0.241 13.72);
    --color-primary-alt: oklch(67.19% 0.241 13.72);
    --color-primary-invert: #ffffff;
    --color-secondary: #f17f29;
    --color-secondary-alt: #c16621;
    --color-text: #0d1f2d;
    --color-text-secondary: #546a7b;
    --color-text-disabled: #666;
    --color-title: var(--color-text);
    --color-heading: var(--color-text);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-alt);
    --color-link-decoration: var(--color-primary);
    --color-border: #94a1b2;
    --color-border-alt: var(--color-background-alt);
    --color-background: #fff;
    --color-background-alt: #ccd2da;
    --color-surface: #f3f5f6;
    --color-code: #010203;
    --color-logo: var(--color-title);
    --color-logo-hover: var(--color-primary);
    --color-nav: var(--color-title);
    --color-nav-hover: var(--color-secondary);
    --color-nav-decoration: var(--color-primary);
    --color-list-marker: var(--color-primary);  
    --hyphens: auto;
    }
  [data-theme='dark'] {
    --color-primary: #27d066;
    --color-primary-alt: #6bee9c;
    --color-primary-invert: #1c1e22;
    --color-secondary: #194c5b;
    --color-secondary-alt: #22636d;
    --color-text: white;
    --color-text-secondary: #9fb1bc;
    --color-title: white;
    --color-heading: white;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-alt);
    --color-link-decoration: var(--color-primary);
    --color-border: var(--color-secondary);
    --color-border-alt: var(--color-text-secondary);
    --color-background: #1c1e22;
    --color-background-alt: #16181b;
    --color-surface: #1d1e1f;
    --color-code: white;
    --color-logo: white;
    --color-logo-hover: var(--color-primary);
    --color-nav: var(--color-text-secondary);
    --color-nav-hover: white;
    --color-nav-decoration: var(--color-primary);
    }
  [data-theme='mammoth-dark'] {
    --color-primary: #ad38e9;
    --color-primary-alt: #b313f7;
    --color-secondary: #ad38e9;
    --color-secondary-alt: #22636d;
    --color-text: white;
    --color-text-secondary: #9fb1bc;
    --color-title: white;
    --color-heading: white;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-alt);
    --color-link-decoration: var(--color-primary);
    --color-border: #625c6e;
    --color-background: #261a34;
    --color-background-alt: #190e25;
    --color-surface: #190e25;
    --color-code: white;
    --color-logo: white;
    --color-logo-hover: var(--color-primary);
    --color-nav: var(--color-text);
    --color-nav-hover: white;
    --color-nav-decoration: var(--color-primary);
    --code-bg: var(--color-background-alt);
    }
  }