/*
 * Stocks With AI Help — the design tokens, and nothing else.
 *
 * One file, linked by every standalone page (the landing page, the admin
 * panel). It holds variables and a handful of primitives that would otherwise
 * be written slightly differently on each page; anything that belongs to one
 * page only belongs in that page's own stylesheet.
 *
 * Values come from BRAND.md. Change them there and here together.
 */

:root {
  /* surface */
  --bg: #f8f9ff;
  --surface: #ffffff;
  --surface-2: #eff4ff;
  --surface-3: #e5eeff;
  --border: #d3e4fe;
  --border-soft: #e6eefb;

  /* text */
  --text: #0b1c30;
  /* AA (4.5:1) against every surface above, --surface-3 included. Any text a
     reader actually has to read uses --text or --muted, never --faint. */
  --muted: #45464d;
  /* Decorative only: input placeholders, dimmed labels. It does NOT reach AA
     on --surface-3, so it must never carry a sentence that matters. */
  --faint: #7c839b;

  /* brand */
  --accent: #0051d5;
  --accent-ink: #ffffff;
  --accent-2: #316bf3;

  /* Market: green is up and red is down, always.
     The red is lighter than PSX's own #ea3943 for one reason — at 13px on
     --surface-2 that red is 3.9:1, under AA, and it is the colour every loss
     in every table is painted in. This one is 4.9:1 on the lightest surface
     we use. Solid-red FILLS still use the darker tone via --down-bg. */
  --up: #069669;
  --down: #ba1a1a;
  --warn: #b7791f;

  --up-bg: rgba(6, 150, 105, 0.10);
  --down-bg: rgba(186, 26, 26, 0.10);
  --warn-bg: rgba(183, 121, 31, 0.12);
  --accent-bg: rgba(49, 107, 243, 0.10);

  /* shape */
  --r-card: 8px;
  --r-ctl: 4px;
  --r-pill: 12px;
  --shadow: 0 1px 2px rgba(11, 28, 48, 0.06);

  /* an 8px grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --headline: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --maxw: 1600px;
}

/*
 * Dark theme. Opt-in: nothing switches unless `data-theme="dark"` is on
 * <html> (theme.js sets it); plain :root above is the light default.
 * `prefers-color-scheme` is deliberately NOT wired up — every visitor lands on
 * the same page until they press the toggle.
 *
 * The light pairs in :root above were measured, not chosen: --text, --muted,
 * --accent, --up, --down and --warn all clear WCAG AA (4.5:1) on all four
 * surfaces, the worst being 4.93:1. --faint stays decorative in both themes:
 * it must never carry a sentence that matters.
 */
:root[data-theme="dark"] {
  --bg: #10161d;
  --surface: #18212b;
  --surface-2: #202b37;
  --surface-3: #2a3644;
  --border: #334151;
  --border-soft: #283443;

  --text: #eef3f8;
  --muted: #a9b6c5;
  --faint: #8f9cad;

  /* The dark teal is far too light on white — 1.7:1. This one is 6.35:1 on
     --surface and still reads as the same teal. */
  --accent: #42c8dd;
  --accent-ink: #062b33;
  --accent-2: #7c8cff;

  /* Green is still up and red is still down. Both are darkened until they
     clear AA on white, because every gain and every loss in every table is
     painted in them. */
  --up: #2fd18b;
  --down: #ff7884;
  --warn: #f4b860;

  --up-bg: rgba(22, 199, 132, 0.12);
  --down-bg: rgba(255, 99, 112, 0.14);
  --warn-bg: rgba(245, 165, 36, 0.12);
  --accent-bg: rgba(45, 212, 191, 0.12);

  /* A shadow tuned for a dark page is invisible on a light one. */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.25);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand { font-family: var(--headline); letter-spacing: 0; }

/* Every number that sits in a column lines up with the one above it. */
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- brand */

/* The light/dark switch. One primitive, because it sits in the header of every
   page and three near-identical copies would drift. */
.theme-btn {
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center;
}
.theme-btn:hover { background: var(--surface-3); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.brand { display: inline-flex; align-items: baseline; gap: 0; font-weight: 700; letter-spacing: 0; }
.brand__ai { color: var(--accent); }
.brand__soft { color: var(--muted); font-weight: 600; }

/* ------------------------------------------------------------ primitives */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--s5);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.btn:hover { background: var(--surface-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: #0043b3; }
:root[data-theme="dark"] .btn--primary:hover { background: #3ee6d2; }
.btn--whatsapp { background: #128c7e; border-color: #128c7e; color: #ffffff; }
.btn--whatsapp:hover { background: #0f766c; color: #ffffff; text-decoration: none; }
.btn--danger { color: var(--down); border-color: rgba(255, 99, 112, 0.4); background: var(--down-bg); }
.btn--ghost { background: transparent; }

.input, select.input, textarea.input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  color: var(--text);
  font: inherit;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.input::placeholder { color: var(--faint); }

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
  background: var(--surface-3); color: var(--muted);
}
.pill--up { background: var(--up-bg); color: var(--up); }
.pill--down { background: var(--down-bg); color: var(--down); }
.pill--warn { background: var(--warn-bg); color: var(--warn); }
.pill--accent { background: var(--accent-bg); color: var(--accent); }

.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--muted); }
.faint { color: var(--faint); }

/* ---------------------------------------------------------- disclaimer */
/*
 * BRAND.md's short form. It is a class and not a copy-pasted sentence so that
 * there is exactly one of it to correct.
 */
/* --muted, not --faint: this is the legal notice and it has to be readable
   on every surface it lands on. */
.disclaimer {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.disclaimer--block {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--s4);
  margin-top: var(--s5);
}

/* ------------------------------------------------------------ utilities */

.row { display: flex; align-items: center; gap: var(--s3); }
.row--between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.grid { display: grid; gap: var(--s4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}