{/* This file is NOT rendered directly. Sections are imported by framework pages. */}

<section id="content">
  Every theme token is converted to a `--c15t-*` CSS custom property at runtime. You can override these variables in your stylesheet without using the JavaScript theme API.

  ## Variable Reference

  | Property    | Value                                |
  | :---------- | :----------------------------------- |
  | Type Name   | \`ThemeCSSVariables\`                |
  | Source Path | \`./packages/ui/src/theme/types.ts\` |

  \*AutoTypeTable: Could not extract \`ThemeCSSVariables\` from \`./packages/ui/src/theme/types.ts\`. Verify the path/name and that the file is included by your tsconfig.\*

  ## Overriding Variables

  Override in your stylesheet:

  ```css
  :root {
    --c15t-primary: #8b5cf6;
    --c15t-surface: #fafafa;
    --c15t-radius-md: 1rem;
  }

  /* Dark mode overrides */
  .dark,
  .c15t-dark {
    --c15t-primary: #a78bfa;
    --c15t-surface: #18181b;
    --c15t-text: #fafafa;
  }
  ```

  ## Scoped Overrides

  Target specific components by scoping variables:

  ```tsx
  <div className="checkout-consent">
    <ConsentBanner />
  </div>
  ```

  ```css
  /* Only affect c15t components inside .checkout-consent */
  .checkout-consent {
    --c15t-surface: #f0f9ff;
    --c15t-radius-lg: 1.5rem;
  }
  ```
</section>