/*
  Ge-On Memory — theme tokens.

  The single source of colour for this service. Values are ported from the
  Ge-On design system as it is expressed in geon-web-ui
  (`app/globals.css`), so the memory layer, the beta product UI and the
  marketing site read as one brand: a violet → pink → amber gradient over
  a deep navy surface stack.

  Before this file the service carried its own palette — indigo #4f46e5
  and a "Mission Control" blue — defined separately in four layout roots
  and again in styles.css. Nothing tied them together and none of them was
  Ge-On.

  ## How this works

  Every layout links this file **last** in <head>, after its own inline
  <style>. Its `:root` block therefore wins, which means the legacy token
  names each layout already uses (`--primary`, `--mc-primary`, `--bg-card`,
  …) are re-pointed at Ge-On values here, and every template that reads
  them is rebranded without being edited.

  Two groups of names are defined below:

    1. the Ge-On tokens, named as the design system names them; and
    2. aliases mapping this codebase's historical token names onto them.

  New markup should use group 1. Group 2 exists so the rebrand did not
  require rewriting forty templates, and shrinks as they are migrated.

  A caveat worth knowing: `base.html` and `gitmem/base_sidebar.html` store
  their tokens as bare HSL triples (`240 10% 3.9%`) because Tailwind wraps
  them in `hsl(...)`. Those aliases must stay in that format — a hex there
  produces `hsl(#9968ff)`, which is invalid and silently drops the colour.
*/

