/* ==========================================================================
   RESPONSIVE FOUNDATION
   A fluid, mobile-first CSS custom property system for Astro projects.
   ==========================================================================

   IMPLEMENTATION
   ==============
   1. Save this file as /src/styles/responsive-foundation.css
   2. Import it once in your Layout.astro file:
      ---
      import '../styles/responsive-foundation.css';
      ---
   3. Use the custom properties throughout your .astro component <style> blocks
      and any global styles. Astro scopes component styles automatically, but
      these :root properties cascade into all components.
   4. Apply .wrap to any container that should be centered with a max-width.
      Apply .wrap-full to sections that need full-viewport width.
   5. The type scale, spacing, and radius values are all fluid. They
      interpolate smoothly between their min and max values based on viewport
      width, so you rarely need to override them inside breakpoints.
   6. Breakpoints use modern range syntax (width >= Xem). All evergreen
      browsers support this. If you need legacy support, convert to
      min-width queries.

   BREAKPOINTS
   ===========
   Mobile portrait:   320px - 480px   (default / no query)
   Mobile landscape:  481px+          (width >= 30.0625em)
   Tablet:            769px+          (width >= 48.0625em)
   Desktop:           1025px+         (width >= 64.0625em)
   Large desktop:     1201px+         (width >= 75.0625em)

   ========================================================================== */


:root {

  /* ========================================================================
     FLUID TYPE SCALE
     ========================================================================
     Each size uses clamp(MIN, PREFERRED, MAX).
     The preferred value uses vw so font size scales with viewport width.
     Approximate px values listed at 320px / 1440px viewports.

     --fs-3xs:   10px  /  12px    Fine print, legal disclaimers
     --fs-2xs:   11px  /  13px    Footnotes, helper text
     --fs-xs:    12px  /  14px    Captions, labels, metadata
     --fs-sm:    14px  /  16px    Secondary text, nav links, small UI
     --fs-base:  16px  /  18px    Body copy, paragraphs, default text
     --fs-lg:    20px  /  28px    Subheadings, card titles
     --fs-xl:    28px  /  48px    Section headings
     --fs-2xl:   40px  /  72px    Page titles, hero subheadings
     --fs-3xl:   48px  /  96px    Hero headlines
     --fs-4xl:   56px  / 120px    Large display text
     --fs-5xl:   64px  / 144px    Dramatic display, single-word heroes
     ======================================================================== */

  --fs-3xs: clamp(0.625rem, 0.575rem + 0.25vw, 0.75rem);
  --fs-2xs: clamp(0.6875rem, 0.625rem + 0.3125vw, 0.8125rem);
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.25rem + 2.5vw, 3rem);
  --fs-2xl: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);
  --fs-3xl: clamp(3rem, 2rem + 5vw, 6rem);
  --fs-4xl: clamp(3.5rem, 2.25rem + 6.25vw, 7.5rem);
  --fs-5xl: clamp(4rem, 2.5rem + 7.5vw, 9rem);


  /* ========================================================================
     FLUID SPACING
     ========================================================================
     Approximate px values listed at 320px / 1440px viewports.

     --space-3xs:    2px  /    3px    Icon-to-label gaps, optical tweaks
     --space-2xs:    4px  /    6px    Badge padding, label-to-input gaps
     --space-xs:     8px  /   12px    Compact card padding, tight list gaps
     --space-sm:    12px  /   20px    Button padding, paragraph spacing
     --space-md:    16px  /   32px    Default content gaps, form field spacing
     --space-lg:    24px  /   56px    Section inner padding, grid gaps
     --space-xl:    40px  /   96px    Section top/bottom padding
     --space-2xl:   56px  /  144px    Major page zone separation
     --space-3xl:   80px  /  208px    Hero padding, large visual breaks
     --space-4xl:  112px  /  288px    Full-screen hero vertical padding
     ======================================================================== */

  --space-3xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.1875rem);
  --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --space-md: clamp(1rem, 0.75rem + 1.25vw, 2rem);
  --space-lg: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  --space-xl: clamp(2.5rem, 1.5rem + 5vw, 6rem);
  --space-2xl: clamp(3.5rem, 2rem + 7.5vw, 9rem);
  --space-3xl: clamp(5rem, 3rem + 10vw, 13rem);
  --space-4xl: clamp(7rem, 4rem + 15vw, 18rem);


  /* ========================================================================
     FLUID BORDER RADIUS
     ========================================================================
     Approximate px values listed at 320px / 1440px viewports.

     --radius-xs:      2px  /   3px    Subtle edge softening (inputs, code)
     --radius-sm:      4px  /   6px    Buttons, cards, form fields (structured)
     --radius-md:      6px  /   8px    Default card rounding
     --radius-lg:      8px  /  12px    Friendly, modern cards and containers
     --radius-xl:     12px  /  18px    Rounded-rectangle SaaS aesthetic
     --radius-2xl:    16px  /  24px    Modals, large cards, hero blocks
     --radius-3xl:    24px  /  36px    Soft, pillow-like containers
     --radius-full:   9999px           Pill buttons, tags, avatars (no scaling)
     ======================================================================== */

  --radius-xs: clamp(0.125rem, 0.1rem + 0.125vw, 0.1875rem);
  --radius-sm: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --radius-md: clamp(0.375rem, 0.3rem + 0.375vw, 0.5rem);
  --radius-lg: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --radius-xl: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
  --radius-2xl: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --radius-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --radius-full: 9999px;


  /* ========================================================================
     CONTENT WIDTHS
     ========================================================================
     Used by .wrap to cap content width at each breakpoint.
     The .wrap class pairs these with min() so content stays padded on
     viewports narrower than the cap.

     --wrap-full:  100%       Full-bleed sections (heroes, bg bands)
     --wrap-xs:    320px      Mobile portrait max
     --wrap-sm:    481px      Mobile landscape max
     --wrap-md:    769px      Tablet max
     --wrap-lg:   1025px      Desktop max
     --wrap-max:  1280px      Large desktop max
     ======================================================================== */

  --wrap-full: 100%;
  --wrap-max: 80rem;       /* 1280px */
  --wrap-lg: 64.0625rem;   /* 1025px */
  --wrap-md: 48.0625rem;   /* 769px */
  --wrap-sm: 30.0625rem;   /* 481px */
  --wrap-xs: 20rem;        /* 320px */


  /* ========================================================================
     FONT FAMILIES
     ========================================================================
     Override these in a project stylesheet to swap fonts without touching
     component code. Each stack includes a safe system fallback.

     --ff-base:     Body copy, default UI text
     --ff-heading:  Headings (h1-h6). Falls back to --ff-base if unset.
     --ff-mono:     Code, tabular numerals, technical content
     ======================================================================== */

  --ff-base: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ff-heading: var(--ff-base);
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* ==========================================================================
   MOBILE-FIRST BASE STYLES (320px+)
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  line-height: 1.3;
}

