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

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

    /* PRIMARY COLOR - Forest/Trail Green */
    --palette-hue: var(--oklch-green);
    --palette-hue-rotate-by: -5;
    --palette-chroma: 0.75;

    /* Font - Outdoor Adventure Typography */
    --font-sans: 'Outfit', sans-serif;
    --font-display: 'Bebas Neue', sans-serif;

    /* Primary - Earthy Trail Green */
    --primary: var(--color-8);
    --primary-light: oklch(from var(--primary) calc(l * 1.15) c h);
    --primary-dark: oklch(from var(--primary) calc(l * 0.85) c h);
    --primary-contrast: var(--gray-1);

    /* Accent - Mountain Orange */
    --accent: var(--orange-8);
    --accent-light: oklch(from var(--accent) calc(l * 1.15) c h);
    --accent-contrast: var(--gray-1);

    /* Text */
    --text-color-1: light-dark(var(--gray-15), var(--gray-1));
    --text-color-2: light-dark(var(--gray-12), var(--gray-5));
    --text-color-3: light-dark(var(--gray-10), var(--gray-7));

    /* Surface - Topographic layers */
    --surface-default: light-dark(var(--gray-0), var(--gray-14));
    --surface-filled: light-dark(var(--gray-2), var(--gray-15));
    --surface-tonal: light-dark(var(--green-2), var(--green-12));
    --surface-elevated: light-dark(var(--gray-1), var(--gray-13));

    --shadow-color: light-dark(220 3% 15%, 220 40% 2%);
    --shadow-strength: light-dark(2%, 12%);
    --inner-shadow-highlight: light-dark(
      inset 0 -0.5px 0 0 #fff,
      inset 0 0.5px 0 0 #0001,
      inset 0 -0.5px 0 0 #fff1,
      inset 0 0.5px 0 0 #0007
    );

    /* Borders */
    --border-color: light-dark(var(--gray-5), var(--gray-11));
    --border-radius: var(--size-2);
    --border-width: var(--border-size-2);

    /* Fields & Buttons */
    --field-border-color: var(--border-color);
    --field-border-radius: var(--size-2);
    --field-border-width: var(--border-size-2);
    --button-border-radius: var(--size-2);

    /* App specific */
    --sidebar-width: 280px;
    --header-height: 64px;
  }

  /* Reset */


  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
  }

  body {
    font-family: var(--font-sans);
    background: var(--surface-default);
    color: var(--text-color-1);
    line-height: 1.6;
  }

  #app {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    margin: 0;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  h1 { font-size: var(--font-size-7); line-height: 1.1; }
  h2 { font-size: var(--font-size-6); line-height: 1.2; }
  h3 { font-size: var(--font-size-5); line-height: 1.2; }
  h4 { font-size: var(--font-size-4); line-height: 1.3; }

  p {
    margin: 0 0 var(--size-3) 0;
  }

  /* Scrollbar styling */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--surface-default);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--size-2);
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-color-3);
  }
}