/* ==========================================================================
   basecoat.css — a small, zero-dependency frontend style guide
   --------------------------------------------------------------------------
   A warm-monochrome design system codified from the maxackerman/timezone and
   maxackerman/birdbrainpublic projects. Drop this one file into a project:

       <link rel="stylesheet" href="basecoat.css">

   House rules (see AGENTS.md): no border-radius, no shadows, no gradients.
   Monochrome + a single accent. Flat 1px hairlines. Lowercase headings.
   Bracketed text buttons like [ edit ]. Tabular numerals for numbers.

   Sections:
     1. Tokens (light)
     2. Tokens (dark)
     3. Reset
     4. Typography
     5. Links
     6. Buttons
     7. Tables & lists
     8. Layout & spacing
     9. Semantic colors
   ========================================================================== */


/* 1. TOKENS (LIGHT) ======================================================== */

:root {
  /* --- Core palette (verbatim from the source projects) --- */
  --bg:      #f5f5f0;   /* warm off-white page background */
  --fg:      #1a1a1a;   /* near-black primary text / strong hairlines */
  --dim:     #888888;   /* muted / secondary text, inactive controls */
  --border:  #cccccc;   /* soft hairline dividers */
  --hi-bg:   #e8e8e0;   /* highlight background (primary row / hover) */
  --accent:  #e0301e;   /* the single chromatic accent (warm red) */

  /* --- Semantic colors (muted to fit; error reuses the house red) --- */
  --success: #4a7a4a;   /* muted forest/olive */
  --warning: #b8801f;   /* warm ochre */
  --danger:  #e0301e;   /* the house red */
  --info:    #4a6a8a;   /* muted slate */

  /* --- Fonts --- */
  --font-ui:   "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Type scale (clean, 4-based, 12 -> 64) --- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;   /* display */
  --text-6xl:  48px;   /* display */
  --text-7xl:  64px;   /* display / hero numerals */

  --leading: 1.45;

  /* --- Letter-spacing --- */
  --tracking-tight:  -0.01em;  /* large numerals */
  --tracking-normal:  0;
  --tracking-wide:    0.02em;  /* small labels / subtitles */
  --tracking-wider:   0.08em;  /* logo / uppercase headers */

  /* --- Spacing (4px scale) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* --- Borders (two-tier hairline hierarchy) --- */
  --border-strong: 1px solid var(--fg);      /* section rules */
  --border-soft:   1px solid var(--border);  /* row dividers */
  --radius: 0;   /* the no-radius rule, encoded as a token */

  /* --- Layout --- */
  --measure: 640px;  /* centered single-column max width */

  color-scheme: light dark;
}


/* 2. TOKENS (DARK) ========================================================= */
/* Warm-matched dark palette. Applies to viewers who prefer dark, and to any
   element under [data-theme="dark"] (the demo toggle). Both are honored. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #16140f;   /* warm near-black */
    --fg:      #f5f5f0;   /* warm off-white ink */
    --dim:     #8a8880;
    --border:  #333331;
    --hi-bg:   #24221c;
    --accent:  #ff5a3c;   /* brightened red for dark ground */

    --success: #7aa96a;
    --warning: #d6a23a;
    --danger:  #ff5a3c;
    --info:    #7a9ac0;
  }
}

:root[data-theme="dark"] {
  --bg:      #16140f;
  --fg:      #f5f5f0;
  --dim:     #8a8880;
  --border:  #333331;
  --hi-bg:   #24221c;
  --accent:  #ff5a3c;

  --success: #7aa96a;
  --warning: #d6a23a;
  --danger:  #ff5a3c;
  --info:    #7a9ac0;
}


/* 3. RESET ================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* 4. TYPOGRAPHY ============================================================ */
/* Headings are lowercase, normal-weight, and tracked — per the house style.
   Numbers use tabular figures so they don't jitter. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.2;
  text-transform: lowercase;
  letter-spacing: var(--tracking-wide);
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--dim); }

p,
ul,
ol {
  font-size: var(--text-base);
}

small,
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

.dim { color: var(--dim); }

/* Numeric display — tabular figures, tight tracking, scales up cleanly */
.tnum,
.num {
  font-variant-numeric: tabular-nums;
}
.num { text-align: right; }

/* Display sizes for hero numerals / big type */
.display   { font-size: var(--text-5xl); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.display-lg{ font-size: var(--text-6xl); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.display-xl{ font-size: var(--text-7xl); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }

/* Uppercase label / eyebrow */
.label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--dim);
}

/* Monospace / terminal-flavored bits (e.g. ascii meters) */
code,
kbd,
samp,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}


/* 5. LINKS ================================================================= */
/* Dim by default, underline on hover. In-content links can inherit color. */

a {
  color: var(--dim);
  text-decoration: none;
}
@media (hover: hover) {
  a:hover { text-decoration: underline; }
}

a.link-fg { color: var(--fg); }
a.inherit { color: inherit; }


/* 6. BUTTONS =============================================================== */
/* The house button is a bracketed TEXT button — write the brackets into the
   label: <button class="btn">[ edit ]</button>. No fill, no radius, no shadow.
   Dim by default, darkens to --fg on hover. */

.btn {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: inherit;
  color: var(--dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (hover: hover) {
  .btn:hover { color: var(--fg); }
}
.btn:disabled,
.btn[aria-disabled="true"] {
  color: var(--dim);
  cursor: default;
  opacity: 0.6;
}

/* Accent variant — for the single most important action */
.btn-accent { color: var(--accent); }
@media (hover: hover) {
  .btn-accent:hover { color: var(--accent); text-decoration: underline; }
}

/* The one non-text control: a square outline button (e.g. a delete "−"). */
.btn-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: var(--text-base);
  color: var(--fg);
  background: none;
  border: var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
@media (hover: hover) {
  .btn-square:hover { background: var(--hi-bg); }
}


/* 7. TABLES & LISTS ======================================================== */
/* Hairline dividers, uppercase muted headers, tabular numbers. The last row's
   divider is dropped. Headers sit under a strong rule. */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead th {
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--dim);
  padding: var(--space-2) var(--space-1);
  border-bottom: var(--border-strong);
}

tbody td {
  padding: var(--space-3) var(--space-1);
  border-bottom: var(--border-soft);
  vertical-align: baseline;
}

tbody tr:last-child td { border-bottom: none; }

/* Highlighted / primary row */
tr.is-primary td,
.is-primary { background: var(--hi-bg); }

/* Plain, quiet list */
.list {
  list-style: none;
}
.list li {
  padding: var(--space-3) 0;
  border-bottom: var(--border-soft);
}
.list li:last-child { border-bottom: none; }


/* 8. LAYOUT & SPACING ===================================================== */

.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

/* Section rules */
.rule        { border: none; border-top: var(--border-soft); }
.rule-strong { border: none; border-top: var(--border-strong); }

/* Stack — consistent vertical rhythm between children */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }

/* Row — horizontal group with a gap */
.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}


/* 9. SEMANTIC COLORS ====================================================== */
/* Muted, restrained. Use as text color; keep usage sparse to stay on-style. */

.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }
.text-info    { color: var(--info); }
.text-accent  { color: var(--accent); }

/* Tiny inline status marker: a leading square glyph + label */
.status {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
}
.status::before {
  content: "■ ";
  font-size: 0.7em;
  vertical-align: 0.15em;
}
.status-success::before { color: var(--success); }
.status-warning::before { color: var(--warning); }
.status-danger::before  { color: var(--danger); }
.status-info::before    { color: var(--info); }