name: shadow-monarch
label: Shadow Monarch
description: "Solo Leveling-inspired monarch theme: obsidian surfaces, violet-blue shadows, icy status highlights."
palette:
  background: { hex: "#05050a", alpha: 1 }
  midground: { hex: "#f0f3ff", alpha: 1 }
  foreground: { hex: "#ffffff", alpha: 0 }
  warmGlow: "rgba(124, 58, 237, 0.20)"
  noiseOpacity: 0.06
typography:
  fontSans: '"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif'
  fontMono: '"JetBrains Mono", ui-monospace, "SF Mono", monospace'
  fontDisplay: '"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif'
  fontUrl: "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@400;500;700&display=swap"
  baseSize: "16px"
  lineHeight: "1.62"
  letterSpacing: "0"
layout:
  radius: "0.55rem"
  density: comfortable
layoutVariant: cockpit
assets:
  bg: 'url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20680%22%3E%3Crect%20width=%221200%22%20height=%22680%22%20fill=%22#05050a%22/%3E%3CradialGradient%20id=%22g%22%20cx=%2220%%22%20cy=%2215%%22%3E%3Cstop%20stop-color=%22#7c3aed%22%20stop-opacity=%22.22%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22#05050a%22%20stop-opacity=%220%22/%3E%3C/radialGradient%3E%3Crect%20width=%221200%22%20height=%22680%22%20fill=%22url(#g)%22/%3E%3Cpath%20d=%22M650%2040%20C570%20190%20720%20250%20610%20390%20C520%20500%20560%20620%20560%20620%20C710%20540%20660%20460%20760%20360%20C875%20245%20735%20160%20650%2040Z%22%20fill=%22#7c3aed%22%20fill-opacity=%22.16%22/%3E%3Cpath%20d=%22M0%20620%20C260%20520%20440%20660%20690%20540%20S1030%20430%201200%20560%22%20fill=%22none%22%20stroke=%22#38bdf8%22%20stroke-opacity=%22.18%22%20stroke-width=%224%22/%3E%3C/svg%3E")'
  logo: 'url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2084%2084%22%3E%3Crect%20width=%2284%22%20height=%2284%22%20rx=%2220%22%20fill=%22black%22%20fill-opacity=%22.20%22/%3E%3Cpath%20d=%22M42%204%20L75%2023%20V61%20L42%2080%20L9%2061%20V23Z%22%20fill=%22none%22%20stroke=%22#7c3aed%22%20stroke-opacity=%22.85%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M42%208%20C30%2030%2050%2036%2035%2054%20C48%2050%2055%2064%2042%2076%20C64%2066%2070%2042%2055%2027%20C49%2021%2048%2014%2042%208Z%22%20fill=%22#7c3aed%22/%3E%3Ccircle%20cx=%2247%22%20cy=%2238%22%20r=%224%22%20fill=%22#38bdf8%22/%3E%3C/svg%3E")'
  crest: 'url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2084%2084%22%3E%3Crect%20width=%2284%22%20height=%2284%22%20rx=%2220%22%20fill=%22black%22%20fill-opacity=%22.20%22/%3E%3Cpath%20d=%22M42%204%20L75%2023%20V61%20L42%2080%20L9%2061%20V23Z%22%20fill=%22none%22%20stroke=%22#7c3aed%22%20stroke-opacity=%22.85%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M42%208%20C30%2030%2050%2036%2035%2054%20C48%2050%2055%2064%2042%2076%20C64%2066%2070%2042%2055%2027%20C49%2021%2048%2014%2042%208Z%22%20fill=%22#7c3aed%22/%3E%3Ccircle%20cx=%2247%22%20cy=%2238%22%20r=%224%22%20fill=%22#38bdf8%22/%3E%3C/svg%3E")'
  hero: 'url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2084%2084%22%3E%3Crect%20width=%2284%22%20height=%2284%22%20rx=%2220%22%20fill=%22black%22%20fill-opacity=%22.20%22/%3E%3Cpath%20d=%22M42%204%20L75%2023%20V61%20L42%2080%20L9%2061%20V23Z%22%20fill=%22none%22%20stroke=%22#7c3aed%22%20stroke-opacity=%22.85%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M42%208%20C30%2030%2050%2036%2035%2054%20C48%2050%2055%2064%2042%2076%20C64%2066%2070%2042%2055%2027%20C49%2021%2048%2014%2042%208Z%22%20fill=%22#7c3aed%22/%3E%3Ccircle%20cx=%2247%22%20cy=%2238%22%20r=%224%22%20fill=%22#38bdf8%22/%3E%3C/svg%3E")'
