/**
 * Fluid Framework
 * A modern, semantic design system
 *
 * Like water: adaptable, natural, powerful yet gentle.
 *
 * @version 1.0.3
 * @license MIT
 *
 * Layer Architecture:
 * 1. reset     - Normalize browser defaults
 * 2. tokens    - Design tokens (CSS custom properties)
 * 3. base      - Default element styles
 * 4. layouts   - Layout utilities and patterns
 * 5. components - Reusable component styles
 * 6. themes    - Theme overrides
 * 7. utilities - Utility classes (use sparingly)
 */

/* Establish layer order first - this is crucial */
@layer reset, tokens, base, layouts, components, themes, utilities;


/* ========================================
   CORE
   Foundation styles every project needs
   ======================================== */

@import "./core/reset.css";
@import "./core/tokens.css";
@import "./core/base.css";


/* ========================================
   LAYOUTS
   Layout primitives and patterns
   ======================================== */

@import "./layouts/positioning.css";


/* ========================================
   COMPONENTS
   Reusable UI components
   ======================================== */

@import "./components/button.css";
@import "./components/card.css";
@import "./components/nav.css";
@import "./components/form.css";
@import "./components/hero.css";
@import "./components/indicator.css";
@import "./components/modal.css";
@import "./components/tooltip.css";
@import "./components/accordion.css";
@import "./components/alert.css";
@import "./components/table.css";
@import "./components/avatar.css";
@import "./components/loading.css";
@import "./components/dropdown.css";
@import "./components/badge.css";
@import "./components/empty-state.css";
@import "./components/step-indicator.css";
@import "./components/search-input.css";
@import "./components/chip.css";
@import "./components/gallery.css";
@import "./components/compare.css";


/* ========================================
   SECTIONS
   Pre-built page sections
   ======================================== */

@import "./sections/features.css";
@import "./sections/testimonials.css";
@import "./sections/cta.css";
@import "./sections/footer.css";
@import "./sections/team.css";
@import "./sections/stats.css";


/* Animations */
@import "./animations/scroll-reveal.css";


/* ========================================
   THEMES (Coming in Phase 4)
   Theme variations and overrides
   ======================================== */

/* @import "./themes/default.css"; */
/* @import "./themes/dark.css"; */
/* @import "./themes/corporate.css"; */


/* ========================================
   UTILITIES
   Single-purpose utility classes
   Use sparingly - prefer semantic components
   ======================================== */

@layer utilities {
  /* Visually hidden but accessible to screen readers */
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Focus utility - show only with focus-visible */
  .focus-ring:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  /* Flow utility - consistent vertical spacing */
  .flow > * + * {
    margin-block-start: var(--flow-space, var(--space-5));
  }

  /* Prose utility - optimal reading width */
  .prose {
    max-inline-size: var(--container-prose);
  }

  /* ========================================
     TEXT OVERFLOW CONTROL
     Headings hyphenate overlong words by default (see base.css).
     data-text-overflow overrides the handling per element:

       data-text-overflow="hyphenate"  break + hyphen (the heading default)
       data-text-overflow="break"      hard break, no hyphen
       data-text-overflow="clip"       single line, ellipsis
       data-text-overflow="normal"     browser default (opt back out)

     For shrink-to-fit sizing instead, add data-fit-text and include
     assets/js/fit-text.js (progressive enhancement — these CSS
     rules remain the no-JS safety net).
     ======================================== */

  [data-text-overflow="hyphenate"] {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  [data-text-overflow="break"] {
    overflow-wrap: anywhere;
    hyphens: none;
  }

  [data-text-overflow="clip"] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  [data-text-overflow="normal"] {
    overflow-wrap: normal;
    hyphens: manual;
  }

  /* Center utility - horizontally centered content */
  .center {
    display: grid;
    place-items: center;
  }

  /* Icon utility - inline SVG icons */
  .icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    inline-size: 1em;
    block-size: 1em;
    stroke-width: 2;
  }

  .icon--sm { inline-size: 0.875em; block-size: 0.875em; }
  .icon--lg { inline-size: 1.25em; block-size: 1.25em; }
  .icon--xl { inline-size: 1.5em; block-size: 1.5em; }


  /* ========================================
     IMAGE PROTECTION
     Discourage casual right-click saving.
     NOT DRM — just friction for the 95% who right-click.
     Does NOT prevent screenshots, dev tools, or determined users.
     ======================================== */

  [data-protected] {
    position: relative;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  [data-protected]::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Transparent overlay blocks "Save Image As" context menu */
  }


  /* ========================================
     ORIENTATION-AWARE IMAGES
     Show/hide images based on viewport orientation.
     Use with <picture> for art direction.
     ======================================== */

  [data-orientation="portrait"] { display: none; }

  @media (orientation: portrait) {
    [data-orientation="landscape"] { display: none; }
    [data-orientation="portrait"] { display: block; }
  }
}


/* ========================================
   LAYOUTS LAYER
   Basic layout utilities until Phase 3
   ======================================== */

@layer layouts {
  /* Container - constrained width with centered content */
  .container {
    --_container-size: var(--container-content, var(--container-xl));
    /* The gutter never shrinks below 6vw (3vw a side): on a window just wider than
       the container, presets with a small --space-gutter left text 12–16px from the
       window edge (#66). On a phone 6vw is about the gutter anyway. */
    inline-size: min(100% - max(var(--space-gutter, var(--space-8)), 6vw), var(--_container-size));
    margin-inline: auto;
    container-type: inline-size;
  }

  .container--sm { --_container-size: var(--container-sm); }
  .container--md { --_container-size: var(--container-md); }
  .container--lg { --_container-size: var(--container-lg); }
  .container--xl { --_container-size: var(--container-xl); }
  .container--2xl { --_container-size: var(--container-2xl); }

  /* Stack - vertical flow with consistent gaps */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-5));
  }

  /* Cluster - horizontal flow that wraps */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-4));
    align-items: var(--cluster-align, center);
  }

  /* Grid - auto-responsive grid */
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-5));
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--grid-min, 16rem)), 1fr)
    );
  }

  /* Section - consistent vertical padding */
  .section {
    padding-block: var(--space-section);
  }

  /* Section bands: data-bg="tinted" (or "alt") paints the surface tint,
     data-bg="accent" the accent tint. A .hero takes the same values. */
  :is(.section, section)[data-bg="tinted"],
  :is(.section, section)[data-bg="alt"] {
    background-color: var(--color-surface);
  }

  :is(.section, section)[data-bg="accent"] {
    background-color: var(--accent-subtle);
  }
}