/*
 * Tessera skin for Radicle Explorer.
 *
 * Loaded last, so it only redefines tokens — no component styles are touched.
 * That is deliberate: the explorer moves fast upstream, and a skin that only
 * overrides custom properties survives a rebase where forked components would
 * not.
 *
 * Two things it does:
 *  1. pins the dark theme (Tessera has one look, and a seed that flips to a
 *     white page next to the dark app reads as a different product)
 *  2. replaces the blue brand accent with Tessera gold, and the neutral
 *     surfaces with Tessera's near-black — the values are taken verbatim from
 *     tessera-web/app/globals.css so the two sit side by side without a seam
 */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* Surfaces — tessera-web .dark */
  --color-surface-base: oklch(0.12 0.005 250);
  --color-surface-canvas: oklch(0.14 0.005 250);
  --color-surface-subtle: oklch(0.17 0.005 250);
  --color-surface-mid: oklch(0.22 0.005 250);
  --color-surface-strong: oklch(0.28 0.01 250);
  --color-surface-alpha-subtle: oklch(1 0 0 / 6%);
  --color-surface-alpha-mid: oklch(1 0 0 / 10%);
  --color-surface-alpha-strong: oklch(1 0 0 / 16%);
  --color-surface-scrim: oklch(0 0 0 / 60%);

  /* Text */
  --color-text-primary: oklch(0.93 0 0);
  --color-text-secondary: oklch(0.78 0 0);
  --color-text-tertiary: oklch(0.65 0 0);
  --color-text-quaternary: oklch(0.55 0 0);
  --color-text-disabled: oklch(1 0 0 / 30%);

  /* Borders — the same faint white the app uses */
  --color-border-subtle: oklch(1 0 0 / 8%);
  --color-border-mid: oklch(1 0 0 / 12%);
  --color-border-strong: oklch(1 0 0 / 20%);
  --color-border-focus: oklch(0.82 0.12 85);
  --color-border-hint: oklch(1 0 0 / 16%);
  --color-border-match: oklch(0.82 0.12 85);

  /* Brand: gold instead of blue. These are the names the explorer actually
     derives its buttons, links and focus rings from — the ones further down
     (surface-brand-*, border-brand, text-brand) all resolve through them. */
  --color-brand-bg: oklch(0.82 0.12 85);
  --color-brand-hover: oklch(0.88 0.12 85);
  --color-brand-text-light: oklch(0.52 0.11 85);
  --color-brand-text-dark: oklch(0.82 0.12 85);
  --color-text-on-brand: oklch(0.15 0 0);
  --color-text-brand: oklch(0.82 0.12 85);
  --color-surface-brand-primary: oklch(0.82 0.12 85);
  --color-surface-brand-secondary: oklch(0.88 0.12 85);
  --color-border-brand: oklch(0.82 0.12 85);

  /* The accent-blue primitives leak into places that do not go through the
     brand tokens (badges, highlights). Re-point the ones in the brand range
     so nothing blue is left standing next to the gold. */
  --color-accent-blue-400: oklch(0.82 0.12 85);
  --color-accent-blue-500: oklch(0.75 0.12 85);
  --color-accent-blue-600: oklch(0.66 0.12 85);
}

/* The explorer offers a theme switch; honour a deliberate light choice for
   readability, but keep gold as the accent so it still reads as Tessera. */
:root[data-theme="light"] {
  --color-surface-base: oklch(0.98 0.003 250);
  --color-surface-canvas: oklch(1 0 0);
  --color-surface-subtle: oklch(0.96 0.003 250);
  --color-surface-mid: oklch(0.93 0.004 250);
  --color-surface-strong: oklch(0.89 0.005 250);
  --color-text-primary: oklch(0.18 0.005 250);
  --color-text-secondary: oklch(0.35 0.005 250);
  --color-text-tertiary: oklch(0.48 0.005 250);
  --color-text-quaternary: oklch(0.58 0.005 250);
  --color-border-subtle: oklch(0 0 0 / 8%);
  --color-border-mid: oklch(0 0 0 / 14%);
  --color-border-strong: oklch(0 0 0 / 22%);
  /* Gold on white needs to be darker to stay legible — the app's light
     token, not the dark one. */
  --color-brand-bg: oklch(0.52 0.11 85);
  --color-brand-hover: oklch(0.45 0.1 85);
  --color-text-brand: oklch(0.52 0.11 85);
  --color-surface-brand-primary: oklch(0.52 0.11 85);
  --color-surface-brand-secondary: oklch(0.45 0.1 85);
  --color-border-brand: oklch(0.52 0.11 85);
  --color-text-on-brand: oklch(1 0 0);
}

/* The way back to Tessera lives in the header now — the mark on the left
   (src/components/Logo.svelte), the link on the right
   (src/components/Header.svelte). The floating pill that used to sit in the
   bottom-left corner is gone. */