/*
 * Terraform (てら) colour scheme.
 *
 * Palette taken from compute-app (apps/web/src/styles.css) and the てら logo
 * (docs/terraform/final/tera.svg, gradient #ff6a5c -> #9f0000), so both apps
 * look like one family.
 *
 * No JavaScript needed (most pages are server-rendered, spec D31): the theme
 * follows the OS via prefers-color-scheme.
 * The server may also set <html data-theme="light|dark"> from a saved user
 * preference; an explicit data-theme always wins over the OS setting.
 */

:root {
  /* Brand */
  --red: #9f0000;            /* primary accent, logo gradient end */
  --red-hi: #c41a1a;         /* links, focus, hover */
  --red-soft: rgba(196, 26, 26, 0.14);
  --brand-from: #ff6a5c;     /* logo gradient start */
  --brand-to: #9f0000;       /* logo gradient end */
  --brand-gradient: linear-gradient(180deg, var(--brand-from), var(--brand-to));

  /* Dark surfaces (default) */
  --bg: #0b0b0b;
  --bg-1: #121212;
  --bg-2: #1a1a1a;
  --bg-3: #242424;
  --line: #2a2a2a;
  --line-2: #3a3a3a;
  --fg: #f2f2f2;
  --fg-2: #b4b4b4;
  --fg-3: #7d7d7d;

  /* Status */
  --ok: #3fb950;
  --warn: #d29922;
  --danger: #f85149;

  /* Shape and type */
  --radius: 10px;
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

/* Light surfaces: from the OS setting, unless the server forced dark. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff;
    --bg-1: #f7f7f7;
    --bg-2: #efefef;
    --bg-3: #e4e4e4;
    --line: #e0e0e0;
    --line-2: #cfcfcf;
    --fg: #111111;
    --fg-2: #4a4a4a;
    --fg-3: #8a8a8a;
    --red-soft: rgba(159, 0, 0, 0.08);
    color-scheme: light;
  }
}

/* Light surfaces: forced by a saved user preference. */
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-1: #f7f7f7;
  --bg-2: #efefef;
  --bg-3: #e4e4e4;
  --line: #e0e0e0;
  --line-2: #cfcfcf;
  --fg: #111111;
  --fg-2: #4a4a4a;
  --fg-3: #8a8a8a;
  --red-soft: rgba(159, 0, 0, 0.08);
  color-scheme: light;
}

/* Base elements, matching compute-app. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--red-hi); }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 2px; }
button, input, textarea, select { font: inherit; color: inherit; }
code, pre, .mono { font-family: var(--mono); }
h1, h2, h3 { margin: 0 0 0.5em; line-height: 1.25; }
h1 { font-size: 22px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
p { margin: 0 0 0.75em; }
.muted { color: var(--fg-2); }
.faint { color: var(--fg-3); font-size: 12px; }

/* Logo: use /static/brand/tera.svg (gradient) on either theme;
   tera-black.svg / tera-white.svg for single-colour contexts. */
.brand-logo { height: 28px; width: auto; display: block; }