/**
 * Peraa Design System - Main Stylesheet
 * 
 * This file imports all tokens, base styles, and components.
 * Import this single file to use the entire design system.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
@import './tokens/_primitives.css';
@import './tokens/_semantic.css';

/* ═══════════════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
@import './base/_reset.css';
@import './base/_typography.css';

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */
@import './components/_navigation.css';
@import './components/_buttons.css';
@import './components/_tabs.css';
@import './components/_timeline.css';
@import './components/_footer.css';
@import './components/_image-placeholder.css';
@import './components/_card.css';
@import './components/_badges.css';
@import './components/_vertical-nav.css';
@import './components/_code-block.css';
@import './components/_logomark.css';
@import './components/_flip-card.css';
@import './components/_framework-switch.css';
@import './components/_articles.css';
@import './components/_forms.css';
@import './components/_alert.css';
@import './components/_modal.css';
@import './components/_glass.css';

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.peraa-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--peraa-spacing-6);
}

.peraa-container--narrow {
  max-width: 800px;
}

.peraa-container--wide {
  max-width: 1400px;
}

/* Page wrapper for sticky footer */
.peraa-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.peraa-main {
  flex: 1;
  padding: var(--peraa-spacing-8) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.peraa-section {
  padding: var(--peraa-spacing-16) 0;
}

.peraa-section--sm {
  padding: var(--peraa-spacing-8) 0;
}

.peraa-section--lg {
  padding: var(--peraa-spacing-24) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRID UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.peraa-grid {
  display: grid;
  gap: var(--peraa-spacing-6);
}

.peraa-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.peraa-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.peraa-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
  .peraa-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .peraa-grid--2,
  .peraa-grid--3,
  .peraa-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLEX UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.peraa-flex {
  display: flex;
}

.peraa-flex--center {
  align-items: center;
  justify-content: center;
}

.peraa-flex--between {
  justify-content: space-between;
}

.peraa-flex--wrap {
  flex-wrap: wrap;
}

.peraa-flex--col {
  flex-direction: column;
}

.peraa-gap-1 { gap: var(--peraa-spacing-1); }
.peraa-gap-2 { gap: var(--peraa-spacing-2); }
.peraa-gap-3 { gap: var(--peraa-spacing-3); }
.peraa-gap-4 { gap: var(--peraa-spacing-4); }
.peraa-gap-6 { gap: var(--peraa-spacing-6); }
.peraa-gap-8 { gap: var(--peraa-spacing-8); }

/* ═══════════════════════════════════════════════════════════════════════════
   SPACING UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.peraa-mt-4 { margin-top: var(--peraa-spacing-4); }
.peraa-mt-6 { margin-top: var(--peraa-spacing-6); }
.peraa-mt-8 { margin-top: var(--peraa-spacing-8); }
.peraa-mb-4 { margin-bottom: var(--peraa-spacing-4); }
.peraa-mb-6 { margin-bottom: var(--peraa-spacing-6); }
.peraa-mb-8 { margin-bottom: var(--peraa-spacing-8); }

/* ═══════════════════════════════════════════════════════════════════════════
   VISIBILITY UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.peraa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .peraa-hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .peraa-hide-desktop {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE BACKGROUND & AMBIENT GLOW
   .peraa-page carries the solid surface color for all content (text always
   sits on a reliable background). In dark mode, two teal radial glows are
   composited as fixed background layers — top-left primary, bottom-right
   echo — giving every page a consistent ambient depth without texture issues.
   ═══════════════════════════════════════════════════════════════════════════ */

.peraa-page {
  background-color: var(--peraa-surface-page);
}

[data-theme="dark"] .peraa-page {
  background-color: var(--peraa-color-neutral-950);
  background-image:
    radial-gradient(ellipse 1280px 1280px at -80px -80px, rgba(20, 184, 166, 0.14) 0%, transparent 70%),
    radial-gradient(ellipse 900px 900px at 400px 600px, rgba(111, 31, 172, 0.11) 0%, transparent 58%),
    radial-gradient(ellipse 1080px 1080px at 110% 110%, rgba(47, 195, 17, 0.08) 0%, transparent 65%);
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TRANSITION
   Fades color-related properties when switching between light and dark modes.
   Uses sub-properties so component-level transition shorthands take priority.
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  transition-property: background-color, color, border-color;
  transition-duration: 700ms;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms;
  }
}