{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "global-styles",
  "title": "Global Styles",
  "author": "shoota <https://github.com/shoota>",
  "description": "Global Styles — gymnopédies blog reading primitive.",
  "registryDependencies": [
    "https://gymnopedies.shoota.work/r/utils.json",
    "https://gymnopedies.shoota.work/r/theme.json"
  ],
  "files": [
    {
      "path": "src/components/blog/global-styles.tsx",
      "content": "/**\n * <GlobalStyles /> — drop-in typography reset for raw HTML blog content.\n *\n * Use this component once at the root of a reading-oriented page (or anywhere\n * that bare HTML is rendered — for example, `dangerouslySetInnerHTML` for a\n * Markdown-rendered post). It injects a `<style>` element that styles bare\n * h1-h6, p, ul/ol, blockquote, table, code/pre, figure, hr, fieldset, etc. so\n * the page maintains gymnopédies' dark / serif / glow aesthetic without\n * needing every element to be a React component.\n *\n * The rules reference the same CSS variables (--background, --foreground,\n * --primary, --card, --muted-foreground, --font-serif, --font-mono, --border)\n * defined in `src/styles/globals.css`, so they adapt to the active theme.\n */\n\nconst GLOBAL_CSS = /* css */ `\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  html,\n  body {\n    background-color: var(--background);\n    font-family: var(--font-serif);\n    font-size: 1rem;\n    line-height: 1.3;\n    color: var(--foreground);\n    text-shadow: 0 0 2px var(--muted-foreground);\n    scrollbar-width: thin;\n    scrollbar-color: var(--muted-foreground) var(--card);\n  }\n\n  ::selection {\n    background-color: rgba(0, 248, 248, 0.3);\n    color: inherit;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0 0 2rem;\n    font-weight: 700;\n    color: var(--foreground);\n    letter-spacing: 0.5px;\n    text-shadow: 0 0 4px var(--foreground);\n  }\n  h1 a,\n  h2 a,\n  h3 a,\n  h4 a,\n  h5 a,\n  h6 a {\n    text-shadow: 0 0 4px var(--foreground);\n  }\n  h1 { font-size: 1.75rem; }\n  h2 { font-size: 1.625rem; }\n  h3 { font-size: 1.5rem; }\n  h4 { font-size: 1.375rem; }\n  h5 { font-size: 1.25rem; }\n  h6 { font-size: 1.125rem; }\n\n  p {\n    margin: 0 0 2rem;\n    font-size: 1rem;\n  }\n\n  b,\n  strong {\n    font-weight: bolder;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  a {\n    color: var(--primary);\n    outline: none;\n    text-decoration: none;\n  }\n  a:hover,\n  a:focus {\n    color: var(--primary);\n    text-shadow: 0 0 4px var(--primary);\n  }\n  a h1,\n  a h2,\n  a h3,\n  a h4,\n  a h5,\n  a h6 {\n    text-shadow: 0 0 2px var(--foreground);\n  }\n\n  ul,\n  ol {\n    margin: 0 0 2rem;\n    padding-left: 3rem;\n  }\n  ul {\n    list-style: disc;\n  }\n  ol {\n    list-style: decimal;\n  }\n  ul ul,\n  ol ul {\n    list-style: circle;\n  }\n  ul ul ul,\n  ol ol ol {\n    list-style: square;\n  }\n  ul ol,\n  ol ol {\n    list-style: decimal;\n  }\n  ul ul,\n  ol ul,\n  ul ol,\n  ol ol {\n    margin-bottom: 0;\n  }\n  li {\n    margin-top: 0.4rem;\n  }\n  li::marker {\n    color: var(--muted-foreground);\n  }\n\n  code,\n  pre {\n    font-family: var(--font-mono);\n    overflow-x: auto;\n  }\n  pre {\n    margin: 0 0 2rem;\n    display: block;\n    border-width: 1px 0;\n    border-style: solid;\n    border-color: var(--border);\n    padding: 2rem;\n    font-size: 0.875rem;\n    text-shadow: none;\n    box-shadow: 0 0 12px var(--muted-foreground) inset;\n  }\n\n  blockquote {\n    margin: 0 0 2rem;\n    border-left: 4px solid var(--muted-foreground);\n    padding: 0.75rem 2rem 0.75rem 1.5rem;\n    background-color: rgba(153, 153, 153, 0.05);\n  }\n  blockquote p:last-of-type {\n    margin-bottom: 0;\n  }\n\n  table {\n    margin: 0 0 2rem;\n    border-collapse: separate;\n    border-spacing: 0.5rem;\n    text-align: left;\n    text-shadow: none;\n  }\n  thead tr {\n    background-color: rgba(153, 153, 153, 0.15);\n  }\n  thead th,\n  thead td {\n    border-bottom: 1px solid var(--primary);\n  }\n  tbody tr {\n    background-color: rgba(153, 153, 153, 0.05);\n  }\n  tbody tr:hover,\n  tbody tr:focus {\n    color: var(--primary);\n    background-color: rgba(153, 153, 153, 0.1);\n  }\n  tbody td {\n    border-bottom: 1px solid var(--foreground);\n  }\n  th,\n  td {\n    padding: 0.5rem 0.75rem;\n  }\n  tr {\n    transition: background-color 100ms ease-out;\n  }\n\n  img {\n    max-width: 100%;\n  }\n  figure {\n    margin: 0 0 2rem;\n  }\n  figure img {\n    margin-bottom: 0;\n    vertical-align: top;\n  }\n\n  hr {\n    margin: 2rem 0;\n    display: block;\n    height: 0;\n    border-width: 0 0 1px 0;\n    border-style: solid;\n    border-color: var(--muted-foreground);\n  }\n\n  fieldset {\n    margin: 0 0 2rem;\n    border-style: solid;\n    border-width: 1px;\n    border-color: #0b8481;\n    padding: 2rem;\n  }\n\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    font-family: inherit;\n    font-size: 100%;\n    line-height: 1.2;\n  }\n  button,\n  [type=\"button\"],\n  [type=\"reset\"],\n  [type=\"submit\"] {\n    display: inline-block;\n    outline: none;\n    border: none;\n    cursor: pointer;\n    -webkit-appearance: button;\n  }\n  button:hover,\n  [type=\"button\"]:hover,\n  [type=\"reset\"]:hover,\n  [type=\"submit\"]:hover,\n  button:focus,\n  [type=\"button\"]:focus,\n  [type=\"reset\"]:focus,\n  [type=\"submit\"]:focus {\n    outline: none;\n  }\n  button:disabled,\n  [type=\"button\"]:disabled,\n  [type=\"reset\"]:disabled,\n  [type=\"submit\"]:disabled {\n    cursor: auto;\n  }\n  button,\n  input {\n    overflow: visible;\n  }\n`\n\nexport function GlobalStyles() {\n  return <style dangerouslySetInnerHTML={{ __html: GLOBAL_CSS }} />\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "blog",
    "reading"
  ],
  "type": "registry:component"
}