/* =============================================================
   Parix Design System — Colors & Type
   Sources: uploads/Brand Kit.png (colors sampled directly)
   Font: Inter (SemiBold featured). Loaded via Google Fonts in
   the preview files; for production, self-host from /fonts.
   ============================================================= */

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

:root {
  /* --------- Core brand colors (v3 values, v2 names retained as aliases) --------- */
  --parix-charcoal:           #0B1F3B;   /* v3 Deep Navy (was #2F3947) */
  --parix-charcoal-2:         #1F2937;   /* v3 navy-2 */
  --parix-charcoal-ink:       #0B1F3B;   /* v3 deep navy for display type */
  --parix-electric-blue:      #1D4ED8;   /* v3 Electric Blue (was #3E67E2) */
  --parix-electric-blue-hi:   #1D4ED8;   /* gradient top — same as blue in v3 */
  --parix-electric-blue-lo:   #1E40AF;   /* gradient bottom-blue */
  --parix-intelligence-purple:#6D28D9;   /* v3 Violet (was #4B2BDA) */
  --parix-intelligence-hi:    #7C3AED;
  --parix-intelligence-lo:    #6D28D9;
  --parix-cyan:               #22D3EE;   /* v3 Cyan accent (new) */
  --parix-soft-white:         #F8FAFC;   /* v3 light gray for surfaces */
  --parix-paper:              #FFFFFF;   /* raised cards */

  /* --------- Neutral scale (v3) --------- */
  --parix-n-50:   #F8FAFC;
  --parix-n-100:  #F1F5F9;
  --parix-n-200:  #E5E7EB;
  --parix-n-300:  #D1D5DB;
  --parix-n-400:  #9CA3AF;
  --parix-n-500:  #6B7280;
  --parix-n-600:  #4B5563;
  --parix-n-700:  #374151;
  --parix-n-800:  #1F2937;
  --parix-n-900:  #0B1F3B;

  /* --------- Semantic tokens (light mode) --------- */
  --fg-1:   var(--parix-charcoal-ink);   /* highest-emphasis text */
  --fg-2:   var(--parix-n-700);          /* default body text */
  --fg-3:   var(--parix-n-500);          /* secondary / metadata */
  --fg-4:   var(--parix-n-400);          /* placeholder / tertiary */
  --fg-on-accent: #FFFFFF;

  --bg-1:   var(--parix-soft-white);     /* page background */
  --bg-2:   var(--parix-paper);          /* card / raised */
  --bg-3:   var(--parix-n-50);           /* sunken inside cards */
  --bg-inverse: var(--parix-charcoal);

  --border-subtle:  rgba(11, 31, 59, 0.06);
  --border-default: rgba(11, 31, 59, 0.10);
  --border-strong:  rgba(11, 31, 59, 0.16);

  --accent:         var(--parix-electric-blue);
  --accent-hover:   #1E40AF;
  --accent-press:   #1E3A8A;
  --accent-soft:    rgba(29, 78, 216, 0.10);
  --accent-2:       var(--parix-intelligence-purple);
  --accent-3:       var(--parix-cyan);

  /* --------- Status colors — tuned to feel native to the palette --------- */
  --success:      #16A47A;
  --success-soft: rgba(22, 164, 122, 0.12);
  --warning:      #D68A2A;
  --warning-soft: rgba(214, 138, 42, 0.14);
  --danger:       #D84C4C;
  --danger-soft:  rgba(216, 76, 76, 0.12);
  --info:         var(--parix-electric-blue);
  --info-soft:    var(--accent-soft);

  /* --------- Signature brand gradients (v3) --------- */
  --gradient-parix: linear-gradient(135deg, #1D4ED8 0%, #6D28D9 60%, #22D3EE 100%);
  --gradient-parix-soft: linear-gradient(135deg, rgba(29,78,216,0.07) 0%, rgba(109,40,217,0.07) 60%, rgba(34,211,238,0.07) 100%);
  --gradient-intelligence: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  --gradient-electric: linear-gradient(180deg, #1D4ED8 0%, #1E40AF 100%);
  --gradient-charcoal: linear-gradient(180deg, #1F2937 0%, #0B1F3B 100%);

  /* --------- Radii --------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* inputs, small buttons */
  --radius-lg: 14px;   /* cards */
  --radius-xl: 20px;   /* hero cards, modals */
  --radius-2xl: 28px;  /* marketing blocks */
  --radius-pill: 999px;

  /* --------- Spacing scale (4pt) --------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --------- Shadows — soft, subtle, layered --------- */
  --shadow-xs: 0 1px 2px rgba(27, 34, 48, 0.04);
  --shadow-sm: 0 1px 2px rgba(27, 34, 48, 0.04), 0 2px 6px rgba(27, 34, 48, 0.05);
  --shadow-md: 0 2px 4px rgba(27, 34, 48, 0.05), 0 8px 20px rgba(27, 34, 48, 0.06);
  --shadow-lg: 0 4px 8px rgba(27, 34, 48, 0.06), 0 20px 40px rgba(27, 34, 48, 0.08);
  --shadow-xl: 0 8px 16px rgba(27, 34, 48, 0.08), 0 32px 64px rgba(27, 34, 48, 0.10);
  --shadow-focus: 0 0 0 3px rgba(62, 103, 226, 0.22);
  --shadow-accent: 0 8px 24px rgba(62, 103, 226, 0.28);

  /* --------- Motion --------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   360ms;

  /* --------- Typography --------- */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: 'Inter', system-ui, sans-serif; /* same family, heavier weight */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;  /* Parix signature weight */
  --weight-bold:    700;
  --weight-black:   800;

  /* Type scale — tight, confident, performance-driven */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  68px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;  /* eyebrows + labels */
}

/* =============================================================
   Dark surface tokens — used for the inverse / "OS" surfaces
   (the NexOS product UI lives on a charcoal canvas)
   ============================================================= */
[data-theme="dark"] {
  --fg-1: #F5F7FB;
  --fg-2: #D4D9E3;
  --fg-3: #97A0B0;
  --fg-4: #6B7588;

  --bg-1: #1B2230;
  --bg-2: #242C3B;
  --bg-3: #2F3947;

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 20px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.4);
}

/* =============================================================
   Semantic typography classes — use these directly
   ============================================================= */
.p-eyebrow {
  font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-sans);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.p-display {
  font: var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.p-h1 {
  font: var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.p-h2 {
  font: var(--weight-semibold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.p-h3 {
  font: var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
}

.p-h4 {
  font: var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  color: var(--fg-1);
}

.p-h5 {
  font: var(--weight-semibold) var(--text-lg)/var(--leading-snug) var(--font-sans);
  color: var(--fg-1);
}

.p-body-lg {
  font: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans);
  color: var(--fg-2);
}

.p-body {
  font: var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
  color: var(--fg-2);
}

.p-body-sm {
  font: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  color: var(--fg-2);
}

.p-label {
  font: var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);
  color: var(--fg-1);
}

.p-meta {
  font: var(--weight-medium) var(--text-xs)/1.3 var(--font-sans);
  color: var(--fg-3);
}

.p-code {
  font: var(--weight-medium) 13px/1.5 var(--font-mono);
  color: var(--fg-1);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* Gradient text — used sparingly, e.g. the "X" in a PariX wordmark */
.p-gradient-text {
  background: var(--gradient-parix);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: var(--weight-bold);
}

/* =============================================================
   Base resets scoped to .parix-root so we don't fight hosts
   ============================================================= */
.parix-root {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}

.parix-root * { box-sizing: border-box; }