@layer base {
  :root {
    --theme: oklch(0.541 0.281 293.009);
    --background: oklch(1 0 0);
    --foreground: oklch(0.141 0.005 285.823);
    --secondary-foreground: oklch(0.707 0.022 261.325);
    --muted: oklch(0.967 0.001 286.375);
    --muted-foreground: oklch(0.552 0.016 285.938);
    --destructive: oklch(0.577 0.245 27.325);
    --border: oklch(0.92 0.004 286.32);
    --input: oklch(0.92 0.004 286.32);
    --ring: oklch(0.705 0.015 286.067);
    --radius: 0.625rem;
  }
}

@layer utilities {
  /* Background Colors */
  .bg-theme { background-color: var(--theme); }
  .bg-background { background-color: var(--background); }
  .bg-muted { background-color: var(--muted); }
  .bg-destructive { background-color: var(--destructive); }

  /* Text Colors */
  .text-theme { color: var(--theme); }
  .text-primary { color: var(--foreground); }
  .text-secondary { color: var(--secondary-foreground); }
  .text-muted { color: var(--muted-foreground); }
  .text-destructive { color: var(--destructive-foreground); }

  /* Border & Input */
  .border-border { border-color: var(--border); }
  .border-input { border-color: var(--input); }
  .ring-ring { box-shadow: 0 0 0 3px var(--theme); }

  /* Border Radius */
  .rounded-lg { border-radius: var(--radius); }
  .rounded-md { border-radius: calc(var(--radius) - 2px); }
  .rounded-sm { border-radius: calc(var(--radius) - 4px); }
}

@layer base {
  * {
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }

  body::after {
    content: "DEMO DEMO DEMO";
    color: oklch(13% 0.028 261.692);
    display: inline-block;
    font-size: 100px;
    font-weight: 700;
    line-height: 1.5;
    opacity: 0.03;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    width: 300px;
  }
}