/* Theme: Blueprint — Dev tools (blueprint-devtools) */
/* A high-fidelity developer workspace characterized by deep navy backdrops, crisp flat-bordered panels, and glowing cyan accents. */

@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 {
    /* Slate blue neutral to provide a cool, structured technical foundation. */
    --palette-neutral-100: #FAFAFC;
    --palette-neutral-150: #F8F9FB;
    --palette-neutral-200: #F2F4F7;
    --palette-neutral-250: #E9ECF1;
    --palette-neutral-300: #DBE1E9;
    --palette-neutral-350: #CBD3DF;
    --palette-neutral-400: #B7C2D1;
    --palette-neutral-450: #9FAEC1;
    --palette-neutral-500: #8596AE;
    --palette-neutral-550: #617897;
    --palette-neutral-600: #4C5F78;
    --palette-neutral-650: #3A495E;
    --palette-neutral-700: #2C3849;
    --palette-neutral-750: #222B38;
    --palette-neutral-800: #1A212B;
    --palette-neutral-850: #151C24;
    --palette-neutral-900: #141A22;
    /* Vivid cyan brand anchor for high-tech blueprint elements. */
    --palette-brand-100: #E8FFFF;
    --palette-brand-150: #E3FFFF;
    --palette-brand-200: #D4FFFF;
    --palette-brand-250: #BBFFFF;
    --palette-brand-300: #97FFFF;
    --palette-brand-350: #6AFFFF;
    --palette-brand-400: #33FFFF;
    --palette-brand-450: #00F1F1;
    --palette-brand-500: #00A5A5;
    --palette-brand-550: #008686;
    --palette-brand-600: #006A6A;
    --palette-brand-650: #005353;
    --palette-brand-700: #004040;
    --palette-brand-750: #003131;
    --palette-brand-800: #002626;
    --palette-brand-850: #002020;
    --palette-brand-900: #001E1E;
    --palette-danger-100: #FFF9F8;
    --palette-danger-150: #FFF7F5;
    --palette-danger-200: #FFF0ED;
    --palette-danger-250: #FFE3DE;
    --palette-danger-300: #FFD2CA;
    --palette-danger-350: #FFBDB0;
    --palette-danger-400: #FFA291;
    --palette-danger-450: #FF836D;
    --palette-danger-500: #FF5F43;
    --palette-danger-550: #FF2903;
    --palette-danger-600: #CF1E00;
    --palette-danger-650: #A21700;
    --palette-danger-700: #7C1100;
    --palette-danger-750: #5F0D00;
    --palette-danger-800: #4A0A00;
    --palette-danger-850: #3D0800;
    --palette-danger-900: #390700;
    --palette-warning-100: #FFFBE5;
    --palette-warning-150: #FFFAE0;
    --palette-warning-200: #FFF8D2;
    --palette-warning-250: #FFF5B9;
    --palette-warning-300: #FFEF97;
    --palette-warning-350: #FFE96C;
    --palette-warning-400: #FFE036;
    --palette-warning-450: #F8D100;
    --palette-warning-500: #AF9300;
    --palette-warning-550: #8D7700;
    --palette-warning-600: #705E00;
    --palette-warning-650: #574900;
    --palette-warning-700: #433800;
    --palette-warning-750: #332B00;
    --palette-warning-800: #282100;
    --palette-warning-850: #211C00;
    --palette-warning-900: #1E1A00;
    --palette-success-100: #EBFFF6;
    --palette-success-150: #E6FFF4;
    --palette-success-200: #D7FFED;
    --palette-success-250: #BEFFE1;
    --palette-success-300: #9BFFD1;
    --palette-success-350: #6EFFBC;
    --palette-success-400: #37FFA2;
    --palette-success-450: #00F783;
    --palette-success-500: #00AB5B;
    --palette-success-550: #008B4A;
    --palette-success-600: #006E3B;
    --palette-success-650: #00562E;
    --palette-success-700: #004223;
    --palette-success-750: #00331B;
    --palette-success-800: #002815;
    --palette-success-850: #002111;
    --palette-success-900: #001F10;
    --palette-info-100: #F6FBFF;
    --palette-info-150: #F3F9FF;
    --palette-info-200: #EAF4FF;
    --palette-info-250: #DAEDFF;
    --palette-info-300: #C4E2FF;
    --palette-info-350: #A8D4FF;
    --palette-info-400: #86C3FF;
    --palette-info-450: #5EAEFF;
    --palette-info-500: #3097FF;
    --palette-info-550: #0079F6;
    --palette-info-600: #0060C4;
    --palette-info-650: #004B99;
    --palette-info-700: #003975;
    --palette-info-750: #002B59;
    --palette-info-800: #002246;
    --palette-info-850: #001C3A;
    --palette-info-900: #001A36;
    --palette-accent-100: #FFFBE5;
    --palette-accent-150: #FFFAE0;
    --palette-accent-200: #FFF8D2;
    --palette-accent-250: #FFF5B9;
    --palette-accent-300: #FFEF97;
    --palette-accent-350: #FFE96C;
    --palette-accent-400: #FFE036;
    --palette-accent-450: #F8D100;
    --palette-accent-500: #AF9300;
    --palette-accent-550: #8D7700;
    --palette-accent-600: #705E00;
    --palette-accent-650: #574900;
    --palette-accent-700: #433800;
    --palette-accent-750: #332B00;
    --palette-accent-800: #282100;
    --palette-accent-850: #211C00;
    --palette-accent-900: #1E1A00;
  }

  :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: var(--palette-neutral-100);
    --foreground: #0A162B;
    --card: var(--palette-neutral-150);
    --card-foreground: #0A162B;
    --popover: var(--palette-neutral-100);
    --popover-foreground: var(--palette-neutral-900);
    --primary: #0A162B;
    --primary-foreground: #00FFFF;
    --secondary: var(--palette-neutral-200);
    --secondary-foreground: var(--palette-neutral-900);
    --muted: var(--palette-neutral-200);
    --muted-foreground: var(--palette-neutral-600);
    --accent: var(--palette-brand-150);
    --accent-foreground: var(--palette-brand-800);
    --destructive: var(--palette-danger-600);
    --destructive-foreground: var(--palette-neutral-100);
    --border: var(--palette-neutral-300);
    --input: var(--palette-neutral-300);
    --ring: var(--palette-brand-500);
    --chart-1: var(--palette-brand-600);
    --chart-2: var(--palette-neutral-600);
    --chart-3: var(--palette-accent-600);
    --chart-4: var(--palette-success-600);
    --chart-5: var(--palette-danger-600);
    --sidebar: var(--palette-neutral-150);
    --sidebar-foreground: var(--palette-neutral-800);
    --sidebar-primary: #0A162B;
    --sidebar-primary-foreground: #00FFFF;
    --sidebar-accent: var(--palette-neutral-250);
    --sidebar-accent-foreground: var(--palette-neutral-900);
    --sidebar-border: var(--palette-neutral-250);
    --sidebar-ring: var(--palette-brand-500);
    --font-sans: "Inter", system-ui, sans-serif;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --text-hero: 500 2.5rem/3rem var(--font-display);
    --text-hero-tracking: -0.01em;
    --text-title: 500 1.75rem/2.25rem var(--font-display);
    --text-heading: 500 1.25rem/1.625rem var(--font-display);
    --text-body: 400 0.75rem/1.125rem var(--font-sans);
    --text-caption: 400 0.625rem/0.875rem var(--font-sans);
    --text-label: 400 0.75rem/0.875rem var(--font-sans);
    --text-overline: 500 0.625rem/0.875rem var(--font-sans);
    --text-overline-tracking: 0.05em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: rgba(0, 255, 255, 0.3) 0px 0px 0px 2px, rgba(0, 255, 255, 0.15) 0px 0px 0px 4px, rgba(0, 255, 255, 0.5) 0px 0px 8px 0px;
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(37, 64, 96, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(37, 64, 96, 0.8);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(0, 255, 255, 0.2);
    --gradient-brand_wash: linear-gradient(135deg, rgba(10, 22, 43, 0.95) 0%, rgba(20, 34, 60, 0.95) 100%);
    --gradient-blueprint_grid: linear-gradient(to right, rgba(30, 70, 110, 0.2) 1px, transparent 1px), linear-gradient(to bottom, rgba(30, 70, 110, 0.2) 1px, transparent 1px);
  }

  .dark {
    --background: #0A111F;
    --foreground: #80BFFF;
    --card: #0E1B30;
    --card-foreground: #80BFFF;
    --popover: #0E1B30;
    --popover-foreground: var(--palette-neutral-100);
    --primary: #0A162B;
    --primary-foreground: #00FFFF;
    --secondary: var(--palette-neutral-800);
    --secondary-foreground: var(--palette-neutral-100);
    --muted: #14223C;
    --muted-foreground: #789EC9;
    --accent: var(--palette-neutral-800);
    --accent-foreground: var(--palette-brand-400);
    --destructive: var(--palette-danger-700);
    --destructive-foreground: var(--palette-neutral-100);
    --border: #254060;
    --input: #254060;
    --ring: #00FFFF;
    --chart-1: var(--palette-brand-400);
    --chart-2: var(--palette-neutral-400);
    --chart-3: var(--palette-accent-400);
    --chart-4: var(--palette-success-400);
    --chart-5: var(--palette-danger-400);
    --sidebar: #070D18;
    --sidebar-foreground: #80BFFF;
    --sidebar-primary: #0A162B;
    --sidebar-primary-foreground: #00FFFF;
    --sidebar-accent: #14223C;
    --sidebar-accent-foreground: #00FFFF;
    --sidebar-border: #254060;
    --sidebar-ring: #00FFFF;
  }
}

@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);
  }
  .text-heading {
    font: var(--text-heading);
  }
  .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);
  }
}