@layer pdam-reset, pdam-tokens, pdam-base, pdam-components, pdam-utilities;

@layer pdam-tokens {
  body[data-brand="freedman"],
  body[data-brand="freedman"] :root {
    --pdam-display: "Cormorant Garamond", serif;
    --pdam-body: "Jost", sans-serif;
    --pdam-mono: "Jost", sans-serif;

    --pdam-canvas: #080503;
    --pdam-canvas-soft: #0a0603;
    --pdam-panel: rgba(22, 15, 9, 0.9);
    --pdam-panel-strong: rgba(18, 12, 7, 0.96);
    --pdam-text: #eee2cb;
    --pdam-text-muted: #baa581;
    --pdam-text-dim: #7e694e;
    --pdam-accent: #c8a84b;
    --pdam-accent-light: #f0d78e;
    --pdam-accent-strong: #9d7d31;
    --pdam-line: rgba(200, 168, 75, 0.24);
    --pdam-line-soft: rgba(200, 168, 75, 0.12);
    --pdam-glow: rgba(200, 168, 75, 0.18);
    --pdam-shadow-soft: 0 16px 38px rgba(0, 0, 0, 0.22);
    --pdam-shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.42);
    --pdam-radius-card: 26px;
    --pdam-radius-inner: 18px;
    --pdam-radius-pill: 999px;
    --pdam-hero-gradient:
      radial-gradient(circle at top center, rgba(200, 168, 75, 0.16), transparent 32%),
      linear-gradient(180deg, rgba(26, 18, 10, 0.96), rgba(14, 10, 6, 0.94));
    --pdam-canvas-gradient:
      radial-gradient(circle at top center, rgba(200, 168, 75, 0.12), transparent 36%),
      radial-gradient(circle at bottom left, rgba(200, 168, 75, 0.08), transparent 26%),
      linear-gradient(180deg, #060402 0%, #0d0804 48%, #080503 100%);
    --pdam-button-gradient: linear-gradient(135deg, #9d7d31 0%, #c8a84b 55%, #efd48a 100%);
  }

  body[data-brand="runaway"],
  body[data-brand="runaway"] :root {
    --pdam-display: "Montserrat", sans-serif;
    --pdam-body: "Montserrat", sans-serif;
    --pdam-mono: "IBM Plex Mono", monospace;

    --pdam-canvas: #0a0a0a;
    --pdam-canvas-soft: #111111;
    --pdam-panel: #121416;
    --pdam-panel-strong: #171a1d;
    --pdam-text: #ffffff;
    --pdam-text-muted: rgba(255, 255, 255, 0.76);
    --pdam-text-dim: rgba(255, 255, 255, 0.56);
    --pdam-accent: #2af1ff;
    --pdam-accent-light: #89f8ff;
    --pdam-accent-strong: #15b5ff;
    --pdam-line: rgba(42, 241, 255, 0.16);
    --pdam-line-soft: rgba(255, 255, 255, 0.12);
    --pdam-glow: rgba(42, 241, 255, 0.18);
    --pdam-shadow-soft: 0 16px 38px rgba(0, 0, 0, 0.22);
    --pdam-shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.42);
    --pdam-radius-card: 28px;
    --pdam-radius-inner: 18px;
    --pdam-radius-pill: 999px;
    --pdam-hero-gradient:
      radial-gradient(circle at top center, rgba(42, 241, 255, 0.18), transparent 34%),
      linear-gradient(180deg, rgba(15, 18, 20, 0.98), rgba(9, 10, 11, 0.98));
    --pdam-canvas-gradient:
      radial-gradient(circle at top left, rgba(42, 241, 255, 0.12), transparent 24%),
      radial-gradient(circle at bottom right, rgba(42, 241, 255, 0.08), transparent 20%),
      linear-gradient(180deg, #080909 0%, #0a0a0a 100%);
    --pdam-button-gradient: linear-gradient(135deg, #15b5ff 0%, #2af1ff 100%);
  }
}

@layer pdam-base {
  body[data-brand] {
    background: var(--pdam-canvas-gradient) !important;
    color: var(--pdam-text) !important;
    font-family: var(--pdam-body) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body[data-brand]::before {
    opacity: 0.28 !important;
  }

  body[data-brand] .shell {
    width: min(1200px, calc(100% - 32px));
  }

  body[data-brand] .topbar {
    backdrop-filter: blur(18px);
    background: color-mix(in oklch, var(--pdam-canvas) 80%, black 20%) !important;
    border-bottom: 1px solid var(--pdam-line-soft) !important;
  }

  body[data-brand] .launch-banner {
    border-bottom: 1px solid var(--pdam-line-soft) !important;
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--pdam-accent) 14%, transparent),
      color-mix(in oklch, var(--pdam-canvas) 92%, black 8%)
    ) !important;
  }

  body[data-brand] .launch-copy strong,
  body[data-brand] .eyebrow,
  body[data-brand] .section-label,
  body[data-brand] .surface-link,
  body[data-brand] .footer-contact a,
  body[data-brand] .launch-contacts a {
    color: var(--pdam-accent-light) !important;
  }

  body[data-brand] .brand-name,
  body[data-brand] .hero h1,
  body[data-brand] .section-head h2,
  body[data-brand] .cta-panel h3,
  body[data-brand] .hero-copy h1,
  body[data-brand] .hero-panel h3,
  body[data-brand] .pillar h3,
  body[data-brand] .edge-card h3,
  body[data-brand] .contact-panel h3,
  body[data-brand] .form-card strong {
    font-family: var(--pdam-display) !important;
    line-height: 0.94;
    text-wrap: balance;
  }

  body[data-brand] .brand-sub,
  body[data-brand] .nav-links,
  body[data-brand] .footer-links,
  body[data-brand] .metric-label,
  body[data-brand] .kpi-label,
  body[data-brand] .private-chip,
  body[data-brand="runaway"] .brand-sub,
  body[data-brand="runaway"] .nav-links,
  body[data-brand="runaway"] .footer-links {
    font-family: var(--pdam-mono) !important;
  }

  body[data-brand] .nav-links a:hover,
  body[data-brand] .footer-links a:hover {
    color: var(--pdam-accent-light) !important;
  }
}

