/*
 * Rabbit Labs brand tokens
 * ========================
 *
 * The single source of truth for Rabbit Labs colour, type, radius and shadow.
 * The website imports this file, and the extensions (Rabbit Ad Blocker,
 * Rabbit Smart Tab) should copy or import it rather than inventing values.
 * Plain CSS with no build step or framework, so it works anywhere.
 *
 * Every token is prefixed `--rb-` so it can't collide with a host page or a
 * framework. See README.md next to this file for when to use what.
 *
 * Three layers:
 *   1. Palette     raw colours. Don't reach for these in components.
 *   2. Themes      what the colours mean: the dark website, and the light and
 *                  dark product UI inside the extensions. Use these.
 *   3. Lockup      the "RABBIT / Product name" wordmark, as ready-made classes.
 *
 * Colours that need transparency also ship as bare RGB channels (`-rgb`), used
 * as `rgb(var(--rb-violet-600-rgb) / 0.2)`. That keeps every glow and tint on
 * the palette instead of drifting into one-off rgba() values.
 */

:root {
  /* 1. Palette ------------------------------------------------------------ */

  /* Violet: the brand colour. 600 is the primary; 700 is for names and
     headings on light backgrounds. */
  --rb-violet-50: #f5f0ff;
  --rb-violet-100: #eee9ff;
  --rb-violet-200: #ddd2ff;
  --rb-violet-300: #c4b1ff;
  --rb-violet-400: #a78bfa;
  --rb-violet-500: #8b5cf6;
  --rb-violet-600: #7448d8;
  --rb-violet-700: #4b2c9c;
  --rb-violet-800: #3a1f73;

  --rb-violet-50-rgb: 245 240 255;
  --rb-violet-300-rgb: 196 177 255;
  --rb-violet-400-rgb: 167 139 250;
  --rb-violet-500-rgb: 139 92 246;
  --rb-violet-600-rgb: 116 72 216;
  --rb-violet-700-rgb: 75 44 156;

  /* Ground: violet-tinted near-blacks for dark surfaces. Never pure black. */
  --rb-ground-950: #070411;
  --rb-ground-900: #0a0615;
  --rb-ground-800: #100a1c;
  --rb-ground-700: #150e26;
  --rb-ground-600: #1c1230;
  --rb-ground-500: #211636;
  --rb-ground-400: #28184e;

  --rb-ground-950-rgb: 7 4 17;
  --rb-ground-900-rgb: 10 6 21;
  --rb-ground-800-rgb: 16 10 28;
  --rb-ground-700-rgb: 21 14 38;
  --rb-ground-600-rgb: 28 18 48;
  --rb-ground-500-rgb: 33 22 54;
  --rb-ground-400-rgb: 40 24 78;

  /* Mist: cool, slightly violet neutrals for light surfaces and text. */
  --rb-mist-0: #ffffff;
  --rb-mist-50: #f7f8fb;
  --rb-mist-100: #f0f1f6;
  --rb-mist-200: #e7e5ec;
  --rb-mist-500: #6c6878;
  --rb-mist-900: #181521;

  /* Signal colours. Only for state (on/off, local, error), never decoration. */
  --rb-green-600: #2c8a55;
  --rb-mint-300: #75e6bf;
  --rb-mint-300-rgb: 117 230 191;
  --rb-red-300: #f3a3b3;
  --rb-red-600: #c2344d;

  /* Shadow tint: a deep violet, so shadows read as part of the palette. */
  --rb-shadow-rgb: 45 20 90;

  /* 2a. Theme: website (dark) -------------------------------------------- */

  --rb-web-bg-deep: var(--rb-ground-950);
  --rb-web-bg: var(--rb-ground-900);
  --rb-web-bg-elevated: var(--rb-ground-700);
  --rb-web-surface-1: rgb(var(--rb-ground-600-rgb) / 0.82);
  --rb-web-surface-2: rgb(var(--rb-ground-500-rgb) / 0.92);
  --rb-web-surface-inset: var(--rb-ground-700);

  --rb-web-text: #f6f2ff;
  --rb-web-text-muted: rgb(224 214 252 / 0.8);
  --rb-web-text-faint: rgb(201 187 241 / 0.58);
  --rb-web-accent: var(--rb-violet-300);
  /* Error text and invalid-field borders on the dark site. */
  --rb-web-error: var(--rb-red-300);

  --rb-web-line: rgb(var(--rb-violet-400-rgb) / 0.18);
  --rb-web-line-strong: rgb(var(--rb-violet-300-rgb) / 0.34);
  --rb-web-glow: rgb(var(--rb-violet-600-rgb) / 0.22);

  /* 2b. Theme: product UI (light, the default inside the extensions) ----- */

  --rb-ui-canvas: var(--rb-mist-50);
  --rb-ui-surface: var(--rb-mist-0);
  --rb-ui-surface-muted: var(--rb-mist-100);
  --rb-ui-ink: var(--rb-mist-900);
  --rb-ui-muted: var(--rb-mist-500);
  --rb-ui-line: var(--rb-mist-200);
  --rb-ui-accent: var(--rb-violet-600);
  --rb-ui-accent-strong: var(--rb-violet-700);
  --rb-ui-accent-soft: var(--rb-violet-100);
  --rb-ui-on-accent: var(--rb-mist-0);
  --rb-ui-success: var(--rb-green-600);
  --rb-ui-shadow: 0 14px 38px rgb(var(--rb-shadow-rgb) / 0.08);

  /* Gradients */
  --rb-gradient-mark: linear-gradient(135deg, var(--rb-violet-500), var(--rb-violet-800));
  --rb-gradient-cta: linear-gradient(
    135deg,
    var(--rb-violet-200) 0%,
    var(--rb-violet-400) 26%,
    var(--rb-violet-500) 55%,
    var(--rb-violet-700) 100%
  );
  --rb-gradient-feature: radial-gradient(circle at 85% 15%, var(--rb-violet-400) 0, transparent 34%),
    linear-gradient(135deg, var(--rb-violet-800), var(--rb-violet-600));

  /* Type */
  --rb-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --rb-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --rb-font-ui: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --rb-tracking-eyebrow: 0.12em;
  --rb-tracking-tight: -0.03em;

  /* Shape */
  --rb-radius-sm: 8px;
  --rb-radius-md: 14px;
  --rb-radius-lg: 22px;
  --rb-radius-pill: 999px;
}

