/* IDP Platform — Colors & Type
 * Source: idp/src/app/index.css + idp/tailwind.config.ts
 * All base colors stored as HSL triplets (space-separated) so they work
 * inside hsl(var(--x)) and with alpha via hsl(var(--x) / 0.5).
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* -------- Base palette (light) -------- */
  --background: 0 0% 100%;
  --foreground: 217 33% 17%;       /* slate-900-ish */

  --card: 0 0% 100%;
  --card-foreground: 217 33% 17%;

  --popover: 0 0% 100%;
  --popover-foreground: 217 33% 17%;

  --primary: 214 95% 36%;          /* deep blue 700 */
  --primary-foreground: 0 0% 100%;
  --primary-light: 214 95% 46%;
  --primary-dark: 214 95% 26%;

  --secondary: 210 40% 96%;        /* slate-100 */
  --secondary-foreground: 217 33% 17%;

  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%; /* slate-500 */

  --accent: 199 89% 48%;           /* cyan-ish 500 */
  --accent-foreground: 0 0% 100%;

  --destructive: 0 84% 60%;        /* red-500 */
  --destructive-foreground: 0 0% 100%;

  --success: 142 71% 45%;          /* emerald-500 */
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;           /* amber-500 (shadcn) */
  --warning-foreground: 0 0% 100%;

  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 214 95% 36%;

  /* Section accent colors used by SectionCard (from sections.ts) */
  --acc-knowledge-blue: 217 91% 60%;       /* documentation */
  --acc-indigo: 239 84% 67%;               /* company */
  --acc-amber: 38 92% 50%;                 /* compliance */
  --acc-cyan: 188 86% 53%;                 /* platform support */
  --acc-red: 0 84% 60%;                    /* security advisor */
  --acc-green: 142 71% 45%;                /* dynamic staging */
  --acc-teal: 173 80% 40%;                 /* k8s deploy */
  --acc-violet: 258 90% 66%;               /* assistant */
  --acc-rose: 347 77% 50%;                 /* incidents */
  --acc-purple: 271 76% 53%;               /* admin */
  --acc-orange: 25 95% 53%;                /* help */

  /* -------- Radii -------- */
  --radius: 0.75rem;       /* 12px, shadcn "lg" */
  --radius-md: 0.625rem;   /* calc(radius - 2px) */
  --radius-sm: 0.5rem;     /* calc(radius - 4px) */
  --radius-full: 9999px;

  /* -------- Gradients -------- */
  --gradient-primary: linear-gradient(135deg, hsl(214 95% 36%), hsl(199 89% 48%));
  --gradient-hero:    linear-gradient(180deg, hsl(214 95% 97%), hsl(0 0% 100%));
  --gradient-subtle:  linear-gradient(to bottom, transparent, hsl(0 0% 100% / 0.05));
  /* Logo gradient (hard-coded in Logo.tsx: from-primary to-violet-500) */
  --gradient-logo:    linear-gradient(to top right, hsl(214 95% 36%), hsl(258 90% 66%));

  /* -------- Shadows -------- */
  --shadow-xs: 0 1px 2px 0 hsl(217 33% 17% / 0.05);
  --shadow-sm: 0 1px 3px 0 hsl(217 33% 17% / 0.1), 0 1px 2px -1px hsl(217 33% 17% / 0.1);
  --shadow-md: 0 4px 6px -1px hsl(217 33% 17% / 0.1), 0 2px 4px -2px hsl(217 33% 17% / 0.1);
  --shadow-lg: 0 10px 15px -3px hsl(217 33% 17% / 0.1), 0 4px 6px -4px hsl(217 33% 17% / 0.1);
  --shadow-xl: 0 20px 25px -5px hsl(217 33% 17% / 0.1), 0 8px 10px -6px hsl(217 33% 17% / 0.1);
  --shadow-soft:   0 2px 8px -2px hsl(214 95% 36% / 0.1);
  --shadow-medium: 0 4px 16px -4px hsl(214 95% 36% / 0.15);

  /* -------- Motion -------- */
  --transition-base:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);
  --easing: cubic-bezier(0.4, 0, 0.2, 1);

  /* -------- Spacing scale (Tailwind 4px base) -------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* -------- Typography (family tokens) -------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Sidebar tokens */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 217 33% 17%;
  --sidebar-primary: 214 95% 36%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 210 40% 96%;
  --sidebar-accent-foreground: 217 33% 17%;
  --sidebar-border: 214 32% 91%;
}

.dark {
  --background: 222 47% 11%;
  --foreground: 210 40% 98%;

  --card: 222 47% 14%;
  --card-foreground: 210 40% 98%;

  --popover: 222 47% 14%;
  --popover-foreground: 210 40% 98%;

  --primary: 217 91% 60%;
  --primary-foreground: 222 47% 11%;
  --primary-light: 217 91% 70%;
  --primary-dark: 217 91% 50%;

  --secondary: 217 33% 20%;
  --secondary-foreground: 210 40% 98%;

  --muted: 217 33% 20%;
  --muted-foreground: 215 20% 70%;

  --accent: 199 89% 55%;
  --accent-foreground: 222 47% 11%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;

  --success: 142 76% 36%;
  --success-foreground: 210 40% 98%;

  --border: 217 33% 22%;
  --input: 217 33% 22%;
  --ring: 217 91% 60%;

  --gradient-primary: linear-gradient(135deg, hsl(217 91% 60%), hsl(199 89% 55%));
  --gradient-hero:    linear-gradient(180deg, hsl(222 47% 14%), hsl(222 47% 11%));
  --gradient-subtle:  linear-gradient(to bottom, transparent, hsl(217 91% 60% / 0.05));

  --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
  --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.4), 0 1px 2px -1px hsl(0 0% 0% / 0.4);
  --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.4), 0 2px 4px -2px hsl(0 0% 0% / 0.4);
  --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.4), 0 4px 6px -4px hsl(0 0% 0% / 0.4);
  --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.5), 0 8px 10px -6px hsl(0 0% 0% / 0.4);
  --shadow-soft:   0 2px 8px -2px hsl(217 91% 60% / 0.3);
  --shadow-medium: 0 4px 16px -4px hsl(217 91% 60% / 0.35);
}

/* -------- Semantic type styles -------- */
body, .ds-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

.ds-h1 { font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.ds-h2 { font-size: 1.5rem;  font-weight: 600; line-height: 1.25; }   /* 2xl / semibold — section titles */
.ds-h3 { font-size: 1.5rem;  font-weight: 600; line-height: 1.25; }   /* card titles (2xl) */
.ds-h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.ds-lead { font-size: 1.25rem; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.ds-p    { font-size: 1rem; line-height: 1.5; }
.ds-small{ font-size: 0.875rem; line-height: 1.4; color: hsl(var(--muted-foreground)); }
.ds-xs   { font-size: 0.75rem; line-height: 1.3; }
.ds-eyebrow {
  font-size: 0.625rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}
.ds-mono { font-family: var(--font-mono); font-feature-settings: "liga" 0; }
.ds-kbd  {
  font-family: var(--font-mono);
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
}