/* Theme: Alt (alt) */
/* A light, compact developer tool aesthetic with glass-like surfaces, pill-shaped accents, and a muted brand identity. */

@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 {
    /* The core neutral ramp anchoring the muted grayscale and page canvas. */
    --palette-neutral-100: #FAFAFB;
    --palette-neutral-150: #F8F9F9;
    --palette-neutral-200: #F3F4F5;
    --palette-neutral-250: #EBEDED;
    --palette-neutral-300: #DFE2E3;
    --palette-neutral-350: #D0D4D5;
    --palette-neutral-400: #BDC3C4;
    --palette-neutral-450: #A8AEB0;
    --palette-neutral-500: #8F9698;
    --palette-neutral-550: #717A7D;
    --palette-neutral-600: #596163;
    --palette-neutral-650: #444B4D;
    --palette-neutral-700: #343A3B;
    --palette-neutral-750: #272C2D;
    --palette-neutral-800: #1E2223;
    --palette-neutral-850: #191C1D;
    --palette-neutral-900: #171A1B;
    /* The primary brand color, grounding the lightweight UI. */
    --palette-brand-100: #FAFAFA;
    --palette-brand-150: #F9F9F9;
    --palette-brand-200: #F4F4F4;
    --palette-brand-250: #ECECEC;
    --palette-brand-300: #E1E1E1;
    --palette-brand-350: #D3D3D3;
    --palette-brand-400: #C1C1C1;
    --palette-brand-450: #ACACAC;
    --palette-brand-500: #949494;
    --palette-brand-550: #787878;
    --palette-brand-600: #5F5F5F;
    --palette-brand-650: #4A4A4A;
    --palette-brand-700: #383838;
    --palette-brand-750: #2B2B2B;
    --palette-brand-800: #212121;
    --palette-brand-850: #1B1B1B;
    --palette-brand-900: #1A1A1A;
    --palette-danger-100: #FFF9F9;
    --palette-danger-150: #FFF7F7;
    --palette-danger-200: #FEF0F0;
    --palette-danger-250: #FDE4E4;
    --palette-danger-300: #FCD4D4;
    --palette-danger-350: #FBC0C0;
    --palette-danger-400: #F9A7A7;
    --palette-danger-450: #F68A8A;
    --palette-danger-500: #F26868;
    --palette-danger-550: #EE2A2A;
    --palette-danger-600: #CF0F0F;
    --palette-danger-650: #A20B0B;
    --palette-danger-700: #7D0808;
    --palette-danger-750: #600606;
    --palette-danger-800: #4B0404;
    --palette-danger-850: #3F0404;
    --palette-danger-900: #3B0303;
    --palette-warning-100: #FFFFB1;
    --palette-warning-150: #FFFFAD;
    --palette-warning-200: #FFFFA0;
    --palette-warning-250: #FFFF8A;
    --palette-warning-300: #FFFF6C;
    --palette-warning-350: #FFFF45;
    --palette-warning-400: #FFFF15;
    --palette-warning-450: #DCDC00;
    --palette-warning-500: #9A9A00;
    --palette-warning-550: #7D7D00;
    --palette-warning-600: #636300;
    --palette-warning-650: #4D4D00;
    --palette-warning-700: #3B3B00;
    --palette-warning-750: #2D2D00;
    --palette-warning-800: #232300;
    --palette-warning-850: #1D1D00;
    --palette-warning-900: #1B1B00;
    --palette-success-100: #EEFEF9;
    --palette-success-150: #EAFDF7;
    --palette-success-200: #DCFCF2;
    --palette-success-250: #C6FBE9;
    --palette-success-300: #A7F8DD;
    --palette-success-350: #7FF5CE;
    --palette-success-400: #4EF1BB;
    --palette-success-450: #15EBA4;
    --palette-success-500: #0FA976;
    --palette-success-550: #0C895F;
    --palette-success-600: #096D4C;
    --palette-success-650: #07553B;
    --palette-success-700: #05412E;
    --palette-success-750: #043223;
    --palette-success-800: #03271B;
    --palette-success-850: #032117;
    --palette-success-900: #021F15;
    --palette-info-100: #F4FBFF;
    --palette-info-150: #F1FAFE;
    --palette-info-200: #E5F6FE;
    --palette-info-250: #D1EFFD;
    --palette-info-300: #B6E6FC;
    --palette-info-350: #93DAFA;
    --palette-info-400: #68CBF7;
    --palette-info-450: #36B9F4;
    --palette-info-500: #0D9EE0;
    --palette-info-550: #0A80B5;
    --palette-info-600: #076690;
    --palette-info-650: #055071;
    --palette-info-700: #043D57;
    --palette-info-750: #032F43;
    --palette-info-800: #022534;
    --palette-info-850: #021E2B;
    --palette-info-900: #021C29;
  }

  :root {
    --radius: 0.625rem;
    --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: #232222;
    --card: #FFFFFF;
    --card-foreground: #232222;
    --popover: #FFFFFF;
    --popover-foreground: #232222;
    --primary: var(--palette-brand-100);
    --primary-foreground: var(--palette-neutral-800);
    --secondary: var(--palette-neutral-100);
    --secondary-foreground: var(--palette-neutral-800);
    --muted: var(--palette-neutral-100);
    --muted-foreground: var(--palette-neutral-700);
    --accent: var(--palette-neutral-150);
    --accent-foreground: var(--palette-neutral-900);
    --destructive: #B91C1C;
    --destructive-foreground: #FFFFFF;
    --border: var(--palette-neutral-100);
    --input: var(--palette-neutral-200);
    --ring: var(--palette-brand-500);
    --chart-1: #232222;
    --chart-2: #788082;
    --chart-3: #ACACAC;
    --chart-4: #C7C7C7;
    --chart-5: #EBEBEB;
    --sidebar: var(--palette-neutral-100);
    --sidebar-foreground: var(--palette-neutral-800);
    --sidebar-primary: var(--palette-brand-100);
    --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-500);
    --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: 500 3.75rem/4.5rem var(--font-display);
    --text-hero-tracking: -0.01em;
    --text-title: 400 2rem/2.375rem var(--font-display);
    --text-heading: 400 1.125rem/1.5625rem var(--font-sans);
    --text-body: 400 1rem/1.375rem var(--font-sans);
    --text-caption: 400 0.875rem/1.25rem var(--font-sans);
    --text-label: 500 0.875rem/1.25rem var(--font-display);
    --text-overline: 500 0.75rem/1rem var(--font-display);
    --text-overline-tracking: 0.08em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: rgba(0, 0, 0, 0.15) 0px 1.7px 5px 0px;
    --shadow-md: rgba(0, 0, 0, 0.06) 0px 4px 8px 0px;
    --shadow-lg: rgba(0, 0, 0, 0.1) 0px 4px 10px 0px, rgba(0, 0, 0, 0.1) 0px 2px 5px 3.6px, rgba(0, 0, 0, 0.06) 0px 4px 8px 0px;
    --shadow-xl: rgba(255, 255, 255, 0.24) 0px -6px 18px 0px inset, rgba(255, 255, 255, 0.5) 0px -4px 5px 0px inset, rgba(0, 0, 0, 0.03) 0px 30px 60px 0px, rgba(0, 0, 0, 0.06) 0px 5px 7px 0px, rgba(0, 0, 0, 0.08) 0px 35px 32px 0px;
    --gradient-brand_wash: radial-gradient(circle farthest-side at 50% 100%, rgb(238, 129, 143), rgba(0, 0, 0, 0) 57%);
    --gradient-secondary_wash: radial-gradient(circle farthest-side at 100% 100%, rgb(236, 234, 251), rgba(255, 255, 255, 0));
  }

  .dark {
    --background: #111112;
    --foreground: #EBEBEB;
    --card: #232222;
    --card-foreground: #EBEBEB;
    --popover: #232222;
    --popover-foreground: #EBEBEB;
    --primary: var(--palette-brand-900);
    --primary-foreground: var(--palette-neutral-100);
    --secondary: var(--palette-neutral-800);
    --secondary-foreground: var(--palette-neutral-100);
    --muted: var(--palette-neutral-800);
    --muted-foreground: var(--palette-neutral-400);
    --accent: var(--palette-neutral-750);
    --accent-foreground: var(--palette-neutral-100);
    --destructive: var(--palette-danger-600);
    --destructive-foreground: var(--palette-neutral-100);
    --border: var(--palette-neutral-800);
    --input: var(--palette-neutral-700);
    --ring: var(--palette-brand-400);
    --chart-1: #EBEBEB;
    --chart-2: #999998;
    --chart-3: #788082;
    --chart-4: #5B5B5B;
    --chart-5: #404040;
    --sidebar: var(--palette-neutral-900);
    --sidebar-foreground: var(--palette-neutral-100);
    --sidebar-primary: var(--palette-brand-800);
    --sidebar-primary-foreground: var(--palette-neutral-100);
    --sidebar-accent: var(--palette-neutral-800);
    --sidebar-accent-foreground: var(--palette-neutral-100);
    --sidebar-border: var(--palette-neutral-800);
    --sidebar-ring: var(--palette-brand-400);
  }
}

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