/**
 * Lux Help Center Theme
 * No utility engine: tokens and rules, read straight by the browser
 */

/* The library's sheets are imported from the LAYOUT, not here: a bare package
   specifier in a plain @import does not resolve in this pipeline, and the
   failure is silent — the whole file is dropped, so the tokens below never
   reach the document and every link renders browser-default blue. */


:root {
  --font-sans: var(--font-inter), system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --radius: 0.5rem;

  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
}

/* Light mode */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 96%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 64%;
}

/* Dark mode */
.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 98%;
  --card: 0 0% 4%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 4%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 4%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 8%;
  --muted-foreground: 0 0% 55%;
  --accent: 0 0% 12%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 15%;
  --input: 0 0% 15%;
  --ring: 0 0% 36%;
}


  * {
    border-color: hsl(var(--border));
  }

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
  }

  body {
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: rgba(0, 0, 0, 0.15);
  }

  .dark ::selection {
    background: rgba(255, 255, 255, 0.20);
  }


/* The body's ground. Stated here rather than as classes on <body>, which sits
   outside the provider and so reads none of them. */
body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
}