global.css

/*
NOTE(jimmylee):
Color palette for Sacred Computer. All color primitives must use values accepted
by the ANSI/ASCII 256-color and 24-bit true color palettes — Standard (SGR 30-37,
90-97), 256-color (SGR 38;5;n), grayscale ramp (232-255), or 24-bit true color
(SGR 38;2;r;g;b). Do not add colors outside this spec. The OKLCH tint themes
downstream are recalibrated against the same primitives so the React UI matches
what the Simulacrum CLI renders.
*/

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
embed,
em,
figure,
figcaption,
fieldset,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

a {
  background: var(--theme-border-subdued);
  color: var(--theme-text);

  &:hover {
    background: var(--theme-focused-foreground);
    color: var(--theme-text);
  }

  &:focus {
    background: var(--theme-focused-foreground);
    color: var(--theme-text);
    outline: 0;
  }
}

ul {
  list-style-position: inside;
  list-style-type: '▪';
  text-indent: -1ch;
}

ol {
  list-style-type: '';
  list-style-position: inside;
  counter-reset: cupcake;
  text-indent: -1ch;
}

ul ul,
ul ol,
ol ul,
ol ol {
  padding-left: 2ch;
}

ol li {
  padding-left: 1ch;
  counter-increment: cupcake;
}

ul li:before {
  content: ' ';
  display: inline-block;
  width: 1ch;
  height: 0;
  visibility: hidden;
}

ol li:before {
  content: counters(cupcake, '.') '. ';
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html,
body {
  /* ------------------------------------------------------------------ */
  /* Standard 16 Colors (SGR 38;5;0-15)                                 */
  /* ------------------------------------------------------------------ */
  --ansi-0-black: #000000;
  --ansi-1-maroon: #800000;
  --ansi-2-green: #008000;
  --ansi-3-olive: #808000;
  --ansi-4-navy: #000080;
  --ansi-5-purple: #800080;
  --ansi-6-teal: #008080;
  --ansi-7-silver: #c0c0c0;
  --ansi-8-gray: #808080;
  --ansi-9-red: #ff0000;
  --ansi-10-lime: #00ff00;
  --ansi-11-yellow: #ffff00;
  --ansi-12-blue: #0000ff;
  --ansi-13-fuchsia: #ff00ff;
  --ansi-14-aqua: #00ffff;
  --ansi-15-white: #ffffff;

  /* ------------------------------------------------------------------ */
  /* 216 Color Cube (SGR 38;5;16-231)                                   */
  /* Channels: 0x00, 0x5F, 0x87, 0xAF, 0xD7, 0xFF                       */
  /* ------------------------------------------------------------------ */
  --ansi-100-yellow4a: #878700;
  --ansi-148-yellow3a: #afd700;
  --ansi-232-gray-3: #080808;
  --ansi-235-gray-15: #262626;
  --ansi-237-gray-23: #3a3a3a;
  --ansi-240-gray-35: #585858;
  --ansi-242-gray-42: #6c6c6c;
  --ansi-245-gray-54: #8a8a8a;
  --ansi-248-gray-66: #a8a8a8;
  --ansi-251-gray-78: #c6c6c6;
  --ansi-254-gray-89: #e4e4e4;
  --ansi-255-gray-93: #eeeeee;

  /* ------------------------------------------------------------------ */
  /* Bright Colors (SGR 90-97) — overlap with ansi-8..15 in some terms  */
  /* but the SGR 90-97 renditions use these distinct hex values.        */
  /* ------------------------------------------------------------------ */
  --ansi-bright-green: #55ff55;

  /* ------------------------------------------------------------------ */
  /* 24-bit True Color (SGR 38;2;r;g;b) — outside the 256 palette       */
  /* ------------------------------------------------------------------ */
  --ansi-true-brand: #e4f221;

  /* ------------------------------------------------------------------ */
  /* Semantic Color Aliases                                              */
  /* All values reference the ANSI palette above.                       */
  /* ------------------------------------------------------------------ */
  --color-black: var(--ansi-0-black);
  --color-white: var(--ansi-15-white);
  --color-green: var(--ansi-2-green);
  --color-lime: var(--ansi-10-lime);
  --color-bright-green: var(--ansi-bright-green);
  --color-brand: var(--ansi-true-brand);

  --color-gray-93: var(--ansi-255-gray-93);
  --color-gray-89: var(--ansi-254-gray-89);
  --color-gray-78: var(--ansi-251-gray-78);
  --color-gray-66: var(--ansi-248-gray-66);
  --color-gray-54: var(--ansi-245-gray-54);
  --color-gray-42: var(--ansi-242-gray-42);
  --color-gray-35: var(--ansi-240-gray-35);
  --color-gray-23: var(--ansi-237-gray-23);
  --color-gray-15: var(--ansi-235-gray-15);
  --color-gray-3: var(--ansi-232-gray-3);

  /* ------------------------------------------------------------------ */
  /* Web-only Alpha Variants (no ANSI equivalent — CSS rendering only)  */
  /* Used for translucent overlays and subdued borders.                  */
  /* ------------------------------------------------------------------ */
  --color-black-alpha-40: rgba(0, 0, 0, 0.4);
  --color-white-alpha-40: rgba(255, 255, 255, 0.4);
  --color-gray-89-border-alpha: rgba(228, 228, 228, 0.6);
  --color-gray-23-border-alpha: rgba(58, 58, 58, 0.3);
  --color-brand-alpha-50: rgba(228, 242, 33, 0.5);

  --font-family-mono: 'GeistMono-Regular', Consolas, monaco, monospace;

  --theme-line-height-base: 1.25;
  --font-size: 16px;

  --z-index-page: 1;
  --z-index-page-select: 3;
  --z-index-page-tooltips: 4;
  --z-index-page-popover: 5;
  --z-index-page-dropdown-menus: 6;
  --z-index-page-modals: 10;

  background: var(--theme-background);
  color: var(--theme-text);
  font-family: var(--font-family-mono);
  line-height: calc(var(--theme-line-height-base) * 1rem);

  font-size: var(--font-size);
  font-optical-sizing: auto;
  text-rendering: geometricPrecision;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;

  &::-webkit-scrollbar {
    background: transparent;
    height: calc(var(--theme-line-height-base) * 1rem);
    width: 1ch;
  }

  &::-webkit-scrollbar-track {
    background: var(--theme-background);
  }

  &::-webkit-scrollbar-thumb {
    background: var(--theme-border);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--theme-border);
  }
}

