/* Theme: Captain (captain) */
/* A light, compact workspace system balancing high density structure with glassmorphic elements and a vivid cool-green brand energy. */

@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=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 {
    /* Balanced warm-grey neutral ramp derived from measured workspace canvases. */
    --palette-neutral-100: #FAFAFA;
    --palette-neutral-150: #F9F9F9;
    --palette-neutral-200: #F4F4F4;
    --palette-neutral-250: #ECECEC;
    --palette-neutral-300: #E1E1E1;
    --palette-neutral-350: #D3D3D3;
    --palette-neutral-400: #C1C1C1;
    --palette-neutral-450: #ADACAC;
    --palette-neutral-500: #959494;
    --palette-neutral-550: #787878;
    --palette-neutral-600: #5F5F5F;
    --palette-neutral-650: #4A4A4A;
    --palette-neutral-700: #383838;
    --palette-neutral-750: #2B2B2B;
    --palette-neutral-800: #212121;
    --palette-neutral-850: #1B1B1B;
    --palette-neutral-900: #1A1A1A;
    /* Vivid cool-green brand identifier used for high-visibility highlights and active states. */
    --palette-brand-100: #EBFFF7;
    --palette-brand-150: #E6FFF5;
    --palette-brand-200: #D7FFEF;
    --palette-brand-250: #BEFFE4;
    --palette-brand-300: #9BFFD6;
    --palette-brand-350: #6EFFC3;
    --palette-brand-400: #37FFAC;
    --palette-brand-450: #00F690;
    --palette-brand-500: #00AA64;
    --palette-brand-550: #008A51;
    --palette-brand-600: #006E40;
    --palette-brand-650: #005632;
    --palette-brand-700: #004226;
    --palette-brand-750: #00321D;
    --palette-brand-800: #002717;
    --palette-brand-850: #002113;
    --palette-brand-900: #001F12;
    /* Deep crimson used for destructive actions and critical system alerts. */
    --palette-danger-100: #FEF9FB;
    --palette-danger-150: #FEF7F9;
    --palette-danger-200: #FDF0F4;
    --palette-danger-250: #FCE5EC;
    --palette-danger-300: #FAD5E1;
    --palette-danger-350: #F7C1D2;
    --palette-danger-400: #F3A9C0;
    --palette-danger-450: #EE8CAB;
    --palette-danger-500: #E86B93;
    --palette-danger-550: #E13168;
    --palette-danger-600: #BF1B4E;
    --palette-danger-650: #96143D;
    --palette-danger-700: #740F2F;
    --palette-danger-750: #590B24;
    --palette-danger-800: #46091C;
    --palette-danger-850: #3B0717;
    --palette-danger-900: #370716;
    /* Vibrant gold used for warnings and attention-required states. */
    --palette-warning-100: #FDFAF2;
    --palette-warning-150: #FDF9EE;
    --palette-warning-200: #FBF5E2;
    --palette-warning-250: #F9EECE;
    --palette-warning-300: #F5E5B3;
    --palette-warning-350: #F0D890;
    --palette-warning-400: #E9C965;
    --palette-warning-450: #E2B733;
    --palette-warning-500: #B6901B;
    --palette-warning-550: #947515;
    --palette-warning-600: #755C10;
    --palette-warning-650: #5B480D;
    --palette-warning-700: #463709;
    --palette-warning-750: #352A07;
    --palette-warning-800: #292005;
    --palette-warning-850: #221B04;
    --palette-warning-900: #201904;
    /* The vivid cool-green serves double-duty as the brand anchor and positive status. */
    --palette-success-100: #EBFFF7;
    --palette-success-150: #E6FFF5;
    --palette-success-200: #D7FFEF;
    --palette-success-250: #BEFFE4;
    --palette-success-300: #9BFFD6;
    --palette-success-350: #6EFFC3;
    --palette-success-400: #37FFAC;
    --palette-success-450: #00F690;
    --palette-success-500: #00AA64;
    --palette-success-550: #008A51;
    --palette-success-600: #006E40;
    --palette-success-650: #005632;
    --palette-success-700: #004226;
    --palette-success-750: #00321D;
    --palette-success-800: #002717;
    --palette-success-850: #002113;
    --palette-success-900: #001F12;
    /* Vibrant cyan used for instructional callouts and informational badges. */
    --palette-info-100: #F3FCFE;
    --palette-info-150: #EFFBFD;
    --palette-info-200: #E3F8FC;
    --palette-info-250: #CFF3FA;
    --palette-info-300: #B3EBF7;
    --palette-info-350: #8FE2F3;
    --palette-info-400: #64D6EF;
    --palette-info-450: #30C8E8;
    --palette-info-500: #16A2C0;
    --palette-info-550: #11839C;
    --palette-info-600: #0D687C;
    --palette-info-650: #0A5160;
    --palette-info-700: #073E4A;
    --palette-info-750: #063039;
    --palette-info-800: #04252C;
    --palette-info-850: #041F25;
    --palette-info-900: #031D22;
    /* Primary action blue used for high-contrast buttons, focus states, and primary interactive elements. */
    --palette-accent-100: #FAFAFF;
    --palette-accent-150: #F9F9FF;
    --palette-accent-200: #F3F3FF;
    --palette-accent-250: #EAEAFF;
    --palette-accent-300: #DDDDFF;
    --palette-accent-350: #CDCDFF;
    --palette-accent-400: #B9B9FF;
    --palette-accent-450: #A2A2FF;
    --palette-accent-500: #8787FF;
    --palette-accent-550: #4343FF;
    --palette-accent-600: #0606FF;
    --palette-accent-650: #0000DA;
    --palette-accent-700: #0000B2;
    --palette-accent-750: #000092;
    --palette-accent-800: #00007B;
    --palette-accent-850: #00006D;
    --palette-accent-900: #000069;
  }

  :root {
    --radius: 1rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --background: #FFFFFF;
    --foreground: #0A0A0A;
    --card: #FFFFFF;
    --card-foreground: var(--palette-neutral-900);
    --popover: #FFFFFF;
    --popover-foreground: var(--palette-neutral-900);
    --primary: var(--palette-accent-500);
    --primary-foreground: #0A0A0A;
    --secondary: var(--palette-neutral-100);
    --secondary-foreground: var(--palette-neutral-900);
    --muted: var(--palette-neutral-100);
    --muted-foreground: var(--palette-neutral-600);
    --accent: var(--palette-brand-150);
    --accent-foreground: var(--palette-brand-900);
    --destructive: #A10F3C;
    --destructive-foreground: #FFFFFF;
    --border: #F3F4F5;
    --input: var(--palette-neutral-200);
    --ring: var(--palette-brand-500);
    --chart-1: #6161FF;
    --chart-2: #00C875;
    --chart-3: #24C4E6;
    --chart-4: #4B00D7;
    --chart-5: #B11B4A;
    --sidebar: #FFFFFF;
    --sidebar-foreground: var(--palette-neutral-900);
    --sidebar-primary: var(--palette-brand-500);
    --sidebar-primary-foreground: #0A0A0A;
    --sidebar-accent: var(--palette-neutral-100);
    --sidebar-accent-foreground: var(--palette-neutral-900);
    --sidebar-border: #F3F4F5;
    --sidebar-ring: var(--palette-brand-500);
    --font-sans: "Inter", system-ui, sans-serif;
    --font-display: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --text-hero: 400 5rem/6rem var(--font-display);
    --text-hero-tracking: -0.04em;
    --text-title: 500 4rem/4.375rem var(--font-display);
    --text-title-tracking: -0.04em;
    --text-heading: 400 2.75rem/3rem var(--font-display);
    --text-heading-tracking: -0.02em;
    --text-body: 400 0.875rem/1.25rem var(--font-sans);
    --text-caption: 400 0.8125rem/1.25rem var(--font-sans);
    --text-label: 600 1rem/1.5rem var(--font-sans);
    --text-overline: 600 0.75rem/1rem 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: inset 0 4px 4px 0 rgba(29, 140, 242, 0.08);
    --shadow-md: 0 1.5px 8px 0 rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 -5px 40px 0 rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 40px 0 rgba(0, 0, 0, 0.1);
    --gradient-brand_wash: linear-gradient(135deg, #00C875 0%, #6161FF 100%);
    --gradient-scrim_white: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 50%);
    --gradient-scrim_dark: linear-gradient(90deg, rgb(28, 29, 33), rgba(0, 0, 0, 0));
  }

  .dark {
    --background: #0A0A0A;
    --foreground: #FFFFFF;
    --card: var(--palette-neutral-800);
    --card-foreground: var(--palette-neutral-100);
    --popover: var(--palette-neutral-800);
    --popover-foreground: var(--palette-neutral-100);
    --primary: var(--palette-accent-500);
    --primary-foreground: #0A0A0A;
    --secondary: var(--palette-neutral-700);
    --secondary-foreground: var(--palette-neutral-100);
    --muted: var(--palette-neutral-800);
    --muted-foreground: var(--palette-neutral-400);
    --accent: var(--palette-brand-800);
    --accent-foreground: var(--palette-brand-100);
    --destructive: var(--palette-danger-600);
    --destructive-foreground: #FFFFFF;
    --border: var(--palette-neutral-800);
    --input: var(--palette-neutral-700);
    --ring: var(--palette-brand-400);
    --chart-1: #6161FF;
    --chart-2: #00C875;
    --chart-3: #24C4E6;
    --chart-4: #4B00D7;
    --chart-5: #B11B4A;
    --sidebar: var(--palette-neutral-900);
    --sidebar-foreground: var(--palette-neutral-100);
    --sidebar-primary: var(--palette-brand-500);
    --sidebar-primary-foreground: #0A0A0A;
    --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);
  }
}