/* ==========================================================================
   Flow Utility
   
   The flow utility creates intelligent vertical spacing between elements.
   Based on the "Lobotomized Owl" selector pattern.
   ========================================================================== */

   body {
    font-family: var(--font-family-sans);
    font-size: 100%;
    line-height: var(--line-height-prose);
    color: var(--color-text-primary);
    background-color: var(--color-background-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

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

   

.flow>*+* {
    margin-block-start: var(--flow-space, var(--space-s));
}

/* Prose-specific flow adjustments for optimal reading experience */
.prose {
    --flow-space: var(--space-s);
    /* More generous spacing by default */
}

/* Tighter spacing after headings in prose content */
.prose :is(.h2 + *, .h3 + *, .h4 + *, .h5 + *, .h6 + *) {
    --flow-space: var(--space-s);
}

/* More space before headings for clear section breaks */
.prose :is(.h1, .h2, .h3, .h4, .h5, .h6) {
    --flow-space: var(--space-s);
}

.flow :is(.h3 + .body, .h4 + .body, .h5 + .body, .h6 + .body) {
    --flow-space: var(--space-xs);
}

.flow :is(.h3 + .small, .h4 + .small, .h5 + .small, .h6 + .small) {
    --flow-space: var(--space-2xs);
}


/* Extra space around figures and blockquotes for emphasis */
.prose figure,
.prose .blockquote {
    --flow-space: var(--space-xl);
}

/* Minimal space between images and their captions */
.prose img+.caption {
    --flow-space: var(--space-3xs);
}

.prose :is(.display + .subtitle, .h1 + .subtitle) {
    --flow-space: var(--space-xs);
}

.prose :is(.eyebrow + *) {
    --flow-space: var(--space-m);
}

.prose :is(.eyebrow + .display) {
    --flow-space: var(--space-m);
}

:where(.flow, .prose) :is(* + button) {
    --flow-space: var(--space-l);
}

/* ==========================================================================
     Stack Utility
     
     A simpler spacing utility for consistent gaps between elements.
     Use when you need uniform spacing without contextual adjustments.
     ========================================================================== */

.stack>*+* {
    margin-block-start: var(--stack-space, var(--space-m));
}


/**
 * typography.css - Applied Typography Styles
 * 
 * Applies typography variables to create a comprehensive type system.
 * These styles use the variables defined in variables/typography.css.
 */

/* ==========================================================================
   Heading Classes
   
   A comprehensive heading system from display text down to small headings.
   Each level is designed for specific use cases in your hierarchy.
   ========================================================================== */

/* Display - The largest text style for hero sections and major headlines
   Use sparingly for maximum impact, typically once per page */
.display {
    font-size: var(--step-7);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-space-tightest);
    color: var(--color-text-primary);
    max-inline-size: 24ch;
}

/* H1 - Primary page heading
   Use once per page for the main title */
.h1 {
    font-size: var(--step-5);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-space-tighter);
    color: var(--color-text-primary);
    max-inline-size: 20ch;
}

/* H2 - Major section headings
   Use for primary content divisions */
.h2 {
    font-size: var(--step-4);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-strong);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-space-tighter);
    color: var(--color-text-primary);
    max-inline-size: 20ch;
}

/* H3 - Subsection headings
   Use for secondary content divisions within H2 sections */
.h3 {
    font-size: var(--step-3);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-strong);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-space-tight);
    color: var(--color-text-primary);
    max-inline-size: 25ch;
}

/* H4 - Minor headings
   Use for smaller subdivisions or card titles */
.h4 {
    font-size: var(--step-2);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-strong);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    max-inline-size: 40ch;
}

/* H5 - Small headings
   Use for widget titles or minor UI elements */
.h5 {
    font-size: var(--step-1);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-strong);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    max-inline-size: 44ch;
}

/* H6 - Smallest heading
   Use sparingly, often better to use .eyebrow or .small */
.h6 {
    font-size: var(--step-0);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-strong);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    max-inline-size: 48ch;
}

/* ==========================================================================
   Body Text Variations
   
   Different text styles for various content types and contexts.
   ========================================================================== */

/* Body - Standard paragraph text
   The default choice for all body content */
.body {
    font-size: var(--step-0);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-prose);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    max-inline-size: clamp(45ch, 65ch, 45ch);

}

/* Lead - Introductory paragraphs
   Use for the first paragraph of articles or important introductions */
.lead {
    font-size: var(--step-1);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-prose);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    max-inline-size: 56ch;
    letter-spacing: var(--letter-space-tighter);
}

/* Small - De-emphasized text
   Use for fine print, timestamps, captions, and secondary information */
.small {
    font-size: var(--step--1);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-prose);
    font-weight: 460;
    color: var(--color-text-tertiary);
    max-inline-size: 60ch;
}

/* Subtitle - Secondary hero text
   Use directly under display or h1 text for taglines and descriptions
   NOT for general subheadings (use h3, h4 for those) */
.subtitle {
    font-size: var(--step-2);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-strong);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    max-inline-size: 45ch;
    letter-spacing: var(--letter-space-normal);
}

/* Eyebrow - Small text above headings
   Used to introduce or categorize the heading that follows */
.eyebrow {
    font-size: var(--step--2);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-regular);
    text-transform: uppercase;
    letter-spacing: var(--letter-space-loosest);
    color: var(--blue-10);
    max-inline-size: 60ch;
}

/* Blockquote - Quoted text
   For testimonials, pull quotes, and citations */
.blockquote {
    font-size: var(--step-1);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-prose);
    font-weight: var(--font-weight-regular);
    font-style: italic;
    color: var(--color-text-primary);
    max-inline-size: 50ch;
    padding-inline-start: var(--space-m);
    border-inline-start: 4px solid var(--color-border-strong);
}

/* Caption - For images and figures
   Small text that explains or provides context for visual content */
.caption {
    font-size: var(--step--1);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-prose);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-tertiary);
    max-inline-size: 60ch;
}

/* Emphasis - For highlighting important text within paragraphs */
.emphasis {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

/* Code - For inline code snippets */
.code {
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.15em 0.25em;
    border-radius: var(--border-radius-small);
    background-color: var(--slate-3);
    color: var(--color-text-primary);
}

/* Label - Form field labels */
body:not([data-builder-window]) .label {
    font-size: var(--step--1);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-strong);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    display: block;
    margin-block-end: var(--space-2xs);
}

/* List specific styling */
.list {
    font-size: var(--step-0);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-prose);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
    max-inline-size: 56ch;
    padding-inline-start: var(--space-m);
}

.list-item {
    margin-block-end: var(--space-2xs);
}

/* Unordered list markers */
/*ul {
    list-style-type: none;
}

ul li::before {
    content: "•";
    color: var(--color-primary);
    display: inline-block;
    width: 1em;
    margin-inline-start: -1em;
}*/

/* Additional text styles */
.byline {
    font-size: var(--step--1);
    font-family: var(--font-family-sans);
    line-height: var(--line-height-prose);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

.timestamp {
    font-size: var(--step--1);
    font-family: var(--font-family-sans);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-regular);
}

.tag {
    display: inline-block;
    font-size: var(--step--1);
    font-family: var(--font-family-sans);
    line-height: 1;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    background-color: var(--slate-3);
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--border-radius-medium);
}