:root {
  color-scheme: dark;

  /* ---- Surfaces ------------------------------------------------------ */
  --geon-bg-canvas: #07090f;
  --geon-bg-base: #0a0e1a;
  --geon-bg-subtle: #10152a;
  --geon-bg-surface: #141a2e;
  --geon-bg-raised: #1a2138;
  --geon-bg-elevated: #242b47;
  --geon-bg-overlay: rgba(7, 9, 15, 0.72);
  --geon-bg-glass: rgba(20, 26, 46, 0.72);
  --geon-bg-glass-strong: rgba(20, 26, 46, 0.88);

  /* ---- Foreground ---------------------------------------------------- */
  --geon-fg-strong: #ffffff;
  --geon-fg-1: #f3f4f8;
  --geon-fg-2: #c9cdda;
  --geon-fg-muted: #8a94a6;
  --geon-fg-subtle: #5c6478;
  --geon-fg-inverse: #0a0e1a;
  --geon-fg-on-brand: #ffffff;
  --geon-fg-link: #b992ff;
  --geon-fg-link-hover: #d4b8ff;

  /* ---- Borders ------------------------------------------------------- */
  --geon-border-subtle: #1a2138;
  --geon-border-default: #242b47;
  --geon-border-strong: #323a5e;
  --geon-border-brand: #9968ff;
  --geon-border-focus: #b992ff;
  --geon-divider: rgba(255, 255, 255, 0.06);
  --geon-divider-strong: rgba(255, 255, 255, 0.1);

  /* ---- Primary (violet) ---------------------------------------------- */
  --geon-primary-50: #faf5ff;
  --geon-primary-100: #f3e8ff;
  --geon-primary-200: #e9d5ff;
  --geon-primary-300: #d8b4fe;
  --geon-primary-400: #c084fc;
  --geon-primary-500: #9968ff;
  --geon-primary-600: #8855ee;
  --geon-primary-700: #7c3aed;
  --geon-primary-800: #6b21a8;
  --geon-primary-900: #4c1d95;
  --geon-primary-950: #2e0a5c;

  /* ---- Accents ------------------------------------------------------- */
  --geon-accent-violet: #9968ff;
  --geon-accent-purple: #b43feb;
  --geon-accent-magenta: #e854d0;
  --geon-accent-pink: #ff6cb2;
  --geon-accent-rose: #ff7e93;
  --geon-accent-coral: #ffaf56;
  --geon-accent-amber: #ffc877;

  /* ---- Roles --------------------------------------------------------- */
  --geon-success: #10b981;
  --geon-success-fg: #34d399;
  --geon-warning: #f59e0b;
  --geon-warning-fg: #fbbf24;
  --geon-error: #ef4444;
  --geon-error-fg: #f87171;
  --geon-info: #3b82f6;
  --geon-info-fg: #60a5fa;
  --geon-ai: #9968ff;
  --geon-ai-fg: #c084fc;
  --geon-ai-bg: rgba(153, 104, 255, 0.14);
  --geon-ai-border: rgba(153, 104, 255, 0.4);

  /* ---- Gradients ----------------------------------------------------- */
  --geon-gradient-primary: linear-gradient(90deg, #9968ff 0%, #ff6cb2 52%, #ffaf56 100%);
  --geon-gradient-primary-hover: linear-gradient(90deg, #8855ee 0%, #ee5ba1 52%, #ee9e45 100%);
  --geon-gradient-primary-soft: linear-gradient(
    90deg,
    rgba(153, 104, 255, 0.18) 0%,
    rgba(255, 108, 178, 0.18) 52%,
    rgba(255, 175, 86, 0.18) 100%
  );
  --geon-gradient-diagonal: linear-gradient(135deg, #9968ff 0%, #ff6cb2 100%);
  --geon-gradient-conic: conic-gradient(from 180deg at 50% 50%, #9968ff, #ff6cb2, #ffaf56, #9968ff);
  --geon-gradient-mesh:
    radial-gradient(at 20% 20%, rgba(153, 104, 255, 0.18) 0, transparent 50%),
    radial-gradient(at 80% 30%, rgba(255, 108, 178, 0.14) 0, transparent 45%),
    radial-gradient(at 60% 85%, rgba(255, 175, 86, 0.12) 0, transparent 50%);

  /* ---- Data-viz ------------------------------------------------------ */
  --geon-viz-1: #9968ff;
  --geon-viz-2: #ff6cb2;
  --geon-viz-3: #ffaf56;
  --geon-viz-4: #22d3ee;
  --geon-viz-5: #10b981;
  --geon-viz-6: #f0b429;

  /* ---- Glows and shadows --------------------------------------------- */
  --geon-glow-sm: 0 0 12px rgba(153, 104, 255, 0.25);
  --geon-glow-md: 0 0 20px rgba(153, 104, 255, 0.3);
  --geon-glow-lg: 0 0 40px rgba(153, 104, 255, 0.4);

  /* ---- Typography ----------------------------------------------------
     Outfit and Plus Jakarta Sans are what this service already loads;
     Inter is the design system's sans. All three are kept so headings do
     not reflow, with Inter first for body text to match geon-web-ui. */
  --geon-font-sans: "Inter", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --geon-font-display: "Outfit", "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --geon-font-mono: "JetBrains Mono", ui-monospace, "Fira Code", Monaco, Consolas, monospace;

  /* ==================================================================== */
  /* Aliases — this codebase's historical token names, re-pointed.        */
  /* ==================================================================== */

  /* base.html and gitmem/base_sidebar.html: bare HSL triples, because
     Tailwind composes them as hsl(var(--token)). Hex values are invalid
     here and would silently drop the colour. */
  --background: 225 43% 6%;        /* #0a0e1a */
  --foreground: 240 22% 96%;       /* #f3f4f8 */
  --card: 227 38% 13%;             /* #141a2e */
  --card-foreground: 240 22% 96%;
  --card-border: 228 34% 21%;      /* #242b47 */
  --primary: 262 100% 70%;         /* #9968ff */
  --primary-foreground: 0 0% 100%;
  --primary-hover: 262 84% 63%;    /* #8855ee */
  --ai-1: 331 100% 71%;            /* #ff6cb2 */
  --ai-1-foreground: 0 0% 100%;
  --ai-2: 30 100% 67%;             /* #ffaf56 */
  --ai-2-foreground: 0 0% 10%;
  --ai-3: 187 71% 53%;             /* #22d3ee */
  --ai-3-foreground: 0 0% 10%;
  --success: 160 84% 39%;          /* #10b981 */
  --warning: 38 92% 50%;           /* #f59e0b */
  --error: 0 84% 60%;              /* #ef4444 */
  --secondary: 228 34% 17%;        /* #1a2138 */
  --secondary-foreground: 240 22% 96%;
  --muted: 229 45% 12%;            /* #10152a */
  --muted-foreground: 218 13% 60%; /* #8a94a6 */
  --accent: 262 100% 70%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 228 34% 21%;
  --input: 228 34% 21%;
  --ring: 265 100% 78%;            /* #b992ff */
  --radius: 12px;

  /* styles.css: plain colour values. */
  --mc-bg: #0a0e1a;
  --mc-surface: #141a2e;
  --mc-surface-2: #1a2138;
  --mc-border: #242b47;
  --mc-primary: #9968ff;
  --mc-secondary: #ff6cb2;
  --mc-success: #10b981;
  --mc-warning: #f59e0b;
  --mc-danger: #ef4444;

  /* Context categories, drawn from the data-viz ramp so they stay
     distinguishable from one another and on-brand together. */
  --cat-facts: #9968ff;
  --cat-events: #22d3ee;
  --cat-playbooks: #10b981;
  --cat-decisions: #ffaf56;
  --cat-documents: #b43feb;
  --cat-live: #ff6cb2;

  --bg-primary: #07090f;
  --bg-secondary: #0a0e1a;
  --bg-card: #141a2e;
  --bg-input: #1a2138;
  --transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* `--border`, `--primary` and friends are HSL triples above because
   Tailwind needs them that way, but styles.css consumes some of the same
   names as plain colours. These rules give those consumers a real colour
   rather than an unparsable one. */
body {
  background: var(--geon-bg-canvas);
  background-image: var(--geon-gradient-mesh);
  background-attachment: fixed;
  color: var(--geon-fg-1);
  font-family: var(--geon-font-sans);
}

h1,
h2,
h3,
h4,
.font-display {
  font-family: var(--geon-font-display);
}

a {
  color: var(--geon-fg-link);
}

a:hover {
  color: var(--geon-fg-link-hover);
}

/* The brand mark: the gradient is the identity, so it is one utility
   rather than a colour repeated per template. */
.geon-gradient-text {
  background: var(--geon-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.geon-gradient-bg {
  background: var(--geon-gradient-primary);
  color: var(--geon-fg-on-brand);
}

.geon-gradient-bg:hover {
  background: var(--geon-gradient-primary-hover);
}

.geon-glow {
  box-shadow: var(--geon-glow-md);
}

::selection {
  background: rgba(153, 104, 255, 0.32);
  color: var(--geon-fg-strong);
}

:focus-visible {
  outline: 2px solid var(--geon-border-focus);
  outline-offset: 2px;
}

/* Scrollbars, so chrome does not fall back to the browser's blue. */
* {
  scrollbar-color: var(--geon-border-strong) transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--geon-border-strong);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--geon-primary-500);
}
