/* Theme: Base (base) */
/* A light comfortable UI featuring sharp corners, soft-shadow surfaces, and a vivid cool brand. */

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

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4: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=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 {
    /* Custom neutral ramp carrying the brand's warm-grey undertones. */
    --palette-neutral-100: #FBFAFA;
    --palette-neutral-150: #F9F9F9;
    --palette-neutral-200: #F5F4F4;
    --palette-neutral-250: #EEECEB;
    --palette-neutral-300: #E3E0E0;
    --palette-neutral-350: #D6D2D1;
    --palette-neutral-400: #C5C0BF;
    --palette-neutral-450: #B0ACAB;
    --palette-neutral-500: #989494;
    --palette-neutral-550: #7D7675;
    --palette-neutral-600: #645D5B;
    --palette-neutral-650: #4E4846;
    --palette-neutral-700: #3C3735;
    --palette-neutral-750: #2E2A28;
    --palette-neutral-800: #24201F;
    --palette-neutral-850: #1E1B1A;
    --palette-neutral-900: #1C1918;
    /* Pure electric blue brand primary. */
    --palette-brand-100: #F8FAFF;
    --palette-brand-150: #F5F9FF;
    --palette-brand-200: #EDF4FF;
    --palette-brand-250: #E0ECFF;
    --palette-brand-300: #CDE1FF;
    --palette-brand-350: #B5D2FF;
    --palette-brand-400: #99C0FF;
    --palette-brand-450: #77ABFF;
    --palette-brand-500: #5193FF;
    --palette-brand-550: #0F6BFF;
    --palette-brand-600: #0052DB;
    --palette-brand-650: #0040AC;
    --palette-brand-700: #003186;
    --palette-brand-750: #002667;
    --palette-brand-800: #001E52;
    --palette-brand-850: #001945;
    --palette-brand-900: #001840;
    --palette-danger-100: #FFF8FB;
    --palette-danger-150: #FFF6F9;
    --palette-danger-200: #FFEEF4;
    --palette-danger-250: #FFE1EB;
    --palette-danger-300: #FFCFDF;
    --palette-danger-350: #FFB9D0;
    --palette-danger-400: #FF9DBD;
    --palette-danger-450: #FF7CA7;
    --palette-danger-500: #FF578D;
    --palette-danger-550: #FF1360;
    --palette-danger-600: #DC0046;
    --palette-danger-650: #AC0036;
    --palette-danger-700: #840029;
    --palette-danger-750: #64001F;
    --palette-danger-800: #4E0018;
    --palette-danger-850: #400014;
    --palette-danger-900: #3C0012;
    --palette-warning-100: #FFFAF0;
    --palette-warning-150: #FFF8EC;
    --palette-warning-200: #FFF4DE;
    --palette-warning-250: #FFECC7;
    --palette-warning-300: #FFE1A7;
    --palette-warning-350: #FFD27E;
    --palette-warning-400: #FFC14D;
    --palette-warning-450: #FFAC12;
    --palette-warning-500: #CE8500;
    --palette-warning-550: #A76C00;
    --palette-warning-600: #855500;
    --palette-warning-650: #684300;
    --palette-warning-700: #503300;
    --palette-warning-750: #3D2700;
    --palette-warning-800: #2F1E00;
    --palette-warning-850: #271900;
    --palette-warning-900: #251700;
    --palette-success-100: #F1FDF9;
    --palette-success-150: #EEFCF8;
    --palette-success-200: #E2FAF2;
    --palette-success-250: #CEF6EA;
    --palette-success-300: #B3F1DE;
    --palette-success-350: #90EBCF;
    --palette-success-400: #66E3BC;
    --palette-success-450: #33D9A6;
    --palette-success-500: #20A87E;
    --palette-success-550: #198866;
    --palette-success-600: #146C51;
    --palette-success-650: #0F543F;
    --palette-success-700: #0C4130;
    --palette-success-750: #093125;
    --palette-success-800: #07261D;
    --palette-success-850: #062018;
    --palette-success-900: #051E16;
    --palette-info-100: #EFFCFF;
    --palette-info-150: #EBFCFF;
    --palette-info-200: #DCF9FF;
    --palette-info-250: #C5F6FF;
    --palette-info-300: #A4F0FF;
    --palette-info-350: #7AE9FF;
    --palette-info-400: #47E0FF;
    --palette-info-450: #0AD6FF;
    --palette-info-500: #00A2C4;
    --palette-info-550: #00839F;
    --palette-info-600: #00687E;
    --palette-info-650: #005162;
    --palette-info-700: #003E4B;
    --palette-info-750: #00303A;
    --palette-info-800: #00252D;
    --palette-info-850: #001F25;
    --palette-info-900: #001D23;
    --palette-accent-100: #FDF9FD;
    --palette-accent-150: #FDF7FC;
    --palette-accent-200: #FBF1FA;
    --palette-accent-250: #F8E6F5;
    --palette-accent-300: #F3D7EF;
    --palette-accent-350: #EDC4E8;
    --palette-accent-400: #E5ADDE;
    --palette-accent-450: #DC92D3;
    --palette-accent-500: #D073C5;
    --palette-accent-550: #C243B2;
    --palette-accent-600: #9E3290;
    --palette-accent-650: #7C2671;
    --palette-accent-700: #5F1D57;
    --palette-accent-750: #491643;
    --palette-accent-800: #391134;
    --palette-accent-850: #300E2C;
    --palette-accent-900: #2D0D29;
  }

  :root {
    --radius: 0rem;
    --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: #1E1919;
    --card: #FFFFFF;
    --card-foreground: #1E1919;
    --popover: #FFFFFF;
    --popover-foreground: #1E1919;
    --primary: #0061FE;
    --primary-foreground: #FFFFFF;
    --secondary: #E2E2E2;
    --secondary-foreground: #1E1919;
    --muted: #E2E2E2;
    --muted-foreground: #5E5B5A;
    --accent: #E2E2E2;
    --accent-foreground: #1E1919;
    --destructive: #9B0032;
    --destructive-foreground: #FFFFFF;
    --border: #A09D9B;
    --input: #A09D9B;
    --ring: #0061FE;
    --chart-1: #0061FE;
    --chart-2: #9B6400;
    --chart-3: #007891;
    --chart-4: #0F503C;
    --chart-5: #78286E;
    --sidebar: #FFFFFF;
    --sidebar-foreground: #1E1919;
    --sidebar-primary: #0061FE;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #E2E2E2;
    --sidebar-accent-foreground: #1E1919;
    --sidebar-border: #A09D9B;
    --sidebar-ring: #0061FE;
    --font-sans: "Source Serif 4", system-ui, sans-serif;
    --font-display: "Inter", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --text-hero: 400 3.5rem/4.1875rem var(--font-display);
    --text-hero-tracking: -0.01em;
    --text-title: 400 2.5rem/3rem var(--font-display);
    --text-heading: 400 1.5rem/1.8125rem var(--font-display);
    --text-body: 400 1rem/1.5rem var(--font-sans);
    --text-caption: 400 0.75rem/1rem var(--font-sans);
    --text-label: 500 1rem/1.5rem var(--font-display);
    --text-overline: 500 0.75rem/1rem var(--font-display);
    --text-overline-tracking: 0.05em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0px 0px 0px 3px rgb(48, 128, 255);
    --shadow-md: 0px 0px 0px 3px rgb(48, 128, 255);
    --shadow-lg: 0px 0px 0px 3px rgb(48, 128, 255);
    --shadow-xl: 0px 0px 0px 3px rgb(48, 128, 255);
    --gradient-brand_wash: linear-gradient(135deg, #0061FE 0%, #007891 100%);
  }

  .dark {
    --background: #0A0A0A;
    --foreground: #E2E2E2;
    --card: #1E1919;
    --card-foreground: #E2E2E2;
    --popover: #1E1919;
    --popover-foreground: #E2E2E2;
    --primary: #0F6BFF;
    --primary-foreground: #FFFFFF;
    --secondary: #404040;
    --secondary-foreground: #FFFFFF;
    --muted: #404040;
    --muted-foreground: #ACACAC;
    --accent: #404040;
    --accent-foreground: #FFFFFF;
    --destructive: #9B0032;
    --destructive-foreground: #FFFFFF;
    --border: #404040;
    --input: #404040;
    --ring: #0F6BFF;
    --chart-1: #0F6BFF;
    --chart-2: #9B6400;
    --chart-3: #007891;
    --chart-4: #0F503C;
    --chart-5: #78286E;
    --sidebar: #1E1919;
    --sidebar-foreground: #E2E2E2;
    --sidebar-primary: #0F6BFF;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #404040;
    --sidebar-accent-foreground: #FFFFFF;
    --sidebar-border: #404040;
    --sidebar-ring: #0F6BFF;
  }
}

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