/* One Click AI — the house style, in one file.
 *
 * Owner 2026-11-08: "DO IT ASAP TO THE WHOLE SYSTEM."
 *
 * Every page in this app was already written against the same ten design tokens - --bg, --panel,
 * --panel2, --line, --text, --dim, --accent, --green, --red, --amber - each one just set to a dark
 * palette of its own. So the whole product is restyled by redefining those ten in one place, rather
 * than by rewriting eight pages of markup and risking every screen at once.
 *
 * The palette is the one the rebuilt checkout already uses: white paper, black ink, one red. Loaded
 * AFTER each page's own <style>, so these win.
 *
 * To change the look of the entire system, change it here.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');

:root {
  --bg:     #f6f6f8;   /* the wash behind everything */
  --panel:  #ffffff;   /* cards, bars, anything raised */
  --panel2: #ededf2;   /* a quieter panel: ghost buttons, table stripes */
  --line:   #e3e3ea;   /* every border */
  --text:   #131316;   /* ink */
  --dim:    #5d5d67;   /* secondary text */
  --accent: #c8102e;   /* the one red - primary buttons, links, the active tab */
  --green:  #1f7a4d;
  --red:    #c8102e;
  --amber:  #a66a00;
  --r:      8px;       /* the old 12px reads soft and consumer; this is a till */
  color-scheme: light;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Headings: the same clean sans as everything else, set bold (owner 10 Nov: "modern... legit professional
   software"). The serif stays only in the signed agreement and its PDF, which carry their own styles. */
h1, h2.display, .top h1 { font-family: "Archivo", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; letter-spacing: -.01em; }

/* The logo badge was a dark square for a dark page. On paper it is the black mark. */
.logo b { background: var(--text) !important; border-color: var(--text) !important; color: #fff !important; }
.logo b i { color: #fff !important; }

/* Primary action: solid red. Ghost: paper with a hairline, not a grey slab. */
.btn { border-radius: var(--r); letter-spacing: .01em; }
.btn.ghost { background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--text) !important; }
.btn.ghost:hover { background: var(--panel2) !important; }

/* Cards sit on paper with a hairline and no shadow - a shadow on every card turns a dense screen to
   mush. The bottom tab bar keeps one, because it floats over content. */
.card { box-shadow: none; }
.tabs { box-shadow: 0 -1px 0 var(--line), 0 -8px 24px rgba(19,19,22,.06); }
.tabs a.on, .tabs a[aria-current="page"] { color: var(--accent); }

/* Status colours need a tint behind them on white; on black the text alone was enough. */
.badge.g, .status:not(.off) { color: var(--green); }
.badge.r { color: var(--red); }
.badge.a { color: var(--amber); }

/* Inputs: a hairline box on paper, and a red ring when focused so the eye lands. */
input, select, textarea {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}

/* Tables read better banded than boxed. */
tr.line:hover, .row:hover { background: var(--panel2); }

/* The staging ribbon stays loud - it is the one thing that must never be mistaken for production. */
.envbar, .staging { background: #f0a500 !important; color: #131316 !important; }