/**
 * Shared design tokens and base styles for Notifal Documentation.
 *
 * Brand colors and spacing match notifal-theme site-global.css tokens.
 *
 * @package NotifalDoc
 */

/* Scoped design tokens (mirrors notifal-theme). */
.notifal-doc {
  --nd-clr-primary: #7B2CBF;
  --nd-clr-primary-dark: #3C096C;
  --nd-clr-primary-mid: #9D4EDD;
  --nd-clr-primary-light: #C77DFF;
  --nd-clr-primary-glow: #E0AAFF;
  --nd-clr-bg: #F8EBFF;
  --nd-clr-bg-white: #FFFFFF;
  --nd-clr-bg-subtle: #F3E8FF;
  --nd-clr-text-primary: #1A0533;
  --nd-clr-text-secondary: #5B4068;
  --nd-clr-text-muted: #9A7DAA;
  --nd-clr-border: #E5D0F5;
  --nd-clr-border-strong: #C5A0E0;
  --nd-grad-brand: linear-gradient(135deg, #7B2CBF 0%, #3C096C 100%);
  --nd-grad-hero: linear-gradient(160deg, #F8EBFF 0%, #EDD9FF 40%, #F8EBFF 100%);
  --nd-font-body: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  --nd-radius-sm: 6px;
  --nd-radius-md: 12px;
  --nd-radius-lg: 20px;
  --nd-radius-xl: 32px;
  --nd-radius-full: 9999px;
  --nd-shadow-sm: 0 1px 3px rgba(123, 44, 191, 0.08);
  --nd-shadow-md: 0 4px 16px rgba(123, 44, 191, 0.12);
  --nd-shadow-lg: 0 8px 32px rgba(123, 44, 191, 0.16);
  --nd-shadow-xl: 0 20px 60px rgba(123, 44, 191, 0.2);
  --nd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nd-duration: 320ms;

  font-family: var(--nd-font-body);
  color: var(--nd-clr-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Centered content wrapper. */
.notifal-doc-container {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.notifal-doc-container--article {
  width: min(760px, calc(100% - 2rem));
}

/* Section spacing. */
.notifal-doc-section {
  padding-block: 3rem 4rem;
}

.notifal-doc-section-title {
  margin: 0 0 1.5rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Visible focus states for keyboard users. */
.notifal-doc :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--nd-clr-primary-mid);
  outline-offset: 2px;
}

/* Icon helper class. */
.notifal-doc-icon {
  display: block;
}

/* Theme-safe hidden: FC / some themes override [hidden] { display: block }. */
.notifal-doc [hidden] {
  display: none !important;
}