/* ============================================================
   Dynamize Group — portal brand layer
   Tokens lifted from /srv/git/dynamize/design_handoff_dynamize_theme/
   dynamize-theme.css (magenta #C070B0, plum ink, Space Grotesk +
   Manrope, sharp corners, square buttons, soft plum shadows).
   Every portal page links this file; inline styles reference the
   tokens below via var(--…).
   ============================================================ */
:root {
  /* Brand magenta scale (brand = #C070B0) */
  --m-50:  oklch(0.97 0.012 340);
  --m-100: oklch(0.94 0.028 340);
  --m-200: oklch(0.88 0.055 342);
  --m-300: oklch(0.80 0.090 344);
  --m-400: oklch(0.72 0.120 345);
  --m-500: oklch(0.655 0.135 345);  /* brand #C070B0 */
  --m-600: oklch(0.575 0.150 346);  /* primary action */
  --m-700: oklch(0.50 0.150 347);
  --m-800: oklch(0.40 0.120 348);

  /* Violet companion — gradients only */
  --v-500: oklch(0.60 0.150 305);
  --v-600: oklch(0.52 0.155 300);

  /* Ink — plum-tinted near black */
  --ink-900: oklch(0.20 0.028 320);
  --ink-800: oklch(0.27 0.026 320);
  --ink-700: oklch(0.36 0.022 320);
  --ink-600: oklch(0.46 0.018 320);
  --ink-500: oklch(0.56 0.014 320);
  --ink-400: oklch(0.66 0.012 320);

  /* Surfaces */
  --bg:        oklch(0.985 0.004 330);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.975 0.006 332);
  --tint:      oklch(0.965 0.012 338);
  --line:      oklch(0.91 0.008 330);
  --line-2:    oklch(0.86 0.010 330);

  /* Status (tuned for a light background) */
  --ok:     oklch(0.58 0.14 150);
  --ok-ink: oklch(0.42 0.10 150);
  --warn:   oklch(0.70 0.14 70);
  --err:    oklch(0.55 0.17 25);

  --accent: var(--m-600);
  --primary: var(--m-600);

  /* Type */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Corners — Dynamize "sharp" */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 11px;
  --r-pill: 999px;

  /* Shadows (soft, plum-tinted) */
  --sh-xs: 0 1px 2px oklch(0.30 0.03 320 / 0.06);
  --sh-sm: 0 2px 6px oklch(0.30 0.03 320 / 0.07), 0 1px 2px oklch(0.30 0.03 320 / 0.05);
  --sh-md: 0 10px 30px oklch(0.30 0.03 320 / 0.10), 0 2px 8px oklch(0.30 0.03 320 / 0.06);
  --sh-lg: 0 24px 60px oklch(0.30 0.03 320 / 0.14), 0 8px 20px oklch(0.30 0.03 320 / 0.08);
  --sh-brand: 0 16px 40px oklch(0.575 0.15 346 / 0.30);

  --grad-brand: linear-gradient(120deg, var(--m-500), var(--v-500));
}

body {
  background: var(--bg);
  color: var(--ink-800);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; }
button, input, select, textarea { font-family: inherit; }
::selection { background: var(--m-200); color: var(--ink-900); }
input::placeholder, textarea::placeholder { color: var(--ink-400); }
select option { background: var(--surface); color: var(--ink-800); }

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
*::-webkit-scrollbar-track { background: transparent; }

/* Brand helpers */
.dz-logo { display: block; height: 30px; width: auto; }
.dz-logo.sm { height: 24px; }
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.dz-rule { height: 3px; background: var(--grad-brand); }

/* Eyebrow — uppercase magenta label with a leading brand dash */
.dz-eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--m-600);
  display: inline-flex; align-items: center; gap: 9px;
}
.dz-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--m-500); border-radius: 2px; }

/* Primary actions get the Dynamize magenta glow + lift */
.dz-btn-primary, .primary.openbtn {
  box-shadow: var(--sh-brand);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dz-btn-primary:hover, .primary.openbtn:hover {
  transform: translateY(-2px);
  background: var(--m-700) !important; border-color: var(--m-700) !important; color: #fff !important;
  box-shadow: 0 20px 48px oklch(0.575 0.15 346 / 0.38);
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}