/* =============================================================
   Portal Pulse — Colors & Type
   Source of truth for tokens used across the design system.
   HSL vars mirror the product's globals.css so designs compile
   identically in light and dark. Typography mirrors Tailwind
   config: Plus Jakarta Sans (body), Manrope (display),
   IBM Plex Mono (code).
   ============================================================= */

/* -------- Web fonts --------
   IBM Plex Mono + Manrope: bundled locally (brand-provided).
   Plus Jakarta Sans: Google Fonts (awaiting brand files).
*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/IBMPlexMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/IBMPlexMono-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/IBMPlexMono-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/IBMPlexMono-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Manrope-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Manrope-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Manrope-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Manrope-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/Manrope-ExtraBold.ttf') format('truetype');
}
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* -------- Brand anchors (raw) -------- */
  --pp-teal: 175 84% 32%;      /* primary action */
  --pp-teal-600: 175 84% 28%;
  --pp-teal-500: 175 70% 42%;  /* dark-mode primary */
  --pp-teal-100: 175 60% 92%;
  --pp-teal-50:  175 55% 96%;
  --pp-purple: 258 90% 66%;    /* logo + pulse accent */
  --pp-purple-500: 258 85% 72%;

  /* -------- Severity (direct hex mirrors tailwind.config) -------- */
  --sev-critical:    #DC2626;
  --sev-critical-bg: #FEF2F2;
  --sev-warning:     #D97706;
  --sev-warning-bg:  #FFFBEB;
  --sev-healthy:     #0D9488;
  --sev-healthy-bg:  #ECFDF5;
  --sev-info:        #4F46E5;
  --sev-info-bg:     #EEF2FF;

  /* -------- Surfaces (light) -------- */
  --background: 210 25% 98%;
  --foreground: 225 28% 14%;
  --card: 0 0% 100%;
  --card-foreground: 225 28% 14%;
  --muted: 210 22% 96%;
  --muted-foreground: 223 13% 42%;
  --border: 216 21% 91%;
  --input: 216 21% 91%;
  --ring: 175 84% 32%;

  --primary: 175 84% 32%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 22% 96%;
  --secondary-foreground: 225 28% 14%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --success: 175 84% 32%;
  --warning: 32 95% 44%;
  --neutral: 223 12% 61%;

  --surface-elevated: 0 0% 100%;
  --surface-inset:    210 22% 96%;
  --surface-dark:     225 28% 14%;
  --surface-darker:   224 27% 11%;

  --pulse-brand: 175 84% 32%;
  --pulse-logo:  258 90% 66%;

  --chart-1: 175 84% 32%;
  --chart-2: 32 95% 44%;
  --chart-3: 0 72% 51%;
  --chart-4: 243 75% 59%;
  --chart-5: 258 90% 66%;

  /* -------- Radii -------- */
  --radius: 0.625rem;        /* 10px — default Card, Button */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-pill: 9999px;

  /* -------- Shadows (soft system — no harsh drop shadows) -------- */
  --shadow-soft:    0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-soft-md: 0 2px 8px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.06);
  --shadow-soft-lg: 0 4px 12px rgba(0,0,0,.04), 0 8px 32px rgba(0,0,0,.08);
  --shadow-soft-xl: 0 8px 24px rgba(0,0,0,.06), 0 16px 48px rgba(0,0,0,.10);
  --shadow-card:    0 1px 3px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);

  /* -------- Spacing scale (Tailwind-compatible rem steps) -------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* -------- Typography families -------- */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Fira Code', ui-monospace, monospace;

  /* -------- Type scale (matches tailwind.config) -------- */
  --fs-display-1: 3.5rem;   /* 56 / 800 / -.03em */
  --fs-display-2: 2.5rem;   /* 40 / 800 / -.02em */
  --fs-heading:   1.5rem;   /* 24 / 700 / -.01em */
  --fs-subhead:   1.125rem; /* 18 / 600 / -.01em */
  --fs-body:      1rem;
  --fs-small:     .875rem;
  --fs-xs:        .75rem;

  --lh-display-1: 1.08;
  --lh-display-2: 1.12;
  --lh-heading:   1.3;
  --lh-subhead:   1.4;
  --lh-body:      1.55;
  --lh-tight:     1.2;
}

