@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #111111;
  --primary: #0069cc;
  --primary-50: #e6f0fa;
  --primary-700: #0055a6;
  --figma-ice: #e8f4ff;
  --accent-sky: #38bdf8;
  --accent-ice: #bfe8ff;
  --panel-dark: #151515;
  --ink: #0b0d10;
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-900: #0f172a;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-50: var(--primary-50);
  --color-primary-700: var(--primary-700);
  --color-figma-ice: var(--figma-ice);
  --color-accent-sky: var(--accent-sky);
  --color-accent-ice: var(--accent-ice);
  --color-panel-dark: var(--panel-dark);
  --color-ink: var(--ink);
  --font-sans: "Inter", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow-premium: 0 18px 60px rgb(15 23 42 / 0.08);
  --shadow-lifted: 0 24px 80px rgb(0 0 0 / 0.16);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "IBM Plex Sans", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

html {
  scroll-behavior: smooth;
}

a,
button,
summary,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--primary);
  color: #ffffff;
}

.blueprint-grid {
  background:
    radial-gradient(ellipse at 18% 18%, rgb(56 189 248 / 0.16), transparent 34%),
    radial-gradient(ellipse at 82% 78%, rgb(191 232 255 / 0.1), transparent 38%),
    linear-gradient(135deg, rgb(255 255 255 / 0.045), transparent 48%);
}

.blueprint-grid-light {
  background:
    radial-gradient(ellipse at 16% 20%, rgb(0 105 204 / 0.18), transparent 34%),
    radial-gradient(ellipse at 88% 22%, rgb(56 189 248 / 0.16), transparent 30%),
    linear-gradient(135deg, #e8f4ff 0%, #f7fbff 46%, #ffffff 100%);
}

.enterprise-panel {
  border: 1px solid rgb(226 232 240 / 0.82);
  background:
    radial-gradient(ellipse at 0% 0%, rgb(0 105 204 / 0.045), transparent 36%),
    radial-gradient(ellipse at 100% 0%, rgb(56 189 248 / 0.035), transparent 34%),
    linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(248 250 252 / 0.82)),
    #ffffff;
  box-shadow: 0 18px 55px rgb(15 23 42 / 0.055);
}

.dark-enterprise-panel {
  border: 1px solid rgb(255 255 255 / 0.1);
  background:
    radial-gradient(ellipse at 18% 0%, rgb(56 189 248 / 0.08), transparent 42%),
    radial-gradient(ellipse at 100% 100%, rgb(191 232 255 / 0.045), transparent 38%),
    linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.025)),
    var(--panel-dark);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 28px 90px rgb(0 0 0 / 0.24);
}

.text-white .text-primary {
  color: var(--accent-ice);
}