/* Venkat's June 2026 design tokens — single source of truth for DP + CP.
 *
 * Imported by data-plane/app/ui/src/index.css and
 * control-plane/app/ui/src/index.css before their @tailwind directives,
 * so :root vars are available everywhere.
 *
 * Layering with the existing shadcn/Tailwind theme tokens (--background,
 * --foreground, --primary, etc.): we keep those untouched and add a
 * parallel namespace (--ink, --paper, --v, --grn, --cat-*, ...) so:
 *   • existing components keep working unchanged
 *   • new components opt-in via the new tokens (`bg-[var(--paper-1)]`,
 *     `text-[var(--ink-700)]`, `border-[color:var(--cat-resource)]`)
 *   • Tailwind theme extensions in tailwind.config.ts expose these as
 *     first-class utility classes (text-ink, bg-paper-1, border-cat-read)
 *
 * Source: extracted verbatim from "FaburAI Data Plane - Standalone (5).html"
 * (Venkat's prototype, the canonical reference). Where the dark variant
 * differed, the light variant is canonical (today's apps run light); dark
 * lives in [data-theme="dark"] for the existing dark-mode toggles.
 */

:root {
  /* === Typography === */
  --font-sans:  'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-serif: Georgia, 'Times New Roman', serif;

  --body-lg: 400 1.14rem/1.6 var(--font-sans);
  --body:    400 0.95rem/1.55 var(--font-sans);
  --body-sm: 400 0.82rem/1.5 var(--font-sans);
  --caption: 500 0.75rem/1.4 var(--font-sans);
  --code:    400 0.85rem/1.5 var(--font-mono);

  /* === Ink scale (dark/text on light, surfaces on dark) === */
  --ink-500: #1F2547;
  --ink-550: #1E2D4A;
  --ink-600: #1A2340;
  --ink-700: #11152A;
  --ink-800: #0D1128;
  --ink-850: #0B1730;
  --ink-900: #07101F;

  /* === Paper scale (light surfaces) === */
  --paper-0: #FBFCFE;
  --paper-1: #F7F8FB;
  --paper-2: #F4F5F8;

  /* === Lines / borders === */
  --line-100: #EEF3FF;
  --line-200: #E5EBF3;
  --line-300: #DCE3EE;

  /* === Brand: violet === */
  --violet-300: #A78BFA;
  --violet-400: #9B59F5;
  --violet-500: #7C3AED;  /* canonical brand violet on light bg */
  --violet-550: #6D4DF2;
  --violet-600: #5A39F0;
  --violet-700: #4328D9;
  /* Short aliases — match prototype usage like `var(--v)` */
  --v300: var(--violet-300);
  --v400: var(--violet-400);
  --v500: var(--violet-500);
  --v600: var(--violet-600);
  --v: var(--violet-500);

  /* === Status colors (semantic) === */
  --grn:    #22B85C;   /* allow / healthy / read */
  --amb:    #F5A013;   /* warn / degraded / write */
  --red:    #EF4343;   /* deny / unhealthy / delete / sensitive */
  --sky:    #0EA5E9;   /* info / resource */
  --ind:    #6366F1;   /* role */
  --ora:    #F97316;   /* tool / agent */
  --pnk:    #EC4899;   /* application */
  --blu:    #3B82F6;
  --vio:    #7C3AED;
  --danger: var(--red);

  /* === Status tints (translucent backgrounds + borders) === */
  --grn-l: rgba(34,184,92,.10);
  --grn-b: rgba(34,184,92,.25);
  --amb-l: rgba(245,160,19,.10);
  --amb-b: rgba(245,160,19,.30);
  --red-l: rgba(239,67,67,.10);
  --red-b: rgba(239,67,67,.25);
  --blu-l: rgba(59,130,246,.10);
  --blu-b: rgba(59,130,246,.25);
  --vio-l: rgba(124,58,237,.10);
  --vio-b: rgba(124,58,237,.25);
  --ind-l: rgba(99,102,241,.10);
  --ind-b: rgba(99,102,241,.25);

  /* === Category stripes (card left-edge convention) ===
   * Convention: green=read, amber=write, red=delete/sensitive,
   * violet=admin, sky=resource/mcp, indigo=role, orange=tool, pink=app.
   * Used as `border-left: 3px solid var(--cat-read)`.
   */
  --cat-read:     #22B85C;
  --cat-write:    #F5A013;
  --cat-delete:   #EF4343;
  --cat-admin:    #7C3AED;
  --cat-resource: #0EA5E9;
  --cat-mcp:      #06B6D4;
  --cat-postgres: #8B5CF6;
  --cat-role:     #6366F1;
  --cat-tool:     #F97316;
  --cat-agent:    #F97316;
  --cat-app:      #EC4899;
  --cat-model:    #0EA5E9;

  /* === Surfaces (light theme is canonical) === */
  --bg:        var(--paper-2);
  --bg-raised: var(--paper-1);
  --bg-card:   var(--paper-0);
  --fg-1:      var(--ink-700);
  --fg-2:      #475569;
  --fg-3:      #64748B;
  --fg-inverse: #FFFFFF;
  --border-strong: #C9D3E0;

  /* === Graph chrome (used by ReactFlow / lineage views) === */
  --g-panel:        rgba(255,255,255,.82);
  --g-panel-solid:  #FFFFFF;
  --g-border:       rgba(16,24,39,.10);
  --g-border-2:     rgba(16,24,39,.16);
  --g-grid:         rgba(16,24,39,.045);
  --g-chip:         rgba(16,24,39,.04);
  --g-fg:           #101827;
  --g-fg2:          #475569;
  --g-fg3:          #6C789A;
  --g-edge-neutral: rgba(148,163,184,.40);
  --g-node-bg:      rgba(255,255,255,.92);
}

/* Dark-theme overrides — kept for the existing .dark / [data-theme="dark"]
 * toggles in DP/CP. Values match prototype's dark variant. */
.dark, [data-theme="dark"] {
  --bg:        var(--ink-800);
  --bg-raised: var(--ink-700);
  --bg-card:   var(--ink-700);
  --fg-1:      #E8ECF5;
  --fg-2:      #B7C0D4;
  --fg-3:      #9AA6C2;
  --border-strong: #2A3358;

  /* Brand shifts to a lighter violet on dark bg for contrast */
  --v: var(--violet-400);

  /* Graph chrome dark variant */
  --g-panel:        rgba(17,21,42,.72);
  --g-panel-solid:  #11152A;
  --g-border:       rgba(124,140,190,.18);
  --g-border-2:     rgba(124,140,190,.30);
  --g-grid:         rgba(124,140,190,.05);
  --g-chip:         rgba(255,255,255,.05);
  --g-fg:           #EAEFFA;
  --g-fg2:          #9AA6C2;
  --g-fg3:          #8593AB;
  --g-edge-neutral: rgba(100,116,139,.45);
  --g-node-bg:      rgba(13,17,40,.78);
}