.dark,
[data-theme="dark"] {
  --background: 224 27% 11%;
  --foreground: 216 28% 93%;
  --card: 225 28% 14%;
  --card-foreground: 216 28% 93%;
  --muted: 225 20% 18%;
  --muted-foreground: 223 12% 61%;
  --border: 225 15% 22%;
  --input: 225 20% 18%;
  --ring: 175 70% 42%;

  --primary: 175 70% 42%;
  --primary-foreground: 224 27% 11%;
  --secondary: 225 20% 20%;
  --secondary-foreground: 216 28% 93%;
  --destructive: 0 65% 60%;

  --success: 175 60% 48%;
  --warning: 32 90% 52%;
  --neutral: 223 10% 55%;

  --surface-elevated: 225 25% 16%;
  --surface-inset:    224 27% 11%;
  --surface-dark:     225 28% 14%;
  --surface-darker:   224 27% 11%;

  --pulse-brand: 175 70% 42%;
  --pulse-logo:  258 85% 72%;
}

/* ============================================================
   Semantic element styles — drop into any artifact via <link>
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: var(--lh-body);
}

h1, .h1, .display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: 800;
  line-height: var(--lh-display-1);
  letter-spacing: -0.03em;
  color: hsl(var(--foreground));
}

h2, .h2, .display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: 800;
  line-height: var(--lh-display-2);
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

h3, .h3, .heading {
  font-family: var(--font-display);
  font-size: var(--fs-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}

h4, .h4, .subhead {
  font-family: var(--font-display);
  font-size: var(--fs-subhead);
  font-weight: 600;
  line-height: var(--lh-subhead);
  letter-spacing: -0.01em;
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: hsl(var(--foreground));
}

small, .small {
  font-size: var(--fs-small);
  color: hsl(var(--muted-foreground));
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: .9em;
}

code {
  background: hsl(var(--muted));
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* -------- Tabular numerals for data -------- */
.tnum { font-variant-numeric: tabular-nums; }

/* -------- Utility text colors -------- */
.fg       { color: hsl(var(--foreground)); }
.fg-muted { color: hsl(var(--muted-foreground)); }
.fg-brand { color: hsl(var(--primary)); }
.fg-purple{ color: hsl(var(--pulse-logo)); }

.text-critical { color: var(--sev-critical); }
.text-warning  { color: var(--sev-warning); }
.text-healthy  { color: var(--sev-healthy); }
.text-info     { color: var(--sev-info); }

/* -------- Severity pills (mirrors product badge-*) -------- */
.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.pp-badge.critical { background: color-mix(in oklab, var(--sev-critical) 10%, transparent); color: var(--sev-critical); }
.pp-badge.warning  { background: color-mix(in oklab, var(--sev-warning) 10%, transparent);  color: var(--sev-warning); }
.pp-badge.healthy  { background: color-mix(in oklab, var(--sev-healthy) 10%, transparent);  color: var(--sev-healthy); }
.pp-badge.info     { background: color-mix(in oklab, var(--sev-info) 10%, transparent);     color: var(--sev-info); }

/* Rounded "chip" badge — used for severity labels inside tables */
.pp-chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-weight: 600;
  font-size: .75rem;
  border: 1px solid transparent;
}
.pp-chip.healthy  { background: var(--sev-healthy-bg); color: var(--sev-healthy); }
.pp-chip.warning  { background: var(--sev-warning-bg); color: var(--sev-warning); }
.pp-chip.critical { background: var(--sev-critical-bg); color: var(--sev-critical); }
.pp-chip.info     { background: var(--sev-info-bg);    color: var(--sev-info); }
.pp-chip.outline  { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); background: transparent; }

/* -------- Card surfaces -------- */
.pp-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid hsl(var(--border));
}
.pp-card-dark {
  background: hsl(var(--surface-dark));
  color: hsl(var(--foreground));
  border-radius: var(--radius-xl);
}

/* -------- Pulse dot (status) -------- */
.pp-dot { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.pp-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit;
  animation: status-pulse 2.5s ease-in-out infinite;
}
.pp-dot.healthy  { background: var(--sev-healthy); }
.pp-dot.warning  { background: var(--sev-warning); }
.pp-dot.critical { background: var(--sev-critical); }

@keyframes status-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.8); opacity: 0; }
}

/* -------- Focus ring — reused everywhere -------- */
.pp-focus:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* -------- Glass nav — Apple-inspired -------- */
.pp-glass-nav {
  background: hsl(var(--background) / 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid hsl(var(--border));
}