/* SciStudio — color tokens.
   Source: frontend/src/index.css + tailwind.config.ts + categoryVisuals.ts + typeColorMap.ts
   in github.com/jiazhenz026/SciStudio. Exact hexes preserved. */

:root {
  /* ---- Brand palette (--ss-*: RGB channels for alpha composition) ---- */
  --ss-canvas: 245 241 232; /* @kind color */ /* #f5f1e8 warm paper canvas */
  --ss-ink: 28 33 27; /* @kind color */       /* #1c211b near-black green-ink */
  --ss-ember: 240 106 68; /* @kind color */   /* #f06a44 primary accent */
  --ss-pine: 46 93 80; /* @kind color */      /* #2e5d50 secondary accent */
  --ss-sea: 45 120 145; /* @kind color */     /* #2d7891 tertiary / edges */
  --ss-sand: 221 196 157; /* @kind color */   /* #ddc49d warm neutral */

  /* Convenience full-opacity aliases */
  --color-canvas: #f5f1e8;
  --color-ink: #1c211b;
  --color-ember: #f06a44;
  --color-pine: #2e5d50;
  --color-sea: #2d7891;
  --color-sand: #ddc49d;

  /* ---- Neutrals (Tailwind stone scale, used throughout the app) ---- */
  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;

  /* ---- shadcn semantic tokens (HSL channels, stone base) ---- */
  --background: 0 0% 100%; /* @kind color */
  --foreground: 20 8% 10%; /* @kind color */
  --card: 0 0% 100%; /* @kind color */
  --card-foreground: 20 8% 10%; /* @kind color */
  --popover: 0 0% 100%; /* @kind color */
  --popover-foreground: 20 8% 10%; /* @kind color */
  --primary: 20 8% 10%; /* @kind color */
  --primary-foreground: 60 9% 98%; /* @kind color */
  --secondary: 20 5% 90%; /* @kind color */
  --secondary-foreground: 20 8% 10%; /* @kind color */
  --muted: 20 5% 90%; /* @kind color */
  --muted-foreground: 20 4% 46%; /* @kind color */
  --accent: 20 5% 90%; /* @kind color */
  --accent-foreground: 20 8% 10%; /* @kind color */
  --destructive: 0 84% 60%; /* @kind color */
  --destructive-foreground: 60 9% 98%; /* @kind color */
  --border: 20 6% 83%; /* @kind color */
  --input: 20 6% 83%; /* @kind color */
  --ring: 20 8% 10%; /* @kind color */

  /* ---- Semantic aliases ---- */
  --text-body: rgb(var(--ss-ink));
  --text-muted: var(--stone-500);
  --text-subtle: var(--stone-400);
  --surface-app: rgb(var(--ss-canvas));
  --surface-card: rgba(255, 255, 255, 0.86);
  --surface-panel: #ffffff;
  --border-default: var(--stone-200);
  --border-strong: var(--stone-300);

  /* App-shell background: warm canvas with sea + ember radial glows */
  --bg-app:
    radial-gradient(circle at top right, rgb(var(--ss-sea) / 0.12), transparent 30%),
    radial-gradient(circle at bottom left, rgb(var(--ss-ember) / 0.18), transparent 28%),
    rgb(var(--ss-canvas));
  /* Panel gradient (palette, tab bars, bottom panel) */
  --bg-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 241, 232, 0.98));
  --bg-panel-bottom: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(238, 231, 219, 0.98));

  /* ---- Block-category "macaron" palette (canvas nodes + palette tiles) ---- */
  --cat-io-bg: #9fd4ee;        --cat-io-fg: #176684;        --cat-io-border: #74c1e3;
  --cat-process-bg: #9fdcbb;   --cat-process-fg: #1f6e54;   --cat-process-border: #73cda0;
  --cat-code-bg: #c6b8f0;      --cat-code-fg: #5a44a8;      --cat-code-border: #a892e8;
  --cat-app-bg: #fae28e;       --cat-app-fg: #8a6516;       --cat-app-border: #f1d062;
  --cat-ai-bg: #f9b8a0;        --cat-ai-fg: #c2502c;        --cat-ai-border: #f29c7e;
  --cat-subworkflow-bg: #eebcd0; --cat-subworkflow-fg: #b04a78; --cat-subworkflow-border: #e49dbe;
  --cat-custom-bg: #c9d1d9;    --cat-custom-fg: #4f5b66;    --cat-custom-border: #aeb9c4;

  /* ---- Data-type port colors (typeColorMap.ts) ---- */
  --type-array: #3b82f6;      /* Array / Image / Mask */
  --type-series: #14b8a6;     /* Series / Spectrum */
  --type-dataframe: #f59e0b;  /* DataFrame / PeakTable */
  --type-text: #22c55e;       /* Text */
  --type-artifact: #6b7280;   /* Artifact */
  --type-composite: #8b5cf6;  /* CompositeData / Label */
  --type-dataobject: #374151; /* DataObject fallback */
  --type-ring-subtype: #ef4444;
  --type-ring-mask: #ec4899;
  --edge-default: #2d7891;    /* TypedEdge fallback stroke */
}