body.theme-light {
  --theme-overlay: var(--color-black-alpha-40);
  --theme-background: var(--color-white);
  --theme-background-modal: var(--color-gray-89);
  --theme-background-modal-footer: var(--color-gray-66);
  --theme-background-input: var(--color-gray-89);
  --theme-border: var(--color-gray-89);
  --theme-border-subdued: var(--color-gray-89-border-alpha);
  --theme-text: var(--color-black);
  --theme-button: var(--color-black);
  --theme-button-text: var(--color-white);
  --theme-button-foreground: var(--color-gray-78);
  --theme-button-background: var(--color-gray-89);
  --theme-focused-foreground: var(--color-bright-green);
  --theme-focused-foreground-subdued: var(--color-brand-alpha-50);
  /*
  NOTE(jimmylee):
  Window-specific tones — body sits one step darker than --theme-background so the
  window reads as a "lifted" panel, and the shadow sits one step darker still so the
  drop shadow is unambiguously darker than the window body. The CLI mirror lives in
  scripts/cli/colors.json (windowBg / shadow).
  */
  --theme-window-background: var(--color-gray-89);
  --theme-window-shadow: var(--color-gray-66);
}

body.theme-dark {
  --theme-overlay: var(--color-black-alpha-40);
  --theme-background: var(--color-black);
  --theme-background-modal: var(--color-gray-23);
  --theme-background-modal-footer: var(--color-gray-35);
  --theme-background-input: var(--color-gray-23);
  --theme-border: var(--color-gray-23);
  --theme-border-subdued: var(--color-gray-23-border-alpha);
  --theme-text: var(--color-white);
  --theme-button: var(--color-white);
  --theme-button-text: var(--color-black);
  --theme-button-foreground: var(--color-gray-15);
  --theme-button-background: var(--color-gray-23);
  --theme-focused-foreground: var(--color-brand);
  --theme-focused-foreground-subdued: var(--color-brand-alpha-50);
  /*
  NOTE(jimmylee):
  Window body is gray-23 (#3a3a3a) so it lifts off the gray-3 (#080808) page
  background, and the shadow is gray-15 (#262626) — a hair lighter than the page
  but visibly darker than the window body, preserving the "shadow darker than the
  body" contract while staying inside the ANSI gray ramp.
  */
  --theme-window-background: var(--color-gray-23);
  --theme-window-shadow: var(--color-gray-15);
}

/*
NOTE(jimmylee):
OKLCH tint themes — recalibrated against the new ANSI base palette so the
saturation and lightness ramps fall in the same perceptual range as the
ANSI gray scale (#eeeeee → #262626) and the brand color (#e4f221). Each tint
sets only --tint, and the body.theme-light.tint-* / body.theme-dark.tint-*
selectors below derive every --theme-* token from that tint via OKLCH math.
*/

body.tint-green {
  --tint: #39ff44;
}

body.tint-blue {
  --tint: #0047ff;
}

body.tint-red {
  --tint: #ff0000;
}

body.tint-yellow {
  --tint: var(--ansi-true-brand);
}

body.tint-purple {
  --tint: #8000ff;
}

body.tint-orange {
  --tint: #ffac1c;
}

body.tint-pink {
  --tint: #ff00ff;
}

