@layer fluentform, reset, theme, builder, composition, houdini, components, utilities, motion;

/* ==========================================================================
   GS CORE PURE — CANONICAL UTILITIES (CUBE CSS PROGRESSIVE ENHANCEMENT)
   Single Source of Truth: .agents/DESIGN.md
   Gobernanza: Solo clases atómicas de alta frecuencia (reutilizadas en >=2 bloques).
   ========================================================================== */

/* ── 1. MODERN CSS RESET ─────────────────────────────────────────────────── */
@layer reset {
  :where(*, *::before, *::after) {
    box-sizing: border-box;
    min-width: 0;
  }

  :where(html) {
    font-size: 100% !important;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    overflow-x: clip;
    scroll-behavior: smooth;
    font-optical-sizing: auto;
  }

  :where(body) {
    min-height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    background-color: var(--canvas);
    color: var(--canvas-on);
    font-family: var(--font-sans);
  }

  :where(img, picture, video, canvas, svg) {
    display: block;
    max-width: 100%;
    height: auto;
    font-style: italic;
    vertical-align: middle;
    shape-margin: var(--space-fluid-sm);
  }

  :where(input, button, textarea, select) {
    font: inherit;
    color: inherit;
  }

  :where(p, h1, h2, h3, h4, h5, h6, a, figure, blockquote, dl, dd) {
    overflow-wrap: break-word;
    margin: 0;
  }

  :where(ul[class], ol[class], ul[role="list"], ol[role="list"]) {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  :where(hr) {
    margin: 0;
    border: 0;
    border-top: var(--border-width-sm) solid currentColor;
  }

  :where(a) {
    text-decoration: none;
    color: inherit;
  }

  :where(strong, b) {
    font-weight: var(--font-weight-md);
  }

  :where(iframe) {
    border: 0;
  }

  :where(input[type="text"], input[type="email"], input[type="search"],
         input[type="tel"], input[type="url"], input[type="password"],
         input[type="number"], select, textarea) {
    width: 100%;
    padding: var(--space-fluid-sm) var(--space-fluid-md);
    border: var(--border-width-md) solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--canvas-on);
    font-size: var(--font-size-md);
    
  }

  :where(input:focus-visible, select:focus-visible, textarea:focus-visible) {
    border-color: var(--brand);
    box-shadow: 0 0 0 var(--border-width-lg) var(--focus-ring);
    outline: var(--border-width-lg) solid var(--focus-ring);
    outline-offset: 0.125rem;
  }
}

