name: codex-desktop-noir
label: Codex Desktop Noir
description: "Minimal black graphite dashboard inspired by Codex Desktop: dense, technical, blue-green command accents, grid graphics."
palette:
  background: { hex: "#050607", alpha: 1 }
  midground: { hex: "#f2f7fb", alpha: 1 }
  foreground: { hex: "#ffffff", alpha: 0 }
  warmGlow: "rgba(59, 130, 246, 0.16)"
  noiseOpacity: 0.02
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.45rem"
  density: compact
layoutVariant: tiled
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#050607%22/%3E%3CradialGradient%20id=%22g%22%20cx=%2220%%22%20cy=%2215%%22%3E%3Cstop%20stop-color=%22#3b82f6%22%20stop-opacity=%22.22%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22#050607%22%20stop-opacity=%220%22/%3E%3C/radialGradient%3E%3Crect%20width=%221200%22%20height=%22680%22%20fill=%22url(#g)%22/%3E%3Cpath%20d=%22M0%2080%20H1200%20M0%20160%20H1200%20M0%20240%20H1200%20M0%20320%20H1200%20M0%20400%20H1200%20M0%20480%20H1200%20M0%20560%20H1200%20M120%200%20V680%20M240%200%20V680%20M360%200%20V680%20M480%200%20V680%20M600%200%20V680%20M720%200%20V680%20M840%200%20V680%20M960%200%20V680%20M1080%200%20V680%22%20stroke=%22#3b82f6%22%20stroke-opacity=%22.09%22/%3E%3Cpath%20d=%22M80%20600%20L360%20120%20L730%20520%20L1040%2090%22%20fill=%22none%22%20stroke=%22#34d399%22%20stroke-opacity=%22.18%22%20stroke-width=%222%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#3b82f6%22%20stroke-opacity=%22.85%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M47%2010%20L24%2045%20H41%20L34%2070%20L62%2032%20H45Z%22%20fill=%22#3b82f6%22/%3E%3Cpath%20d=%22M24%2045%20H41%22%20stroke=%22#34d399%22%20stroke-width=%223%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#3b82f6%22%20stroke-opacity=%22.85%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M47%2010%20L24%2045%20H41%20L34%2070%20L62%2032%20H45Z%22%20fill=%22#3b82f6%22/%3E%3Cpath%20d=%22M24%2045%20H41%22%20stroke=%22#34d399%22%20stroke-width=%223%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#3b82f6%22%20stroke-opacity=%22.85%22%20stroke-width=%223%22/%3E%3Cpath%20d=%22M47%2010%20L24%2045%20H41%20L34%2070%20L62%2032%20H45Z%22%20fill=%22#3b82f6%22/%3E%3Cpath%20d=%22M24%2045%20H41%22%20stroke=%22#34d399%22%20stroke-width=%223%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: "#0d1012"
  cardForeground: "#f2f7fb"
  popover: "#11161a"
  popoverForeground: "#f2f7fb"
  primary: "#3b82f6"
  primaryForeground: "#ffffff"
  secondary: "#34d399"
  secondaryForeground: "#f2f7fb"
  muted: "#111417"
  mutedForeground: "#a9b6c3"
  accent: "#102034"
  accentForeground: "#f2f7fb"
  destructive: "#f87171"
  destructiveForeground: "#fff7f7"
  success: "#34d399"
  warning: "#f6c453"
  border: "#27313a"
  input: "#27313a"
  ring: "#3b82f6"
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: 16.5rem; --theme-icon-radius: .35rem; --theme-nav-radius: .35rem; --theme-tab-clip: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
