/* ============================================================
   Tachikoma — Color tokens
   Dark, governance-first. Purple is the signature accent, used
   sparingly over a near-black base; cyan is the secondary gradient
   partner. Six "layer" accents map to the 6 product layers.
   ============================================================ */
:root {
  /* ---- Base surfaces (near-black, cool) ---- */
  --tk-bg: #0a0a0f;            /* body / canvas (gray-950) */
  --tk-surface: #111118;       /* raised section (gray-900) */
  --tk-surface-2: #16161f;     /* nested surface */
  --tk-card: #1e1e2a;          /* elevated card (gray-800) */
  --tk-ink: #0a0a0f;           /* on-light text / terminal bg */

  /* ---- Brand purple ramp ---- */
  --tk-purple-700: #581c87;
  --tk-purple-600: #6b21a8;    /* primary action */
  --tk-purple-500: #8b5cf6;    /* hover / glow source */
  --tk-purple-400: #a78bfa;    /* accent text, overlines, links */
  --tk-purple-300: #c084fc;    /* gradient mid */

  /* ---- Cyan (secondary gradient partner) ---- */
  --tk-cyan-500: #06b6d4;
  --tk-cyan-400: #22d3ee;
  --tk-cyan-300: #67e8f9;

  /* ---- Text ---- */
  --tk-text-heading: #ffffff;  /* headings */
  --tk-text-body: #d4d4d8;     /* body (gray-300) */
  --tk-text-muted: #a1a1aa;    /* muted (gray-400) */
  --tk-text-subtle: #71717a;   /* subtle / captions (gray-500) */
  --tk-text-faint: #52525b;    /* disabled (gray-600) */

  /* ---- Borders & lines ---- */
  --tk-border: rgba(139, 92, 246, 0.15);   /* default subtle purple hairline */
  --tk-border-card: rgba(139, 92, 246, 0.2);
  --tk-border-strong: rgba(139, 92, 246, 0.4);
  --tk-border-neutral: #71717a;            /* secondary button outline */
  --tk-grid-line: rgba(139, 92, 246, 0.05);/* whiteboard grid */

  /* ---- Semantic accents ---- */
  --tk-success: #22c55e;
  --tk-success-bright: #4ade80;
  --tk-info: #3b82f6;
  --tk-warning: #fbbf24;
  --tk-danger: #f87171;

  /* tinted fills (for chips / icon tiles) — 8% over base */
  --tk-success-fill: rgba(34, 197, 94, 0.08);
  --tk-info-fill: rgba(59, 130, 246, 0.08);
  --tk-warning-fill: rgba(251, 191, 36, 0.08);
  --tk-danger-fill: rgba(248, 113, 113, 0.08);
  --tk-purple-fill: rgba(139, 92, 246, 0.08);
  --tk-cyan-fill: rgba(34, 211, 238, 0.08);

  /* ---- The 6 layer accents (architecture) ---- */
  --tk-layer-1: #bec2ff;  /* U&A2CUI SDK        — periwinkle */
  --tk-layer-2: #f4e02f;  /* Progressive Hive   — yellow */
  --tk-layer-3: #85ecce;  /* Law & States       — mint */
  --tk-layer-4: #ffac4d;  /* Agentic Layer      — orange */
  --tk-layer-5: #ff6b8a;  /* Dynamic MCP Mesh   — red-pink */
  --tk-layer-6: #818cff;  /* Omnirepo           — indigo */

  /* ---- Semantic aliases (use these in components) ---- */
  --surface-page: var(--tk-bg);
  --surface-raised: var(--tk-surface);
  --surface-card: var(--tk-card);
  --text-heading: var(--tk-text-heading);
  --text-body: var(--tk-text-body);
  --text-muted: var(--tk-text-muted);
  --accent: var(--tk-purple-400);
  --accent-strong: var(--tk-purple-600);
}

/* Signature brand gradients */
:root {
  --tk-gradient-hero: linear-gradient(135deg, #a78bfa 0%, #22d3ee 100%); /* @kind color */
  --tk-gradient-purple: linear-gradient(135deg, #a78bfa 0%, #c084fc 50%, #7c3aed 100%); /* @kind color */
  --tk-gradient-layer: linear-gradient(135deg, #818cff 0%, #85ecce 100%); /* @kind color */
}

/* ============================================================
   Refreshed brand palette (used by the LIGHT theme as primary,
   and available in dark as brighter accents). Vivid violet →
   blue → pink → orange, with a clean neutral ramp.
   ============================================================ */
:root {
  /* violet */
  --tk-violet: #5a3df5;        /* primary */
  --tk-violet-vivid: #6a4cff;  /* hover / vivid */
  --tk-violet-light: #9c8cff;
  --tk-lavender: #d9d2ff;

  /* blue */
  --tk-blue: #6aa9f8;
  --tk-blue-light: #9fcbff;

  /* pink accent */
  --tk-pink: #f53ca7;
  --tk-pink-light: #ffd5ea;

  /* orange */
  --tk-orange: #ff7900;
  --tk-orange-light: #ffa347;

  /* neutral ramp */
  --tk-neutral-ink: #111111;   /* body text */
  --tk-neutral-800: #3b3b3b;   /* dark gray */
  --tk-neutral-600: #6e6e6e;   /* mid gray */
  --tk-neutral-200: #ededf2;   /* light gray / hairline */
  --tk-neutral-50: #f7f7fc;    /* very light bg */
  --tk-white: #ffffff;

  /* signature gradients (new palette) */
  --tk-gradient-logo: linear-gradient(135deg, #b77cff 0%, #8a7bff 38%, #6d98ff 70%, #5da8ff 100%); /* @kind color */
  --tk-gradient-card: linear-gradient(135deg, #6a3dff 0%, #4f5cff 50%, #5a8cff 100%); /* @kind color */
  --tk-gradient-cta:
    radial-gradient(ellipse 80% 100% at 20% 0%, rgba(139, 92, 246, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 100% at 90% 100%, rgba(34, 211, 238, 0.1) 0%, transparent 62%),
    linear-gradient(135deg, #17141f 0%, #141320 100%); /* @kind color */
  --tk-cta-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); /* @kind shadow */

  /* schema/diagram roles */
  --tk-schema-flow: #8d7cff;     /* data flow */
  --tk-schema-route: #5a3df5;    /* routing nodes */
  --tk-schema-channel: #f53ca7;  /* new channel */
  --tk-schema-event: #ff7900;    /* event source */
}