/* Texa design tokens — exact flow.rest values (dark default). Texa-only aliases kept
   for the Cryptee-style modal + toast (clearly separated at the bottom). */

:root,
:root[data-theme="dark"] {
  --bg: #000;
  --fg: #fff;
  --writing: #eaeaea;        /* the text color inside textareas */
  --muted: #666;             /* placeholders, timestamps */
  --hairline: #222;          /* hr */

  --menu-bg: #191919;
  --highlight: #191919;      /* active-thought pill + button hover */

  --gray0: #0b0a0f;
  --gray1: #111;
  --gray2: #202021;
  --gray3: #868e96;
  --gray4: #adb5bd;
  --gray5: #ced4da;
  --gray6: #dee2e6;
  --gray7: #e9ecef;
  --gray8: #f4f5f6;
  --gray9: #f8f9fa;

  --shadow-small: 0px 4px 8px rgba(0, 0, 0, 0.1);

  /* Semantic: keyboard-focus ring (both themes via the ramp) */
  --focus-ring: var(--gray4);          /* #adb5bd on #000 — clearly visible */

  /* Connection-status dot — the ONLY place colour is allowed (green=direct, amber=relayed, gray=offline) */
  --status-direct: #34d399;            /* green — direct P2P / LAN */
  --status-relayed: #fbbf24;           /* amber — TURN-relayed */
  --status-offline: #6b7280;           /* gray — offline / connecting */

  --fade-top-gradient: linear-gradient(var(--bg), 80%, rgba(0, 0, 0, 0.1));
  --fade-bottom-gradient: linear-gradient(rgba(0, 0, 0, 0.1), 80%, var(--bg));

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #fff;
  --fg: #000;
  --writing: #1a1a1a;
  --muted: #868e96;
  --hairline: #ededed;

  --menu-bg: #fff;
  --highlight: var(--gray1);

  --gray0: #f8f9fa;
  --gray1: #f4f5f6;
  --gray2: #e9ecef;
  --gray3: #dee2e6;
  --gray4: #ced4da;
  --gray5: #adb5bd;
  --gray6: #868e96;
  --gray7: #495057;
  --gray8: #343a40;
  --gray9: #212529;

  --shadow-small: 0px 4px 8px rgba(15, 23, 42, 0.08);

  --focus-ring: var(--gray7);          /* #495057 on #fff — clearly visible */

  /* darker variants for sufficient non-text contrast on the light canvas */
  --status-direct: #059669;
  --status-relayed: #b45309;
  --status-offline: #6b7280;

  --fade-top-gradient: linear-gradient(var(--bg), 80%, hsla(0, 0%, 100%, 0.1));
  --fade-bottom-gradient: linear-gradient(hsla(0, 0%, 100%, 0.1), 80%, var(--bg));

  color-scheme: light;
}

:root {
  --font-family: "Inter", "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  /* Motion — flow.rest uses the bare `ease` keyword on every transition (0.15s / 0.2s);
     match it exactly rather than substituting a Material curve. */
  --ease: ease;
  --t-fast: 0.15s;
  --t-med: 0.2s;

  /* Texa-only (modal + toast): spacing, radii, surfaces */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --radius-sm: 4px;
  --radius: 8px;
  --surface: var(--menu-bg);
  --surface-border: var(--gray1);   /* the omnibar's popup border — Flow's one bordered surface */
  --fg-strong: var(--writing);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; }
}