/* Platform portal — ortak design tokens & page shell */

:root {
  --pp-primary: #fa141b;
  --pp-primary-dark: #d91117;
  --pp-red-deep: #6e0f16;
  --pp-red-mid: #c41e3a;
  --pp-red-bordo: #7a1520;
  --pp-bg: #f3f1f0;
  --pp-surface: #ffffff;
  --pp-text: #2a1f1f;
  --pp-muted: #6b5c5c;
  --pp-border: rgba(42, 31, 31, 0.08);
  --pp-radius-lg: 10px;
  --pp-radius-md: 8px;
  --pp-shadow: 0 16px 48px rgba(42, 31, 31, 0.09);
  --pp-shadow-hover: 0 22px 56px rgba(42, 31, 31, 0.12);
  --pp-container: 72rem;
  --pp-focus: rgba(250, 20, 27, 0.55);
  --pp-font-display: clamp(1.45rem, 3.2vw, 1.95rem);
  --pp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body.platform-auth-page {
  --auth-primary: var(--pp-primary);
  --auth-primary-dark: var(--pp-primary-dark);
  --auth-bg: var(--pp-bg);
  --primary: var(--pp-primary);
  --foreground: var(--pp-text);
  --muted-foreground: var(--pp-muted);
  --border: #e8dede;
}

body.platform-dashboard-page {
  margin: 0;
  min-height: 100dvh;
  color: var(--pp-text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background-color: var(--pp-bg);
  background-image:
    radial-gradient(ellipse 110% 70% at 50% -25%, rgba(250, 20, 27, 0.08), transparent 52%),
    radial-gradient(ellipse 70% 45% at 100% 0%, rgba(196, 30, 58, 0.07), transparent 42%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(250, 20, 27, 0.05), transparent 45%);
}

body.platform-auth-page.platform-login-page {
  background-color: var(--pp-bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(250, 20, 27, 0.06), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 100%, rgba(196, 30, 58, 0.06), transparent 45%);
}

.platform-login-form-panel {
  background: transparent !important;
}

.platform-portal-surface {
  background: linear-gradient(180deg, #fff 0%, #fffcfc 100%);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  box-shadow: var(--pp-shadow);
}

.platform-portal-surface--elevated {
  box-shadow:
    var(--pp-shadow),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

*:focus-visible {
  outline-color: var(--pp-focus);
}