/* Theme: Pipeline — Dev tools (pipeline-devtools) */
/* A technical, highly-scannable interface that pairs clinical utility with a vivid electric cyan identity. */

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@layer base {
  :root {
    /* The brand's native cool gray spectrum, optimized for code layouts and crisp borders. */
    --palette-neutral-100: #FAFAFB;
    --palette-neutral-150: #F8F9F9;
    --palette-neutral-200: #F3F4F5;
    --palette-neutral-250: #EAEDED;
    --palette-neutral-300: #DEE2E2;
    --palette-neutral-350: #CED4D5;
    --palette-neutral-400: #BBC3C4;
    --palette-neutral-450: #A5AFB0;
    --palette-neutral-500: #8C9798;
    --palette-neutral-550: #6E7C7D;
    --palette-neutral-600: #576263;
    --palette-neutral-650: #434C4D;
    --palette-neutral-700: #333A3B;
    --palette-neutral-750: #272C2D;
    --palette-neutral-800: #1E2223;
    --palette-neutral-850: #181C1D;
    --palette-neutral-900: #171A1B;
    /* The primary electric cyan brand identifier. */
    --palette-brand-100: #F3FCFF;
    --palette-brand-150: #EFFBFF;
    --palette-brand-200: #E1F8FF;
    --palette-brand-250: #CBF2FF;
    --palette-brand-300: #ABEBFF;
    --palette-brand-350: #83E1FF;
    --palette-brand-400: #52D5FF;
    --palette-brand-450: #19C6FF;
    --palette-brand-500: #00A0D6;
    --palette-brand-550: #0082AE;
    --palette-brand-600: #00678A;
    --palette-brand-650: #00516C;
    --palette-brand-700: #003E53;
    --palette-brand-750: #002F40;
    --palette-brand-800: #002532;
    --palette-brand-850: #001F29;
    --palette-brand-900: #001D27;
    --palette-danger-100: #FEF9F9;
    --palette-danger-150: #FEF7F6;
    --palette-danger-200: #FDF0EF;
    --palette-danger-250: #FCE5E3;
    --palette-danger-300: #FBD6D2;
    --palette-danger-350: #F8C2BD;
    --palette-danger-400: #F5AAA3;
    --palette-danger-450: #F18E84;
    --palette-danger-500: #EC6E62;
    --palette-danger-550: #E63927;
    --palette-danger-600: #C02515;
    --palette-danger-650: #961C10;
    --palette-danger-700: #74150C;
    --palette-danger-750: #591009;
    --palette-danger-800: #450C07;
    --palette-danger-850: #390A05;
    --palette-danger-900: #360A05;
    --palette-warning-100: #FFF9F1;
    --palette-warning-150: #FEF8ED;
    --palette-warning-200: #FEF3E1;
    --palette-warning-250: #FDEACC;
    --palette-warning-300: #FCDEAF;
    --palette-warning-350: #FACF89;
    --palette-warning-400: #F8BC5C;
    --palette-warning-450: #F5A527;
    --palette-warning-500: #D0840B;
    --palette-warning-550: #A96A08;
    --palette-warning-600: #865406;
    --palette-warning-650: #684204;
    --palette-warning-700: #503203;
    --palette-warning-750: #3D2602;
    --palette-warning-800: #301E02;
    --palette-warning-850: #271901;
    --palette-warning-900: #251701;
    --palette-success-100: #F3FCF7;
    --palette-success-150: #EFFCF5;
    --palette-success-200: #E4F9ED;
    --palette-success-250: #D2F5E1;
    --palette-success-300: #B8F0D0;
    --palette-success-350: #97E8BA;
    --palette-success-400: #6FDF9F;
    --palette-success-450: #40D47F;
    --palette-success-500: #26AA5E;
    --palette-success-550: #1F8A4C;
    --palette-success-600: #186D3C;
    --palette-success-650: #12552F;
    --palette-success-700: #0E4124;
    --palette-success-750: #0B321B;
    --palette-success-800: #082615;
    --palette-success-850: #072011;
    --palette-success-900: #061E10;
    --palette-info-100: #F7FBFE;
    --palette-info-150: #F4FAFD;
    --palette-info-200: #EBF5FC;
    --palette-info-250: #DDEEFA;
    --palette-info-300: #C8E4F6;
    --palette-info-350: #ADD6F2;
    --palette-info-400: #8DC6EC;
    --palette-info-450: #68B3E5;
    --palette-info-500: #3D9CDD;
    --palette-info-550: #2181C2;
    --palette-info-600: #19669A;
    --palette-info-650: #135078;
    --palette-info-700: #0E3D5C;
    --palette-info-750: #0B2E46;
    --palette-info-800: #082437;
    --palette-info-850: #071E2D;
    --palette-info-900: #061C2A;
    --palette-accent-100: #F9FAFC;
    --palette-accent-150: #F7F9FB;
    --palette-accent-200: #F1F4F8;
    --palette-accent-250: #E6EDF3;
    --palette-accent-300: #D8E2EB;
    --palette-accent-350: #C6D4E2;
    --palette-accent-400: #B1C3D6;
    --palette-accent-450: #97AFC7;
    --palette-accent-500: #7A98B6;
    --palette-accent-550: #567BA0;
    --palette-accent-600: #436180;
    --palette-accent-650: #334C64;
    --palette-accent-700: #273A4D;
    --palette-accent-750: #1E2C3B;
    --palette-accent-800: #17222E;
    --palette-accent-850: #131C26;
    --palette-accent-900: #121B24;
  }

  :root {
    --radius: 0.5rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --background: #F5F7FA;
    --foreground: #2E2E2E;
    --card: #FFFFFF;
    --card-foreground: #2E2E2E;
    --popover: #FFFFFF;
    --popover-foreground: #2E2E2E;
    --primary: #00BFFF;
    --primary-foreground: #2E2E2E;
    --secondary: var(--palette-neutral-200);
    --secondary-foreground: var(--palette-neutral-800);
    --muted: var(--palette-neutral-150);
    --muted-foreground: var(--palette-neutral-700);
    --accent: var(--palette-brand-100);
    --accent-foreground: var(--palette-brand-600);
    --destructive: var(--palette-danger-700);
    --destructive-foreground: var(--palette-neutral-100);
    --border: #E0E6ED;
    --input: #E0E6ED;
    --ring: var(--palette-brand-400);
    --chart-1: var(--palette-brand-500);
    --chart-2: var(--palette-accent-500);
    --chart-3: var(--palette-success-500);
    --chart-4: var(--palette-warning-500);
    --chart-5: var(--palette-danger-500);
    --sidebar: var(--palette-neutral-100);
    --sidebar-foreground: var(--palette-neutral-800);
    --sidebar-primary: var(--palette-brand-500);
    --sidebar-primary-foreground: var(--palette-neutral-900);
    --sidebar-accent: var(--palette-neutral-150);
    --sidebar-accent-foreground: var(--palette-neutral-900);
    --sidebar-border: var(--palette-neutral-200);
    --sidebar-ring: var(--palette-brand-400);
    --font-sans: "Inter", system-ui, sans-serif;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --text-hero: 700 2rem/3.1875rem var(--font-display);
    --text-hero-tracking: -0.02em;
    --text-title: 600 1.5rem/2.375rem var(--font-display);
    --text-title-tracking: -0.02em;
    --text-heading: 600 1.25rem/2rem var(--font-display);
    --text-heading-tracking: -0.02em;
    --text-body: 400 0.8125rem/1.0625rem var(--font-sans);
    --text-caption: 400 0.6875rem/0.9375rem var(--font-sans);
    --text-label: 500 0.875rem/1.4375rem var(--font-sans);
    --text-overline: 600 0.6875rem/0.9375rem var(--font-sans);
    --text-overline-tracking: 0.08em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
    --shadow-md: 0px 0px 0px 4px rgba(0, 191, 255, 0.3);
    --shadow-lg: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
    --gradient-brand_wash: linear-gradient(135deg, #00BFFF 0%, #2C3E50 100%);
  }

  .dark {
    --background: #1C2430;
    --foreground: #E6E6E6;
    --card: #202B38;
    --card-foreground: #E6E6E6;
    --popover: #202B38;
    --popover-foreground: #E6E6E6;
    --primary: var(--palette-brand-400);
    --primary-foreground: var(--palette-neutral-900);
    --secondary: var(--palette-neutral-800);
    --secondary-foreground: var(--palette-neutral-200);
    --muted: var(--palette-neutral-800);
    --muted-foreground: var(--palette-neutral-400);
    --accent: var(--palette-brand-900);
    --accent-foreground: var(--palette-brand-200);
    --destructive: var(--palette-danger-600);
    --destructive-foreground: var(--palette-neutral-100);
    --border: var(--palette-neutral-700);
    --input: var(--palette-neutral-700);
    --ring: var(--palette-brand-500);
    --chart-1: var(--palette-brand-400);
    --chart-2: var(--palette-accent-400);
    --chart-3: var(--palette-success-400);
    --chart-4: var(--palette-warning-400);
    --chart-5: var(--palette-danger-400);
    --sidebar: var(--palette-neutral-900);
    --sidebar-foreground: var(--palette-neutral-200);
    --sidebar-primary: var(--palette-brand-400);
    --sidebar-primary-foreground: var(--palette-neutral-900);
    --sidebar-accent: var(--palette-neutral-800);
    --sidebar-accent-foreground: var(--palette-neutral-100);
    --sidebar-border: var(--palette-neutral-800);
    --sidebar-ring: var(--palette-brand-500);
  }
}

@layer base {
  * { border-color: var(--border); }
  body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); }
}

@layer components {
  .text-hero {
    font: var(--text-hero);
    letter-spacing: var(--text-hero-tracking);
  }
  .text-title {
    font: var(--text-title);
    letter-spacing: var(--text-title-tracking);
  }
  .text-heading {
    font: var(--text-heading);
    letter-spacing: var(--text-heading-tracking);
  }
  .text-body {
    font: var(--text-body);
  }
  .text-caption {
    font: var(--text-caption);
  }
  .text-label {
    font: var(--text-label);
  }
  .text-overline {
    font: var(--text-overline);
    letter-spacing: var(--text-overline-tracking);
    text-transform: var(--text-overline-transform);
  }
}