/* 2c. Theme: product UI (dark). Opt in with data-rb-theme="dark" on any
   ancestor, or follow the OS unless the page has forced light. */
[data-rb-theme="dark"] {
  --rb-ui-canvas: #14121a;
  --rb-ui-surface: #201d29;
  --rb-ui-surface-muted: #2b2736;
  --rb-ui-ink: #f8f5ff;
  --rb-ui-muted: #aaa4b8;
  --rb-ui-line: #383241;
  --rb-ui-accent: #b398ff;
  --rb-ui-accent-strong: #d0c1ff;
  --rb-ui-accent-soft: #362b52;
  --rb-ui-on-accent: var(--rb-ground-950);
  --rb-ui-success: #63d8b0;
  --rb-ui-shadow: 0 14px 38px rgb(0 0 0 / 0.2);
}

@media (prefers-color-scheme: dark) {
  [data-rb-theme="auto"] {
    --rb-ui-canvas: #14121a;
    --rb-ui-surface: #201d29;
    --rb-ui-surface-muted: #2b2736;
    --rb-ui-ink: #f8f5ff;
    --rb-ui-muted: #aaa4b8;
    --rb-ui-line: #383241;
    --rb-ui-accent: #b398ff;
    --rb-ui-accent-strong: #d0c1ff;
    --rb-ui-accent-soft: #362b52;
    --rb-ui-on-accent: var(--rb-ground-950);
    --rb-ui-success: #63d8b0;
    --rb-ui-shadow: 0 14px 38px rgb(0 0 0 / 0.2);
  }
}

/* 3. Product lockup -----------------------------------------------------
   Every product is named the same way: "RABBIT" small and uppercase on the
   first line, the product name large on the second.

     <div class="rb-lockup">
       <span class="rb-lockup-eyebrow">Rabbit</span>
       <span class="rb-lockup-name">Smart Tab</span>
     </div>
*/
.rb-lockup {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.rb-lockup-eyebrow {
  color: var(--rb-ui-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: var(--rb-tracking-eyebrow);
  text-transform: uppercase;
}

.rb-lockup-name {
  color: var(--rb-ui-accent-strong);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: var(--rb-tracking-tight);
}