/* ============================================================
   Perunika — design tokens
   Generated from Figma file ic3cua6YI8LRTtdHUi9lbs
   Collections: "Perunika Brand" (24), "Perunika Metrics" (19)
   Text styles: Web/* (11)
   Extracted 2026-08-25.

   These values ARE the source of truth. Do not sample hex codes
   from screenshots and do not introduce new raw values — if a
   value is missing here, ask before inventing one.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --color-night: #02000d;
  --color-iris: #6824ff;
  --color-amber: #ff8a00;
  --color-warm-light: #fff4c7;

  /* ---------- Backgrounds ---------- */
  --color-bg-primary: #06030e;
  --color-bg-subtle: #120b22;
  --color-bg-elevated: #171126;
  --color-bg-interactive: #211433;

  /* ---------- Text ---------- */
  --color-text-primary: #f7f2ff;
  --color-text-secondary: #ada6c2;
  --color-text-muted: #8a8299;  /* raised from #7f7891 to hit 4.5:1 on --color-bg-elevated */
  --color-text-accent-iris: #a56bff;
  --color-text-accent-pink: #ff5fb3;
  --color-text-accent-amber: #ffad4d;

  /* ---------- Action ---------- */
  --color-action-primary: #912fff;
  --color-action-hover: #a33aff;
  --color-action-pressed: #7020d9;
  --color-action-disabled: #392b48;

  /* ---------- Border ---------- */
  --color-border-default: #403063;
  --color-border-focus: #ff4fb8;

  /* ---------- Status ---------- */
  --color-status-success: #47d9ab;
  --color-status-info: #66b0ff;
  --color-status-warning: #ff9c38;
  --color-status-destructive: #ff5268;

  /* ---------- Spacing ---------- */
  --spacing-2xs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* ---------- Radius ---------- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ---------- Layout ---------- */
  --layout-container-desktop: 1296px;
  --layout-container-tablet: 928px;
  --layout-content-text: 720px;
  --layout-gutter-desktop: 72px;
  --layout-gutter-tablet: 40px;
  --layout-gutter-mobile: 20px;
  --layout-touch-min: 44px;
  --layout-header-desktop: 76px;
  --layout-header-mobile: 64px;

  /* ---------- Type family ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ============================================================
   Type ramp — mirrors the Web/* text styles in Figma.

   NOTE ON 11px: there is no 11px style, and DEV00 sets 14px as
   the floor for marketing copy. Use --text-caption (12px) only
   for genuinely non-essential metadata, and prefer
   --text-body-small (13px) or larger for anything a visitor
   needs to read. Never ship 11px.

   NOTE ON 14px / 22px: these appear ~200 times in the Figma
   frames with no matching style. They are unresolved. Do not
   create new tokens for them without a decision — snap to the
   nearest ramp entry and flag it.
   ============================================================ */

.text-display,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-body-large,
.text-body,
.text-body-strong,
.text-body-small,
.text-label,
.text-caption {
  font-family: var(--font-sans);
}

.text-display     { font-size: 64px; line-height: 68px; font-weight: 700; letter-spacing: -0.02em; }
.text-h1          { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.015em; }
.text-h2          { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.01em; }
.text-h3          { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.005em; }
.text-h4          { font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.002em; }
.text-body-large  { font-size: 18px; line-height: 28px; font-weight: 400; }
.text-body        { font-size: 16px; line-height: 26px; font-weight: 400; }
.text-body-strong { font-size: 16px; line-height: 26px; font-weight: 600; }
.text-body-small  { font-size: 13px; line-height: 20px; font-weight: 400; }
.text-label       { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; }
.text-caption     { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.005em; }

/* ============================================================
   Layout helper — replaces the current .wrap, which uses
   1200px / 32px and disagrees with the tokens above.
   ============================================================ */

.wrap {
  width: 100%;
  max-width: var(--layout-container-desktop);
  margin-inline: auto;
  padding-inline: var(--layout-gutter-desktop);
}

@media (max-width: 1023px) {
  .wrap {
    max-width: var(--layout-container-tablet);
    padding-inline: var(--layout-gutter-tablet);
  }
}

@media (max-width: 767px) {
  .wrap {
    padding-inline: var(--layout-gutter-mobile);
  }
}

/* ============================================================
   Focus — DEV00 requires a visible 2px high-contrast ring
   drawn outside the component. Never remove this without an
   equally visible replacement.
   ============================================================ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}