@layer theme {
  [data-theme="light"] { --color-scheme: light; }
  [data-theme="dark"]  { --color-scheme: dark; }

  :where(html) {
    color-scheme: var(--color-scheme, light dark);

    /* Deep Teal Primary */
    --palette-hue: 180;
    --palette-hue-rotate-by: 0;
    --palette-chroma: 0.12;
    --font-sans: 'Outfit', sans-serif;
    --font-heading: 'Syne', sans-serif;

    /* Primary Colors - Deep Teal */
    --primary: oklch(45% 0.12 180);
    --primary-light: oklch(65% 0.12 180);
    --primary-dark: oklch(30% 0.12 180);
    --primary-contrast: white;

    /* Accent Orange */
    --accent: oklch(68% 0.18 45);
    --accent-light: oklch(78% 0.18 45);
    --accent-dark: oklch(58% 0.18 45);

    /* Text */
    --text-color-1: light-dark(oklch(20% 0.02 180), oklch(98% 0.02 180));
    --text-color-2: light-dark(oklch(45% 0.02 180), oklch(78% 0.02 180));

    /* Surfaces */
    --surface-default: light-dark(oklch(98% 0.01 180), oklch(15% 0.02 180));
    --surface-filled: light-dark(oklch(94% 0.02 180), oklch(18% 0.02 180));
    --surface-tonal: light-dark(oklch(96% 0.02 180), oklch(20% 0.02 180));
    --surface-elevated: light-dark(white, oklch(22% 0.02 180));

    /* Shadows */
    --shadow-color: light-dark(180 10% 15%, 180 20% 5%);
    --shadow-strength: light-dark(2%, 30%);
    --inner-shadow-highlight: light-dark(
      inset 0 -1px 0 0 oklch(100% 0 0 / 0.4),
      inset 0 1px 0 0 oklch(0% 0 0 / 0.3),
      inset 0 -1px 0 0 oklch(100% 0 0 / 0.1),
      inset 0 1px 0 0 oklch(0% 0 0 / 0.5)
    );

    /* Borders */
    --border-color: light-dark(oklch(88% 0.02 180), oklch(28% 0.02 180));
    --border-radius: 16px;
    --border-width: 1px;
    --field-border-color: var(--border-color);
    --field-border-radius: 12px;
    --field-border-width: 1px;
    --button-border-radius: 24px;
  }

  /* Body Defaults */
  body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    color: var(--text-color-1);
    background: var(--surface-default);
    line-height: 1.6;
    overflow-x: hidden;
  }

  /* Smooth Scroll */
  html {
    scroll-behavior: smooth;
  }
}