/* Theme: Observatory (observatory-devtools) */
/* A dark comfortable development console featuring flat-bordered surfaces, crisp typography, and vivid cool brand 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 {
    /* Cool slate neutral seeded from the deep background and primary ink text. */
    --palette-neutral-100: #FAFAFB;
    --palette-neutral-150: #F8F9FA;
    --palette-neutral-200: #F3F4F6;
    --palette-neutral-250: #EAECF0;
    --palette-neutral-300: #DEE1E6;
    --palette-neutral-350: #CFD2DA;
    --palette-neutral-400: #BDC1CB;
    --palette-neutral-450: #A7ADB9;
    --palette-neutral-500: #8F95A3;
    --palette-neutral-550: #6E7789;
    --palette-neutral-600: #565E6E;
    --palette-neutral-650: #424956;
    --palette-neutral-700: #333843;
    --palette-neutral-750: #262A33;
    --palette-neutral-800: #1E2128;
    --palette-neutral-850: #191B22;
    --palette-neutral-900: #171A1F;
    /* Vivid purple brand anchor used for primary actions and signature highlights. */
    --palette-brand-100: #FDF9FE;
    --palette-brand-150: #FCF7FE;
    --palette-brand-200: #F9F1FD;
    --palette-brand-250: #F5E6FB;
    --palette-brand-300: #EFD8F8;
    --palette-brand-350: #E7C5F5;
    --palette-brand-400: #DDAEF1;
    --palette-brand-450: #D193EB;
    --palette-brand-500: #C375E4;
    --palette-brand-550: #AC3DDB;
    --palette-brand-600: #8F22BD;
    --palette-brand-650: #711A95;
    --palette-brand-700: #581374;
    --palette-brand-750: #440F5A;
    --palette-brand-800: #360B47;
    --palette-brand-850: #2D0A3C;
    --palette-brand-900: #2B0939;
    --palette-danger-100: #FFF9F9;
    --palette-danger-150: #FFF7F7;
    --palette-danger-200: #FFF0EF;
    --palette-danger-250: #FFE3E2;
    --palette-danger-300: #FFD2D0;
    --palette-danger-350: #FFBCB8;
    --palette-danger-400: #FFA19C;
    --palette-danger-450: #FF827B;
    --palette-danger-500: #FF5E56;
    --palette-danger-550: #FF1E12;
    --palette-danger-600: #DC0900;
    --palette-danger-650: #AB0600;
    --palette-danger-700: #830400;
    --palette-danger-750: #640300;
    --palette-danger-800: #4E0200;
    --palette-danger-850: #400200;
    --palette-danger-900: #3C0200;
    --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: #F8FCF1;
    --palette-success-150: #F6FCEE;
    --palette-success-200: #F0F9E2;
    --palette-success-250: #E6F6CE;
    --palette-success-300: #D7F0B3;
    --palette-success-350: #C5E990;
    --palette-success-400: #AFE166;
    --palette-success-450: #94D634;
    --palette-success-500: #6EA321;
    --palette-success-550: #59841A;
    --palette-success-600: #476915;
    --palette-success-650: #375210;
    --palette-success-700: #2A3F0C;
    --palette-success-750: #203009;
    --palette-success-800: #192507;
    --palette-success-850: #151F06;
    --palette-success-900: #131D05;
    --palette-info-100: #F1FCFF;
    --palette-info-150: #ECFCFF;
    --palette-info-200: #DEF9FF;
    --palette-info-250: #C7F5FF;
    --palette-info-300: #A7EFFE;
    --palette-info-350: #7EE8FE;
    --palette-info-400: #4CDEFD;
    --palette-info-450: #11D3FC;
    --palette-info-500: #03A2C4;
    --palette-info-550: #02839F;
    --palette-info-600: #01687E;
    --palette-info-650: #015162;
    --palette-info-700: #003E4C;
    --palette-info-750: #00303A;
    --palette-info-800: #00252D;
    --palette-info-850: #001F25;
    --palette-info-900: #001D23;
  }

  :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: #F8FAFC;
    --foreground: #0A0D14;
    --card: #FFFFFF;
    --card-foreground: #0A0D14;
    --popover: #FFFFFF;
    --popover-foreground: #0A0D14;
    --primary: #A42CD6;
    --primary-foreground: #FFFFFF;
    --secondary: #E2E8F0;
    --secondary-foreground: #0A0D14;
    --muted: #F1F5F9;
    --muted-foreground: #4F5E71;
    --accent: #F1F5F9;
    --accent-foreground: #0A0D14;
    --destructive: #D83030;
    --destructive-foreground: #FFFFFF;
    --border: #E2E8F0;
    --input: #E2E8F0;
    --ring: #A42CD6;
    --chart-1: #A42CD6;
    --chart-2: #8BE9FD;
    --chart-3: #C3E88D;
    --chart-4: #FFD700;
    --chart-5: #FF6961;
    --sidebar: #F8FAFC;
    --sidebar-foreground: #0A0D14;
    --sidebar-primary: #A42CD6;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #F1F5F9;
    --sidebar-accent-foreground: #0A0D14;
    --sidebar-border: #E2E8F0;
    --sidebar-ring: #A42CD6;
    --font-sans: "Inter", system-ui, sans-serif;
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --text-hero: 600 2.25rem/2.75rem var(--font-display);
    --text-hero-tracking: -0.01em;
    --text-title: 600 1.5rem/2.375rem var(--font-display);
    --text-heading: 600 1.1875rem/1.9375rem var(--font-display);
    --text-body: 400 0.875rem/1.375rem var(--font-sans);
    --text-caption: 400 0.75rem/1.25rem var(--font-sans);
    --text-label: 500 0.875rem/1.0625rem var(--font-sans);
    --text-overline: 600 0.75rem/1rem var(--font-mono);
    --text-overline-tracking: 0.08em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: rgba(164, 44, 214, 0.4) 0px 4px 15px 0px;
    --shadow-md: rgba(164, 44, 214, 0.4) 0px 4px 15px 0px;
    --shadow-lg: rgba(164, 44, 214, 0.5) 0px 8px 24px 0px;
    --shadow-xl: rgba(164, 44, 214, 0.6) 0px 12px 32px 0px;
    --gradient-brand_wash: linear-gradient(135deg, #A42CD6 0%, #8BE9FD 100%);
  }

  .dark {
    --background: #0A0D14;
    --foreground: #E8EDF2;
    --card: #0F131E;
    --card-foreground: #E8EDF2;
    --popover: #0F131E;
    --popover-foreground: #E8EDF2;
    --primary: #A42CD6;
    --primary-foreground: #FFFFFF;
    --secondary: #1E2536;
    --secondary-foreground: #E8EDF2;
    --muted: #1E2536;
    --muted-foreground: #8B8F95;
    --accent: #1E2536;
    --accent-foreground: #E8EDF2;
    --destructive: #D83030;
    --destructive-foreground: #FFFFFF;
    --border: #1E2536;
    --input: #1E2536;
    --ring: #A42CD6;
    --chart-1: #A42CD6;
    --chart-2: #8BE9FD;
    --chart-3: #C3E88D;
    --chart-4: #FFD700;
    --chart-5: #FF6961;
    --sidebar: #0A0D14;
    --sidebar-foreground: #E8EDF2;
    --sidebar-primary: #A42CD6;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #1E2536;
    --sidebar-accent-foreground: #E8EDF2;
    --sidebar-border: #1E2536;
    --sidebar-ring: #A42CD6;
  }
}

@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);
  }
}