componentStyles:
  card:
    background: "linear-gradient(180deg, color-mix(in srgb, var(--color-card) 92%, transparent), color-mix(in srgb, var(--color-card) 68%, transparent))"
    border: "1px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border))"
    boxShadow: "0 0 0 1px color-mix(in srgb, white 4%, transparent) inset, 0 18px 60px -46px var(--color-primary)"
  sidebar:
    background: "linear-gradient(180deg, color-mix(in srgb, var(--color-card) 92%, black), color-mix(in srgb, var(--color-background) 96%, black))"
  header:
    background: "linear-gradient(90deg, color-mix(in srgb, var(--color-card) 92%, black), color-mix(in srgb, var(--color-primary) 10%, var(--color-card)))"
  tab:
    clipPath: "var(--theme-tab-clip, none)"
  backdrop:
    fillerBlendMode: "screen"
    fillerOpacity: "0.20"
    backgroundSize: "cover"
    backgroundPosition: "center"
colorOverrides:
  card: "#0d0d18"
  cardForeground: "#f0f3ff"
  popover: "#131326"
  popoverForeground: "#f0f3ff"
  primary: "#7c3aed"
  primaryForeground: "#ffffff"
  secondary: "#38bdf8"
  secondaryForeground: "#f0f3ff"
  muted: "#10111f"
  mutedForeground: "#aeb3d0"
  accent: "#20133b"
  accentForeground: "#f0f3ff"
  destructive: "#ef4444"
  destructiveForeground: "#fff7f7"
  success: "#38bdf8"
  warning: "#c084fc"
  border: "#31314a"
  input: "#31314a"
  ring: "#7c3aed"
customCSS: |

  :root { color-scheme: dark; }
  body { text-rendering: optimizeLegibility; }
  * { text-shadow: none !important; }
  [class*="noise"] { opacity: var(--theme-noise-opacity, 0.12) !important; }
  [class*="glow"], [class*="aurora"] { opacity: 0.38 !important; filter: blur(42px) saturate(0.9) !important; }

  /* Theme-pack chrome: crest, icon badges, HUD cards, and layout rhythm. */
  aside { width: var(--theme-sidebar-width, 18rem) !important; box-shadow: var(--theme-sidebar-shadow, none); }
  aside > div:first-child { min-height: 4.8rem; padding-inline: 1rem; position: relative; }
  aside > div:first-child::before {
    content: "";
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    display: block;
    margin-right: .65rem;
    background-image: var(--theme-asset-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--color-primary) 45%, transparent));
  }
  nav a svg, aside button svg {
    box-sizing: content-box;
    padding: .36rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 48%, transparent);
    border-radius: var(--theme-icon-radius, .75rem);
    background: var(--theme-icon-bg, color-mix(in srgb, var(--color-primary) 13%, transparent));
    color: var(--color-primary);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, white 7%, transparent), 0 0 18px color-mix(in srgb, var(--color-primary) 16%, transparent);
  }
  nav a[aria-current="page"] svg {
    color: var(--color-primary-foreground);
    background: var(--theme-active-icon-bg, linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 40%, black)));
    border-color: color-mix(in srgb, var(--color-primary) 80%, white 10%);
  }
  nav a {
    margin: .14rem .65rem;
    border: 1px solid transparent;
    border-radius: var(--theme-nav-radius, .8rem);
  }
  nav a[aria-current="page"] {
    background: var(--theme-active-nav-bg, color-mix(in srgb, var(--color-primary) 14%, transparent));
    border-color: color-mix(in srgb, var(--color-primary) 32%, transparent);
  }
  main, [data-layout-variant] .relative.z-2 { background-image: var(--theme-page-watermark); background-repeat: no-repeat; background-position: right 2rem bottom 1.4rem; background-size: min(38vw, 26rem); }
  .bg-card, [class*="bg-card"] { backdrop-filter: blur(14px); }
  button, input, textarea, select { min-height: 2.45rem; }
  [role="button"], button { transition: border-color 120ms ease, background-color 120ms ease, transform 120ms ease; }
  [role="button"]:hover, button:hover { transform: translateY(-1px); }
  @media (min-width: 1024px) {
    [data-layout-variant="cockpit"] .relative.z-2 { padding-inline: 2rem !important; }
    [data-layout-variant="tiled"] .relative.z-2 { padding-inline: 1.1rem !important; }
  }
  :root { --theme-sidebar-width: 18.75rem; --theme-icon-radius: .5rem; --theme-nav-radius: .5rem; --theme-sidebar-shadow: 18px 0 90px -70px var(--color-primary); }
