/* ------------------------------------------------------------------
   Peeq — brand tokens (source of truth: Peeq brand guide, page 8)
   Tailwind handles utilities; this file holds tokens + base behaviour.
   ------------------------------------------------------------------ */

/* Colours are declared as RGB channels so Tailwind can build opacity
   variants (bg-signal/10). Hex values live in exactly two places: here. */

:root {
  color-scheme: dark;

  --bg-rgb: 9 9 11;             /* Obsidian  — primary background       */
  --card-rgb: 18 18 21;         /* Charcoal  — cards and containers     */
  --border-rgb: 39 39 42;       /* 1 px borders                         */
  --border-strong-rgb: 63 63 70;/* Hover and focus borders              */
  --text-rgb: 250 250 250;      /* Text primary                         */
  --muted-rgb: 161 161 170;     /* Slate     — muted text               */
  --faint-rgb: 82 82 91;        /* Placeholders                         */
  --off-bg-rgb: 39 39 42;       /* Disabled control fill                */
  --off-text-rgb: 113 113 122;  /* Disabled control label               */

  --signal-rgb: 99 102 241;     /* Electric Indigo — signal on dark     */
  --signal-deep-rgb: 79 70 229; /* Pressed / hover                      */
  --signal-text-rgb: 165 180 252;/* Indigo text on a signal tint        */

  --read-rgb: 16 185 129;       /* Emerald — verified read and paid     */
  --read-deep-rgb: 4 120 87;    /* Emerald text on light                */
  --amber-rgb: 245 158 11;      /* Counter warning above 130 characters */

  --logo-purple: #7848be;       /* Logo bubble only                     */

  --radius-card: 12px;
  --radius-control: 8px;

  --font-sans: "Geist", "Inter", system-ui, sans-serif;
  --font-price: "Instrument Serif", Georgia, serif;
}

/* Light theme. Same roles, re-tuned for paper: the guide's own
   "Indigo on light" and "Emerald text on light" values are used, and
   text tokens get darker because contrast runs the other way. */
[data-theme="light"] {
  color-scheme: light;

  --bg-rgb: 246 246 247;
  --card-rgb: 255 255 255;
  --border-rgb: 228 228 231;
  --border-strong-rgb: 212 212 216;
  --text-rgb: 9 9 11;
  --muted-rgb: 82 82 91;
  --faint-rgb: 161 161 170;
  --off-bg-rgb: 237 237 238;
  --off-text-rgb: 161 161 170;

  --signal-rgb: 79 70 229;
  --signal-deep-rgb: 67 56 202;
  --signal-text-rgb: 67 56 202;

  --read-rgb: 4 120 87;
  --read-deep-rgb: 6 95 70;
  --amber-rgb: 180 83 9;
}

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

body {
  background: rgb(var(--bg-rgb));
  color: rgb(var(--text-rgb));
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prices and rates are always Instrument Serif — that is what makes
   $25.00 read like an asset. Tabular figures keep columns steady. */
.price {
  font-family: var(--font-price);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.005em;
}

/* Locked message preview: real text, hidden until collected. The preview is
   clamped so every locked card reads as the same redacted block. */
.locked-text {
  filter: blur(8px);
  max-height: 3.1rem;
  overflow: hidden;
  opacity: 0.75;
  user-select: none;
  -webkit-user-select: none;
}

/* On paper the same blur needs a touch more ink to read as redacted. */
[data-theme="light"] .locked-text {
  opacity: 0.9;
}

::selection {
  background: rgb(var(--signal-rgb) / 0.28);
}

/* Native controls should not introduce shadows or gradients. */
button,
textarea,
a {
  -webkit-tap-highlight-color: transparent;
}

textarea {
  min-height: 6.5rem;
}

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