/*
 * Theme - "Pocket Pager" retro-gadget design tokens
 * Warm light palette: cream background, ink text/borders, amber accent.
 * Light-only: the design is light-first and no dark variant is specced.
 */

:root {
  /* Design tokens */
  --ink: #2a2419;
  --cream: #f6f1e7;
  --cream-dark: #efe7d6;
  --muted: #5c5344;
  --faint: #8a7f6c;
  --hairline: #d8cfbc;
  --chip-border: #e0d8c8;
  --amber: #ffb000;
  --lcd: #c8d6a3;
  --lcd-text: #2c331c;
  --lcd-meta: #4a5232;
  --device-btn: #3d3527;
  --device-btn-border: #55492f;
  --success: #4caf50;
  --connected-text: #2c6b2f;
  --connected-bg: #ddefd6;
  --highlight-bg: #fff3d6;
  --highlight-border: #e8c96a;
  --ink-band-muted: #b8ad97;
  --danger: #c0392b;
  --danger-bg: #fbe9e7;

  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --card-shadow: 4px 5px 0 rgba(42, 36, 25, 0.12);

  color-scheme: light;
}

/* Pico variable overrides - applied in both light and (forced-off) dark mode */
:root,
[data-theme="dark"],
:root:not([data-theme="light"]) {
  color-scheme: light;

  --pico-font-family: var(--font-sans);
  --pico-background-color: var(--cream);
  --pico-color: var(--ink);
  --pico-h1-color: var(--ink);
  --pico-h2-color: var(--ink);
  --pico-h3-color: var(--ink);
  --pico-muted-color: var(--faint);
  --pico-muted-border-color: var(--hairline);
  --pico-card-background-color: #ffffff;
  --pico-card-sectioning-background-color: var(--cream-dark);
  --pico-border-radius: 12px;

  --pico-primary: var(--amber);
  --pico-primary-hover: #ffc233;
  --pico-primary-focus: rgba(255, 176, 0, 0.25);
  --pico-primary-inverse: var(--ink);
  --pico-primary-background: var(--amber);
  --pico-primary-background-hover: #ffc233;

  --pico-form-element-background-color: #ffffff;
  --pico-form-element-border-color: var(--hairline);
  --pico-form-element-color: var(--ink);
  --pico-form-element-placeholder-color: var(--faint);
  --pico-form-element-active-border-color: var(--ink);
  --pico-form-element-focus-color: rgba(255, 176, 0, 0.25);
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--cream);
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--ink);
}