/* ── 2. ACCESSIBILITY A11Y ───────────────────────────────────────────────── */
@layer utilities {
  .sr-only {
    position: absolute !important;
    width: 0.0625rem !important;
    height: 0.0625rem !important;
    padding: 0 !important;
    margin: -0.0625rem !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .skip-link {
    position: absolute;
    top: -624.9375rem;
    left: -624.9375rem;
    z-index: var(--z-modal);
    padding: var(--space-fluid-sm) var(--space-fluid-md);
    background: var(--brand);
    color: var(--brand-on);
    font-weight: var(--font-weight-md);
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }

  .skip-link:focus {
    top: var(--space-fluid-sm);
    left: var(--space-fluid-sm);
    position: fixed;
  }

  .focus-ring:focus-visible {
    outline: var(--border-width-md) solid var(--focus-ring);
    outline-offset: 0.125rem;
  }

/* ── 3. ATOMIC TYPOGRAPHY & TRUNCATION ──────────────────────────────────── */
  .text-sans {
    font-family: var(--font-sans);
  }

  .text-mono {
    font-family: var(--font-mono);
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

/* ── 4. VISUAL EFFECTS & BACKGROUNDS ─────────────────────────────────────── */
  .text-gradient-brand {
    background-image: linear-gradient(135deg, var(--brand), var(--accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .glass-surface {
    background-color: var(--glass-bg);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 0.0625rem solid var(--border-subtle);
  }

  .border-glow {
    border: 0.0625rem solid var(--brand);
    box-shadow: inset 0 0.0625rem 0 color-mix(in oklch, 0 0.5rem 1.25rem oklch(0% 0 0 / 0.4), 0 0.5rem 1.25rem oklch(0% 0 0 / 0.4)), 0 0.25rem 0.75rem oklch(0% 0 0 / 0.25);
  }

  .bg-aurora {
    background-image:
      radial-gradient(ellipse 80% 50% at 20% -10%, color-mix(in oklch, var(--brand) 16%, transparent), transparent 70%),
      radial-gradient(ellipse 60% 40% at 80% 110%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 70%),
      radial-gradient(ellipse 50% 50% at 50% 50%, color-mix(in oklch, var(--brand) 8%, transparent), transparent 60%);
    background-blend-mode: screen;
  }

  .bg-atmo-vignette {
    background-image: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, color-mix(in oklch, var(--black) 45%, transparent) 100%);
  }

  .bg-mesh {
    background-image: var(--gradient-mesh);
  }

/* ── 5. GEOMETRY & TOUCH ERGONOMICS ────────────────────────────────────── */
  .touch-target {
    min-height: 2.75rem;
    min-width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .overflow-clip {
    overflow: clip;
  }

  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  .aspect-video {
    aspect-ratio: 16 / 9;
  }

  .object-cover {
    object-fit: cover;
  }

/* ── 6. SEMANTIC INTENT UTILITIES ────────────────────────────────────────── */
  [data-intent-utility="brand"] {
    background-color: var(--brand);
    color: var(--brand-on);
    border-color: transparent;
  }

  [data-intent-utility="accent"] {
    background-color: var(--accent);
    color: var(--accent-on);
    border-color: transparent;
  }

  [data-intent-utility="neutral"] {
    background-color: var(--surface);
    color: var(--canvas-on);
    border-color: var(--border);
  }

  [data-intent-utility="success"] {
    background-color: var(--intent-success-bg);
    color: var(--intent-success-text);
    border-color: var(--intent-success-border);
  }

  [data-intent-utility="error"] {
    background-color: var(--intent-error-bg);
    color: var(--intent-error-text);
    border-color: var(--intent-error-border);
  }

  [data-intent-utility="warning"] {
    background-color: var(--intent-warning-bg);
    color: var(--intent-warning-text);
    border-color: var(--intent-warning-border);
  }

  [data-intent-utility="info"] {
    background-color: var(--intent-info-bg);
    color: var(--intent-info-text);
    border-color: var(--intent-info-border);
  }

/* ── 7. ATTENTIONAL STAGING & MOTION LAYERS ────────────────────────────── */
  [data-attention-layer="focal"] {
    --local-motion-delay: 0ms;
    --local-motion-distance: var(--space-xs);
  }

  [data-attention-layer="support"] {
    --local-motion-delay: 60ms;
    --local-motion-distance: var(--space-2xs);
  }

  [data-attention-layer="utility"] {
    --local-motion-delay: 120ms;
    --local-motion-distance: var(--space-3xs);
  }

  [data-gs-motion],
  [data-gs-choreography] {
    --local-motion-duration: var(--motion);
    will-change: transform, opacity;
  }

  @media (prefers-reduced-motion: reduce) {
    [data-attention-layer],
    [data-gs-motion] {
      will-change: opacity;
      
      animation-duration: 150ms;
      transform: none !important;
    }
  }

/* ── 8. JS UI HOOKS & ATOMIC ALIASES ─────────────────────────────────────── */
  .text-display,
  .hero-title,
  .display-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-lg);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    text-wrap: balance;
  }

  .section-title {
    font-family: var(--font-sans);
    font-size: var(--font-size-3xl);
    font-weight: 600;
    line-height: var(--leading-heading);
    color: var(--canvas-on);
  }

  .gs-social-proof,
  .gs-surface-action,
  .btn-time-filter,
  .gs-filter-wrap,
  .gs-filter-range-input-min,
  .gs-filter-range-input-max,
  .gs-filter-range-min,
  .gs-filter-range-max,
  .gs-filter-sidebar,
  .gs-filter-pagination-wrap,
  .gs-filter-results-info,
  .gs-filter-select,
  .gs-filter-map-container,
  .gs-filter-map-location,
  .gs-filter-map-radius,
  .gs-filter-card,
  .saas-cmd-item,
  .gs-lang-option,
  .gs-wizard-step,
  .gs-wizard-dot,
  .edit-post-header__toolbar,
  .gs-btn__label,
  .nav-links,
  .mobile-drawer-links,
  .ka-chart--tooltip,
  .ka-chart--tooltip-heading,
  .ka--visitors,
  .ka--pageviews,
  .ka-chart--tooltip-arrow,
  .axes-y,
  .bars,
  .ka-col {
    /* JS UI Hooks Registry & Target Selectors */
  }
}