/* Theme: Clay Terminal (clay-terminal) */
/* A warm and precise developer-tools interface combining technical clarity with an inviting cream and coral palette. */

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

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans: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=Geist: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=IBM+Plex+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 {
    /* Technical slate-gray designed to support crisp borders and structured typography. */
    --palette-neutral-100: #FAFAFB;
    --palette-neutral-150: #F9F9FA;
    --palette-neutral-200: #F3F4F6;
    --palette-neutral-250: #EBECEF;
    --palette-neutral-300: #DFE0E5;
    --palette-neutral-350: #D0D2D8;
    --palette-neutral-400: #BEC0C7;
    --palette-neutral-450: #AAACB4;
    --palette-neutral-500: #92949D;
    --palette-neutral-550: #737682;
    --palette-neutral-600: #5A5D68;
    --palette-neutral-650: #454852;
    --palette-neutral-700: #353740;
    --palette-neutral-750: #282A31;
    --palette-neutral-800: #1F2127;
    --palette-neutral-850: #1A1B20;
    --palette-neutral-900: #181A1E;
    /* Warm developer-tools coral orange-red used as the core brand and action anchor. */
    --palette-brand-100: #FFF9F8;
    --palette-brand-150: #FFF7F5;
    --palette-brand-200: #FFF0EC;
    --palette-brand-250: #FFE4DD;
    --palette-brand-300: #FFD3C9;
    --palette-brand-350: #FFBDAE;
    --palette-brand-400: #FFA38E;
    --palette-brand-450: #FF8469;
    --palette-brand-500: #FF603E;
    --palette-brand-550: #FF2D00;
    --palette-brand-600: #CC2300;
    --palette-brand-650: #9E1B00;
    --palette-brand-700: #791400;
    --palette-brand-750: #5C0F00;
    --palette-brand-800: #470B00;
    --palette-brand-850: #3B0900;
    --palette-brand-900: #370900;
    /* High-contrast technical red for warnings and destructive actions. */
    --palette-danger-100: #FEF9FA;
    --palette-danger-150: #FEF7F8;
    --palette-danger-200: #FDF0F2;
    --palette-danger-250: #FCE5E9;
    --palette-danger-300: #FAD6DB;
    --palette-danger-350: #F7C2CA;
    --palette-danger-400: #F3AAB5;
    --palette-danger-450: #EF8D9C;
    --palette-danger-500: #E96D80;
    --palette-danger-550: #E2334D;
    --palette-danger-600: #C11A33;
    --palette-danger-650: #981428;
    --palette-danger-700: #750F1E;
    --palette-danger-750: #5B0B17;
    --palette-danger-800: #470912;
    --palette-danger-850: #3C070F;
    --palette-danger-900: #38070E;
    /* Warm amber for alerts and non-blocking notifications. */
    --palette-warning-100: #FFF9F3;
    --palette-warning-150: #FFF7EF;
    --palette-warning-200: #FFF2E3;
    --palette-warning-250: #FEE8CE;
    --palette-warning-300: #FEDAB1;
    --palette-warning-350: #FDC98C;
    --palette-warning-400: #FCB35F;
    --palette-warning-450: #FA9A2A;
    --palette-warning-500: #DF7B06;
    --palette-warning-550: #B56304;
    --palette-warning-600: #904E03;
    --palette-warning-650: #713D02;
    --palette-warning-700: #572F01;
    --palette-warning-750: #422401;
    --palette-warning-800: #341C00;
    --palette-warning-850: #2B1700;
    --palette-warning-900: #281600;
    /* Balanced green for completed processes and success indicators. */
    --palette-success-100: #EBFFF8;
    --palette-success-150: #E6FEF7;
    --palette-success-200: #D8FEF2;
    --palette-success-250: #C0FDEA;
    --palette-success-300: #9FFCDF;
    --palette-success-350: #74FBD1;
    --palette-success-400: #3FF9C0;
    --palette-success-450: #08F1A9;
    --palette-success-500: #06A977;
    --palette-success-550: #048960;
    --palette-success-600: #036D4C;
    --palette-success-650: #02553B;
    --palette-success-700: #02422E;
    --palette-success-750: #013223;
    --palette-success-800: #01271B;
    --palette-success-850: #012117;
    --palette-success-900: #011F15;
    /* Deep technical blue for passive information and status updates. */
    --palette-info-100: #F8FAFF;
    --palette-info-150: #F6F9FE;
    --palette-info-200: #EFF4FE;
    --palette-info-250: #E3ECFD;
    --palette-info-300: #D3E0FC;
    --palette-info-350: #BFD1FA;
    --palette-info-400: #A6C0F8;
    --palette-info-450: #89ABF5;
    --palette-info-500: #6792F1;
    --palette-info-550: #2A67ED;
    --palette-info-600: #104CCF;
    --palette-info-650: #0C3BA4;
    --palette-info-700: #092E80;
    --palette-info-750: #062464;
    --palette-info-800: #051C50;
    --palette-info-850: #041844;
    --palette-info-900: #041740;
    /* Warm ochre-gold for auxiliary highlights and specialized technical telemetry. */
    --palette-accent-100: #FDFAF6;
    --palette-accent-150: #FDF9F3;
    --palette-accent-200: #FBF4E8;
    --palette-accent-250: #F7EBD7;
    --palette-accent-300: #F3DFBF;
    --palette-accent-350: #EDCFA1;
    --palette-accent-400: #E5BC7C;
    --palette-accent-450: #DBA650;
    --palette-accent-500: #C58929;
    --palette-accent-550: #A06F21;
    --palette-accent-600: #7F5819;
    --palette-accent-650: #634413;
    --palette-accent-700: #4C340F;
    --palette-accent-750: #3A280B;
    --palette-accent-800: #2D1F08;
    --palette-accent-850: #251907;
    --palette-accent-900: #221806;
  }

  :root {
    --radius: 0.375rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --background: #F8F4EF;
    --foreground: #161821;
    --card: #FCFBF9;
    --card-foreground: #161821;
    --popover: #FCFBF9;
    --popover-foreground: #161821;
    --primary: var(--palette-brand-600);
    --primary-foreground: var(--palette-neutral-100);
    --secondary: var(--palette-neutral-150);
    --secondary-foreground: var(--palette-neutral-900);
    --muted: var(--palette-neutral-150);
    --muted-foreground: var(--palette-neutral-700);
    --accent: var(--palette-neutral-150);
    --accent-foreground: var(--palette-neutral-900);
    --destructive: var(--palette-danger-600);
    --destructive-foreground: var(--palette-neutral-100);
    --border: var(--palette-neutral-250);
    --input: var(--palette-neutral-300);
    --ring: var(--palette-brand-500);
    --chart-1: var(--palette-brand-500);
    --chart-2: var(--palette-info-500);
    --chart-3: var(--palette-success-500);
    --chart-4: var(--palette-warning-500);
    --chart-5: var(--palette-accent-500);
    --sidebar: var(--palette-neutral-150);
    --sidebar-foreground: var(--palette-neutral-900);
    --sidebar-primary: var(--palette-brand-600);
    --sidebar-primary-foreground: var(--palette-neutral-100);
    --sidebar-accent: var(--palette-neutral-200);
    --sidebar-accent-foreground: var(--palette-neutral-900);
    --sidebar-border: var(--palette-neutral-250);
    --sidebar-ring: var(--palette-brand-500);
    --font-sans: "IBM Plex Sans", system-ui, sans-serif;
    --font-display: "Geist", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    --text-hero: 700 3.5rem/3.75rem var(--font-display);
    --text-hero-tracking: -0.02em;
    --text-title: 700 2.25rem/2.625rem var(--font-display);
    --text-heading: 600 1.5rem/2rem var(--font-display);
    --text-body: 400 0.875rem/1.25rem var(--font-sans);
    --text-caption: 400 0.75rem/1rem var(--font-sans);
    --text-label: 500 0.8125rem/1.125rem var(--font-sans);
    --text-overline: 600 0.6875rem/0.875rem var(--font-sans);
    --text-overline-tracking: 0.08em;
    --text-overline-transform: uppercase;
    --shadow-xs: 0 1px 2px rgba(22, 24, 33, 0.05);
    --shadow-sm: 0 2px 4px rgba(22, 24, 33, 0.08);
    --shadow-md: 0 4px 8px rgba(22, 24, 33, 0.12);
    --shadow-lg: 0 8px 16px rgba(22, 24, 33, 0.16);
    --shadow-xl: 0 16px 32px rgba(22, 24, 33, 0.2);
    --gradient-brand_wash: linear-gradient(135deg, #FF5A36 0%, #CC2300 100%);
  }

  .dark {
    --background: #161821;
    --foreground: #F8F4EF;
    --card: #1C1E2B;
    --card-foreground: #F8F4EF;
    --popover: #1C1E2B;
    --popover-foreground: #F8F4EF;
    --primary: var(--palette-brand-500);
    --primary-foreground: var(--palette-neutral-900);
    --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-800);
    --accent-foreground: var(--palette-neutral-100);
    --destructive: var(--palette-danger-800);
    --destructive-foreground: var(--palette-neutral-100);
    --border: var(--palette-neutral-800);
    --input: var(--palette-neutral-750);
    --ring: var(--palette-brand-500);
    --chart-1: var(--palette-brand-500);
    --chart-2: var(--palette-info-500);
    --chart-3: var(--palette-success-500);
    --chart-4: var(--palette-warning-500);
    --chart-5: var(--palette-accent-500);
    --sidebar: var(--palette-neutral-900);
    --sidebar-foreground: var(--palette-neutral-200);
    --sidebar-primary: var(--palette-brand-500);
    --sidebar-primary-foreground: var(--palette-neutral-900);
    --sidebar-accent: var(--palette-neutral-800);
    --sidebar-accent-foreground: var(--palette-neutral-100);
    --sidebar-border: var(--palette-neutral-850);
    --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);
  }
  .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);
  }
}