@layer pdam-components {
  body[data-brand] .btn {
    min-height: 48px;
    border-radius: var(--pdam-radius-pill) !important;
    transition:
      transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body[data-brand] .btn:hover {
    transform: translateY(-1px);
  }

  body[data-brand] .btn-primary {
    background: var(--pdam-button-gradient) !important;
    color: #100a05 !important;
    box-shadow: var(--pdam-shadow-soft) !important;
  }

  body[data-brand="runaway"] .btn-primary {
    color: #041014 !important;
  }

  body[data-brand] .btn-secondary {
    border: 1px solid var(--pdam-line) !important;
    background: color-mix(in oklch, var(--pdam-accent) 6%, transparent) !important;
    color: var(--pdam-accent-light) !important;
  }

  body[data-brand] .hero {
    gap: 28px !important;
    padding-top: clamp(64px, 9vw, 92px) !important;
    padding-bottom: clamp(52px, 7vw, 74px) !important;
  }

  body[data-brand] .eyebrow,
  body[data-brand] .section-label {
    border: 1px solid var(--pdam-line) !important;
    background: color-mix(in oklch, var(--pdam-accent) 6%, transparent) !important;
    border-radius: var(--pdam-radius-pill) !important;
  }

  body[data-brand] .hero-actions,
  body[data-brand] .metrics,
  body[data-brand] .strip,
  body[data-brand] .signal-strip,
  body[data-brand] .support-row {
    gap: 14px !important;
  }

  body[data-brand] .visual,
  body[data-brand] .hero-visual,
  body[data-brand] .hero-copy,
  body[data-brand] .hero-panel,
  body[data-brand] .card,
  body[data-brand] .hero-card,
  body[data-brand] .surface-card,
  body[data-brand] .feature,
  body[data-brand] .pillar,
  body[data-brand] .role-card,
  body[data-brand] .metric-card,
  body[data-brand] .edge-card,
  body[data-brand] .cta-panel,
  body[data-brand] .panel,
  body[data-brand] .voice-card,
  body[data-brand] .contact-panel,
  body[data-brand] .form-card,
  body[data-brand] .faq-item,
  body[data-brand] .status-card,
  body[data-brand] .hero-panel-card {
    border-radius: var(--pdam-radius-card) !important;
    border: 1px solid color-mix(in oklch, var(--pdam-accent) 14%, transparent) !important;
    box-shadow: var(--pdam-shadow-deep) !important;
  }

  body[data-brand="freedman"] .visual,
  body[data-brand="freedman"] .hero-visual {
    background: var(--pdam-hero-gradient) !important;
  }

  body[data-brand="runaway"] .hero-panel,
  body[data-brand="runaway"] .edge-card {
    background: var(--pdam-hero-gradient) !important;
  }

  body[data-brand] .card,
  body[data-brand] .hero-card,
  body[data-brand] .surface-card,
  body[data-brand] .feature,
  body[data-brand] .pillar,
  body[data-brand] .role-card,
  body[data-brand] .metric-card,
  body[data-brand] .cta-panel,
  body[data-brand] .panel,
  body[data-brand] .voice-card,
  body[data-brand] .contact-panel,
  body[data-brand] .form-card,
  body[data-brand] .faq-item,
  body[data-brand] .status-card {
    background: var(--pdam-panel) !important;
  }

  body[data-brand="runaway"] .metric-card,
  body[data-brand="runaway"] .pillar,
  body[data-brand="runaway"] .contact-panel,
  body[data-brand="runaway"] .form-card {
    background: linear-gradient(180deg, rgba(18, 20, 22, 0.95), rgba(12, 13, 14, 0.98)) !important;
  }

  body[data-brand] .hero-visual::after,
  body[data-brand] .visual::after,
  body[data-brand] .hero-panel::after {
    border-color: color-mix(in oklch, var(--pdam-accent) 8%, transparent) !important;
    border-radius: calc(var(--pdam-radius-card) - 4px) !important;
  }

  body[data-brand] .metric-dot {
    background: linear-gradient(135deg, var(--pdam-accent), var(--pdam-accent-light)) !important;
    box-shadow: 0 0 16px color-mix(in oklch, var(--pdam-accent) 42%, transparent) !important;
  }

  body[data-brand] .support-copy,
  body[data-brand] .hero p,
  body[data-brand] .section-head p,
  body[data-brand] .surface-card small,
  body[data-brand] .pillar small,
  body[data-brand] .cta-panel p,
  body[data-brand] .form-card p,
  body[data-brand] .metric-card p,
  body[data-brand] .hero-panel p,
  body[data-brand] .edge-card p,
  body[data-brand] .contact-panel p,
  body[data-brand] .voice-card p {
    color: var(--pdam-text-muted) !important;
  }

  body[data-brand] .detail-list li,
  body[data-brand] .callout-list li,
  body[data-brand] .pillar-list li,
  body[data-brand] .edge-list li,
  body[data-brand] .contact-list li,
  body[data-brand] .signal-strip li {
    border-radius: var(--pdam-radius-inner) !important;
    border: 1px solid color-mix(in oklch, var(--pdam-accent) 10%, transparent) !important;
    background: color-mix(in oklch, var(--pdam-accent) 6%, transparent) !important;
  }

  body[data-brand] input,
  body[data-brand] textarea,
  body[data-brand] select {
    border-radius: 16px !important;
    border: 1px solid color-mix(in oklch, var(--pdam-accent) 14%, transparent) !important;
    background: color-mix(in oklch, var(--pdam-canvas) 94%, black 6%) !important;
    color: var(--pdam-text) !important;
  }

  body[data-brand] footer {
    border-top: 1px solid var(--pdam-line-soft) !important;
  }
}

@layer pdam-utilities {
  @media (max-width: 860px) {
    body[data-brand] .nav {
      align-items: flex-start !important;
      flex-direction: column !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-brand] *,
    body[data-brand] *::before,
    body[data-brand] *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}