/* app/client/src/styles/variables.css */
@layer variables {
  :root {
    --color-000: oklch(100% 0 0);
    --color-100: oklch(90% 0 0);
    --color-200: oklch(80% 0 0);
    --color-300: oklch(70% 0 0);
    --color-background: oklch(100% 0 0);
    --color-foreground: oklch(0% 0 0);
    --color-divider: oklch(30% 0 0);
    --color-accent: oklch(95% .1 117);
    --border-radius: 4px;
    --max-content-width: 1200px;
    --font-sans: system-ui, sans-serif;
    --font-mono: ui-monospace, Consolas, monospace;
    --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
    --text-2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
    --text-3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
    --text-4: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
    --text-5: 1.125rem;
    --text-6: 1rem;
    --text-7: .875rem;
    --text-8: .75rem;
    --text-regular: var(--text-6);
    --leading-normal: 1.5;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 600;
    --shadow-small: 0 1px 2px 0 #0000000d;
    --shadow-medium: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-large: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-000: oklch(0% 0 0);
      --color-100: oklch(10% 0 0);
      --color-200: oklch(20% 0 0);
      --color-300: oklch(30% 0 0);
      --color-background: #000;
      --color-foreground: #fff;
      --color-divider: oklch(50% 0 0);
    }
  }
}

/* app/client/src/styles/reset.css */
@layer reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    background-color: oklch(from var(--color-000) calc(l - .02) c h);
    color: var(--color-foreground);
    --buncss-light: initial;
    --buncss-dark: ;
    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    html {
      --buncss-light: ;
      --buncss-dark: initial;
    }
  }

  @media (prefers-color-scheme: dark) {
    html {
      background-color: oklch(from var(--color-000) calc(l + .2) c h);
    }
  }

  body, dialog, [popover] {
    font-family: var(--font-sans);
    font-size: var(--text-regular);
    line-height: var(--leading-normal);
    color: var(--color-foreground);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }

  ul[role="list"], ol[role="list"], ul, ol {
    list-style: none;
  }

  button, input, label {
    line-height: 1.1;
  }

  h1, h2, h3, h4 {
    font-weight: var(--font-semibold);
    text-wrap: balance;
    line-height: 1.25;
  }

  img, picture {
    display: block;
    max-width: 100%;
  }

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--color-background) inset !important;
    -webkit-text-fill-color: var(--color-foreground) !important;
  }

  input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px var(--color-background) inset !important;
    -webkit-text-fill-color: var(--color-foreground) !important;
  }

  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-background) inset !important;
    -webkit-text-fill-color: var(--color-foreground) !important;
  }

  svg.icon {
    fill: var(--color-foreground);
    width: 3rem;
    height: 3rem;
  }
}

/* app/client/src/styles/utilities.css */


/* app/client/src/components/Dropdown.css */
@layer components {
  x-dropdown button[popovertarget] {
    anchor-name: --popover-target;
    cursor: pointer;
    background-color: #0000;
    border: none;
  }

  x-dropdown menu[popover] {
    position-anchor: --popover-target;
    position-area: bottom span-right;
    position-try-fallbacks: fip-block;
    border: none;
  }

  x-dropdown li[role="menuitem"] {
    border: none;
  }
}

/* app/client/src/components/UserProfileMenu.css */
@layer components {
  x-user-profile-menu a {
    text-decoration: none;
    color: var(--color-foreground);
  }
}

/* app/client/src/pages/index.css */
@layer variables, reset, utilities, components, app;

@layer app {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
  }

  body > header {
    display: flex;
    border-block-end: 1px solid var(--color-300);
    justify-content: space-between;
    align-items:  center;
    padding: 1rem;
  }

  body > main {
    padding: 1rem;
  }

  body > footer {
    border-block-start: 1px solid var(--color-300);
    padding: 1rem;
  }
}