/**
 * @file
 * Neopoet design tokens.
 *
 * Promoted from neopoet_landing/css/landing.css so every theme + module can
 * reference the same palette, scale, radii, and motion. The --np-* namespace
 * is preserved verbatim so existing component styles keep working.
 *
 * Premium per-user customization lives on a separate --profile-* namespace
 * (see neopoet_premium_colors). It deliberately does not collide with these.
 */

:root {
  /* ---------- Color: surfaces ---------- */
  --np-bg-primary: #FFFFFF;
  --np-bg-secondary: #F5F4ED;     /* warm off-white field */
  --np-bg-tertiary: #F0EFE8;
  --np-bg-info: #E6F1FB;
  --np-bg-amber: #FFF8E7;
  --np-bg-success: #EAF6F0;
  --np-bg-danger: #FBECEC;

  /* ---------- Color: text ---------- */
  --np-text-primary: #1A1A1A;
  --np-text-secondary: #5F5E5A;
  --np-text-tertiary: #888780;
  --np-text-inverse: #FFFFFF;
  --np-text-info: #185FA5;
  --np-text-link: #185FA5;
  --np-text-link-hover: #0F4A85;

  /* ---------- Color: borders ---------- */
  --np-border-tertiary: rgba(0, 0, 0, 0.15);
  --np-border-secondary: rgba(0, 0, 0, 0.30);
  --np-border-primary: rgba(0, 0, 0, 0.55);
  --np-border-info: rgba(24, 95, 165, 0.40);
  --np-border-amber: #EBD9A5;
  --np-border-focus: #185FA5;

  /* ---------- Color: status ---------- */
  --np-color-success: #1D9E75;
  --np-color-success-deep: #0F6E56;
  --np-color-danger: #E24B4A;
  --np-color-danger-deep: #B83736;
  --np-color-amber: #BA7517;
  --np-color-warning: #BA7517;

  /* ---------- Color: roles ----------
   * Role badges (administrative / premium / member / guide / workshop leader).
   * These are defaults; neopoet_premium_colors lets a premium user override
   * --profile-* per their own profile, NOT these globals. Keep this set
   * separate from the semantic palette so role recoloring stays scoped.
   */
  --np-role-administrative: #8E2A2A;
  --np-role-premium: #B07A1F;
  --np-role-guide: #2F6F4F;
  --np-role-workshop-leader: #4A3A82;
  --np-role-member: #5F5E5A;
  --np-role-new-member: #185FA5;

  /* ---------- Typography: families ---------- */
  --np-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --np-font-serif: "Charter", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --np-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Typography: scale ----------
   * Body is 16px. Outliers in legacy CSS round to the nearest step.
   */
  --np-text-xs: 12px;
  --np-text-sm: 13px;
  --np-text-base: 16px;
  --np-text-md: 18px;
  --np-text-lg: 20px;
  --np-text-xl: 24px;
  --np-text-2xl: 28px;
  --np-text-3xl: 36px;
  --np-text-4xl: 48px;

  --np-leading-tight: 1.2;
  --np-leading-snug: 1.35;
  --np-leading-normal: 1.5;
  --np-leading-relaxed: 1.65;

  --np-tracking-tight: -0.02em;
  --np-tracking-snug: -0.01em;
  --np-tracking-normal: 0;
  --np-tracking-wide: 0.08em;
  --np-tracking-wider: 0.12em;

  --np-weight-regular: 400;
  --np-weight-medium: 500;
  --np-weight-semibold: 600;
  --np-weight-bold: 700;

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

  /* ---------- Borders & radii ---------- */
  --np-border-width: 1px;
  --np-border-hairline: 0.5px;     /* retina-aware accents only */
  --np-radius-sm: 4px;
  --np-radius-md: 8px;
  --np-radius-lg: 12px;
  --np-radius-xl: 16px;
  --np-radius-pill: 999px;
  --np-radius-circle: 50%;

  /* ---------- Shadows ---------- */
  --np-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --np-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --np-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
  --np-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --np-shadow-focus: 0 0 0 3px rgba(24, 95, 165, 0.25);

  /* ---------- Motion ----------
   * Durations are deliberately short: editorial feel, not playful.
   */
  --np-duration-fast: 120ms;
  --np-duration-base: 160ms;
  --np-duration-slow: 240ms;

  --np-ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --np-ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --np-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Layout ---------- */
  --np-container-narrow: 720px;
  --np-container-default: 920px;
  --np-container-wide: 1080px;
  --np-container-max: 1280px;

  /* ---------- Z-index ---------- */
  --np-z-base: 1;
  --np-z-sticky: 100;
  --np-z-overlay: 500;
  --np-z-modal: 1000;
  --np-z-toast: 1200;
}

/* ---------- Breakpoints ----------
 * CSS variables can't drive @media queries, so document the canonical cuts
 * here. The polish pass should consolidate ad-hoc breakpoints onto these.
 *
 *   --break-sm: 480px   phones (iPhone SE → Pro Max portrait)
 *   --break-md: 768px   tablets / large phones landscape
 *   --break-lg: 1024px  laptops
 *   --break-xl: 1280px  desktops
 */

@media (prefers-reduced-motion: reduce) {
  :root {
    --np-duration-fast: 0ms;
    --np-duration-base: 0ms;
    --np-duration-slow: 0ms;
  }
}