.wrap {
  width: 100%;
  margin-inline: auto;
}

.wrap-full {
  width: 100%;
}

/* Padding utilities — apply to any element to set padding from the
   spacing token scale. Commonly paired with .wrap / .wrap-full. */
.padding-none { padding: 0; }
.padding-3xs  { padding: var(--space-3xs); }
.padding-2xs  { padding: var(--space-2xs); }
.padding-xs   { padding: var(--space-xs); }
.padding-sm   { padding: var(--space-sm); }
.padding-md   { padding: var(--space-md); }
.padding-lg   { padding: var(--space-lg); }
.padding-xl   { padding: var(--space-xl); }
.padding-2xl  { padding: var(--space-2xl); }
.padding-3xl  { padding: var(--space-3xl); }
.padding-4xl  { padding: var(--space-4xl); }

/* Directional zero-out overrides — pair with a .padding-* class to strip
   padding from one axis while keeping it on the other. */
.padding-none-top-bottom {
  padding-top: 0;
  padding-bottom: 0;
}
.padding-none-left-right {
  padding-left: 0;
  padding-right: 0;
}

/* Max-width utilities — apply to any element to cap its max-width at a
   content-width token. On .wrap, layers on top of the default breakpoint
   caps. */
.max-w-xs   { max-width: var(--wrap-xs); }
.max-w-sm   { max-width: var(--wrap-sm); }
.max-w-md   { max-width: var(--wrap-md); }
.max-w-lg   { max-width: var(--wrap-lg); }
.max-w-max  { max-width: var(--wrap-max); }
.max-w-full { max-width: var(--wrap-full); }


/* ==========================================================================
   FLEX UTILITY
   ==========================================================================
   Apply .flex to a parent container. Its direct children can use .flex-left
   / .flex-right (or any other name) as naming hooks. Pair width modifiers on
   the children (.flex--40 + .flex--60) to define the split. Apply a stack
   modifier on the parent to collapse to a column below a breakpoint. */

.flex {
  display: flex;
  flex-direction: row;
}

.flex > * {
  flex-grow: 1;
}

/* Width modifiers — apply to a direct child of .flex to set its percentage
   width. Pair two that sum to 100 (e.g. .flex--40 and .flex--60). */
.flex--10 { width: 10%; }
.flex--20 { width: 20%; }
.flex--25 { width: 25%; }
.flex--30 { width: 30%; }
.flex--33 { width: 33.3333%; }
.flex--40 { width: 40%; }
.flex--50 { width: 50%; }
.flex--60 { width: 60%; }
.flex--66 { width: 66.6667%; }
.flex--70 { width: 70%; }
.flex--75 { width: 75%; }
.flex--80 { width: 80%; }
.flex--90 { width: 90%; }

/* Stack modifiers — apply to the .flex parent. Each one stacks children at
   and below its named breakpoint, then restores the row (and the children's
   width modifiers) at the breakpoint above. */
@media (width < 30.0625em) {
  .flex--mobile-portrait { flex-direction: column; }
  .flex--mobile-portrait > * { width: 100%; }
}

@media (width < 48.0625em) {
  .flex--mobile-landscape { flex-direction: column; }
  .flex--mobile-landscape > * { width: 100%; }
}

@media (width < 64.0625em) {
  .flex--tablet { flex-direction: column; }
  .flex--tablet > * { width: 100%; }
}


/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* Desktop (1025px+) */
@media (width >= 64.0625em) {
  .wrap {
    width: min(100% - var(--space-lg) * 2, var(--wrap-lg));
  }
}

/* Large desktop (1201px+) */
@media (width >= 75.0625em) {
  .wrap {
    width: min(100% - var(--space-xl) * 2, var(--wrap-max));
  }
}