/* PipeKeel design tokens (09 §3.1). The ONLY file in which colors are defined —
   scripts/check-frontend.sh fails CI on color literals anywhere else. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 12px;  --text-sm: 13px;  --text-base: 14px;  --text-md: 16px;
  --text-lg: 18px;  --text-xl: 20px;  --text-2xl: 24px;  --text-3xl: 30px;
  --leading-tight: 1.25; --leading-normal: 1.5;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600;

  /* Spacing (4-pt scale) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Radius & elevation */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
  --backdrop: rgba(23, 32, 43, 0.40);

  /* Neutrals */
  --color-bg:            #F6F7F9;
  --color-surface:       #FFFFFF;
  --color-surface-2:     #F1F3F6;
  --color-surface-3:     #E9EDF2;
  --color-border:        #E2E6EB;
  --color-border-strong: #CBD2DA;
  --color-text:          #17202B;
  --color-text-muted:    #5B6675;
  --color-text-subtle:   #8792A0;
  --color-text-inverse:  #FFFFFF;

  /* Brand */
  --color-primary:        #1F3A5F;   /* keel navy */
  --color-brand-text:     #1F3A5F;   /* the PipeKeel wordmark */
  --color-primary-hover:  #183049;
  --color-primary-soft:   #E8EEF5;
  --color-accent:         #0F7C7A;   /* teal */
  --color-accent-hover:   #0B6664;
  --color-accent-soft:    #E3F2F1;
  --color-focus-ring:     rgba(15, 124, 122, 0.35);

  /* Status (muted, never neon) */
  --color-success: #2E7D5B;  --color-success-soft: #E6F2EC;
  --color-warning: #B7791F;  --color-warning-soft: #FBF1E1;
  --color-danger:  #B42318;  --color-danger-soft:  #FBEAE8;
  --color-danger-hover: #931C13;
  --color-info:    #2F5F8A;  --color-info-soft:    #E7EEF6;
  --color-running: #5A54B0;  --color-running-soft: #EEEDF8;

  /* Environment labels */
  --env-dev:  #0F7C7A;
  --env-uat:  #5A54B0;
  --env-prod: #B7791F;

  /* Canvas */
  --canvas-bg:        #F4F6F8;
  --canvas-grid:      #E3E7EC;
  --node-bg:          #FFFFFF;
  --node-border:      #D5DBE2;
  --node-selected:    #0F7C7A;
  --edge-color:       #9AA5B3;
  --edge-active:      #0F7C7A;
  --cat-source:       #2F5F8A;
  --cat-transform:    #5A54B0;
  --cat-target:       #2E7D5B;
  --cat-quality:      #B7791F;
  --cat-control:      #5B6675;

  /* Layout */
  --sidebar-w: 240px; --sidebar-w-collapsed: 64px; --topbar-h: 56px;
  --content-max: 1440px; --page-pad: var(--space-8);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms; --dur-base: 180ms;
}

/* Dark theme — same tokens, different values. Chosen by js/theme-init.js (System / Light / Dark). */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --backdrop: rgba(0, 0, 0, 0.60);

  --color-bg:            #0E1319;
  --color-surface:       #151B23;
  --color-surface-2:     #1B222C;
  --color-surface-3:     #232B36;
  --color-border:        #29323E;
  --color-border-strong: #3A4553;
  --color-text:          #E5E9EF;
  --color-text-muted:    #A3ADBA;
  --color-text-subtle:   #7B8695;
  --color-text-inverse:  #FFFFFF;

  --color-primary:        #3A6CA8;
  --color-brand-text:     #E5E9EF;
  --color-primary-hover:  #4A7DBA;
  --color-primary-soft:   #1B2738;
  --color-accent:         #3BB5A9;
  --color-accent-hover:   #55C6BB;
  --color-accent-soft:    #132D2B;
  --color-focus-ring:     rgba(59, 181, 169, 0.45);

  --color-success: #4DB386;  --color-success-soft: #13281F;
  --color-warning: #DDA34B;  --color-warning-soft: #2F2410;
  --color-danger:  #E2574F;  --color-danger-soft:  #351816;
  --color-danger-hover: #EC706A;
  --color-info:    #6FA2D4;  --color-info-soft:    #152336;
  --color-running: #9A94E6;  --color-running-soft: #221F3D;

  --env-dev:  #3BB5A9;
  --env-uat:  #9A94E6;
  --env-prod: #DDA34B;

  --canvas-bg:        #10151B;
  --canvas-grid:      #212932;
  --node-bg:          #19202A;
  --node-border:      #333D4A;
  --node-selected:    #3BB5A9;
  --edge-color:       #5E6979;
  --edge-active:      #3BB5A9;
  --cat-source:       #6FA2D4;
  --cat-transform:    #9A94E6;
  --cat-target:       #4DB386;
  --cat-quality:      #DDA34B;
  --cat-control:      #A3ADBA;
}