@layer reset, base, site, layout;

@layer base {
  :root {
    color-scheme: light dark;

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: Georgia, "Apple Garamond", "Times New Roman", serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --text: #182033;
    --text-muted: #5e6878;
    --text-soft: #7a8494;
    --surface: rgba(255, 255, 255, 0.1);
    --surface-strong: rgba(255, 255, 255, 0.62);
    --surface-subtle: rgba(255, 255, 255, 0.24);
    --border: rgba(255, 255, 255, 0.56);
    --border-muted: rgba(108, 122, 145, 0.22);
    --accent: #3662ff;
    --accent-strong: #1d3fd9;
    --focus: #6d5dfc;
    --project-title: #203a8f;
    --project-title-hover: #6d3ffc;

    --page-bg:
      radial-gradient(circle at 8% 8%, rgba(73, 116, 226, 0.34), transparent 28rem),
      radial-gradient(circle at 92% 18%, rgba(221, 105, 154, 0.24), transparent 26rem),
      radial-gradient(circle at 52% 92%, rgba(72, 181, 169, 0.18), transparent 30rem),
      linear-gradient(135deg, #eef3fb 0%, #dde5f5 48%, #f2dde8 100%);

    --shadow-glass: 0 1.5rem 4rem rgba(21, 31, 56, 0.14);
    --shadow-soft: 0 0.75rem 2rem rgba(21, 31, 56, 0.1);
    --blur-glass: blur(22px) saturate(1.25);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.35rem;

    --content-width: 74rem;
    --sidebar-width: 16rem;
    --header-height: 4.25rem;
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="auto"] {
    color-scheme: light dark;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;

    --text: #f4f7fb;
    --text-muted: #b8c2d4;
    --text-soft: #8f9bb0;
    --surface: rgba(13, 17, 32, 0.5);
    --surface-strong: rgba(20, 25, 43, 0.78);
    --surface-subtle: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.16);
    --border-muted: rgba(221, 226, 239, 0.12);
    --accent: #c8d3ff;
    --accent-strong: #9db1ff;
    --focus: #c7b8ff;
    --project-title: #d7ddff;
    --project-title-hover: #f0b7ff;

    --page-bg:
      radial-gradient(circle at 95% 102%, rgba(255, 143, 84, 0.58), transparent 44rem),
      radial-gradient(circle at 55% 88%, rgba(255, 91, 132, 0.32), transparent 26rem),
      linear-gradient(180deg, #05091a 0%, #0b1a3f 42%, #312255 72%, #7a3558 100%);

    --shadow-glass: 0 1.5rem 4rem rgba(0, 0, 0, 0.34);
    --shadow-soft: 0 0.75rem 2rem rgba(0, 0, 0, 0.28);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --text: #f4f7fb;
      --text-muted: #b8c2d4;
      --text-soft: #8f9bb0;
      --surface: rgba(13, 17, 32, 0.5);
      --surface-strong: rgba(20, 25, 43, 0.78);
      --surface-subtle: rgba(255, 255, 255, 0.08);
      --border: rgba(255, 255, 255, 0.16);
      --border-muted: rgba(221, 226, 239, 0.12);
      --accent: #c8d3ff;
      --accent-strong: #9db1ff;
      --focus: #c7b8ff;
      --project-title: #d7ddff;
      --project-title-hover: #f0b7ff;

      --page-bg:
        radial-gradient(circle at 95% 102%, rgba(255, 143, 84, 0.58), transparent 44rem),
        radial-gradient(circle at 55% 88%, rgba(255, 91, 132, 0.32), transparent 26rem),
        linear-gradient(180deg, #05091a 0%, #0b1a3f 42%, #312255 72%, #7a3558 100%);

      --shadow-glass: 0 1.5rem 4rem rgba(0, 0, 0, 0.34);
      --shadow-soft: 0 0.75rem 2rem rgba(0, 0, 0, 0.28);
    }
  }
}