body.theme-light.tint-green,
body.theme-light.tint-blue,
body.theme-light.tint-red,
body.theme-light.tint-yellow,
body.theme-light.tint-purple,
body.theme-light.tint-orange,
body.theme-light.tint-pink {
  /*
  NOTE(jimmylee):
  Light tint ramp is anchored to the ANSI light grays:
    --theme-background          ≈ ansi-255-gray-93 (#eeeeee)
    --theme-background-modal    ≈ ansi-254-gray-89 (#e4e4e4)
    --theme-background-input    ≈ ansi-255-gray-93 (#eeeeee)
    --theme-border              ≈ ansi-251-gray-78 (#c6c6c6)
    --theme-text                ≈ ansi-232-gray-3  (#080808)
  Each token uses oklch(from var(--tint) L C H) so it tints toward the source
  color while staying within the ANSI lightness band.
  */
  --theme-overlay: var(--color-black-alpha-40);
  --theme-background: oklch(from var(--tint) 0.97 calc(c * 0.1) h);
  --theme-background-modal: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
  --theme-background-modal-footer: oklch(from var(--tint) 0.86 calc(c * 0.22) h);
  --theme-background-input: oklch(from var(--tint) 0.97 calc(c * 0.1) h);
  --theme-border: oklch(from var(--tint) 0.84 calc(c * 0.28) h);
  --theme-border-subdued: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
  --theme-text: oklch(from var(--tint) 0.18 calc(c * 0.4) h);
  --theme-button: oklch(from var(--tint) 0.18 calc(c * 0.4) h);
  --theme-button-text: oklch(from var(--tint) 0.97 calc(c * 0.1) h);
  --theme-button-foreground: oklch(from var(--tint) 0.86 calc(c * 0.22) h);
  --theme-button-background: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
  --theme-focused-foreground: oklch(from var(--tint) 0.62 c h);
  --theme-focused-foreground-subdued: oklch(from var(--tint) 0.62 c h / 0.5);
  /*
  NOTE(jimmylee):
  Window body matches background-modal so the panel sits one step darker than the
  page background, and the shadow drops to L=0.70 — a third step down so the
  drop shadow stays visibly darker than the window body across every tint.
  */
  --theme-window-background: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
  --theme-window-shadow: oklch(from var(--tint) 0.7 calc(c * 0.28) h);
}

body.theme-dark.tint-green,
body.theme-dark.tint-blue,
body.theme-dark.tint-red,
body.theme-dark.tint-yellow,
body.theme-dark.tint-purple,
body.theme-dark.tint-orange,
body.theme-dark.tint-pink {
  /*
  NOTE(jimmylee):
  Dark tint ramp is anchored to the ANSI dark grays:
    --theme-background          ≈ ansi-232-gray-3  (#080808)
    --theme-background-modal    ≈ ansi-235-gray-15 (#262626)
    --theme-background-input    ≈ ansi-237-gray-23 (#3a3a3a)
    --theme-border              ≈ ansi-237-gray-23 (#3a3a3a)
    --theme-text                ≈ ansi-15-white    (#ffffff)
  */
  --theme-overlay: var(--color-black-alpha-40);
  --theme-background: oklch(from var(--tint) 0.14 calc(c * 0.18) h);
  --theme-background-modal: oklch(from var(--tint) 0.24 calc(c * 0.22) h);
  --theme-background-modal-footer: oklch(from var(--tint) 0.3 calc(c * 0.24) h);
  --theme-background-input: oklch(from var(--tint) 0.28 calc(c * 0.2) h);
  --theme-border: oklch(from var(--tint) 0.4 calc(c * 0.28) h);
  --theme-border-subdued: oklch(from var(--tint) 0.4 calc(c * 0.28) h / 0.6);
  --theme-text: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
  --theme-button: oklch(from var(--tint) 0.92 calc(c * 0.18) h);
  --theme-button-text: oklch(from var(--tint) 0.14 calc(c * 0.18) h);
  --theme-button-foreground: oklch(from var(--tint) 0.3 calc(c * 0.22) h);
  --theme-button-background: oklch(from var(--tint) 0.24 calc(c * 0.22) h);
  --theme-focused-foreground: oklch(from var(--tint) 0.72 c h);
  --theme-focused-foreground-subdued: oklch(from var(--tint) 0.72 c h / 0.5);
  /*
  NOTE(jimmylee):
  Window body matches background-modal (L=0.24) so it sits one step lighter than
  the L=0.14 page background, and the shadow drops to L=0.18 — a hair lighter than
  the page but darker than the window body, preserving the "shadow darker than the
  body" contract under every dark tint.
  */
  --theme-window-background: oklch(from var(--tint) 0.24 calc(c * 0.22) h);
  --theme-window-shadow: oklch(from var(--tint) 0.18 calc(c * 0.2) h);
}

#__next {
}