/**
 * CUBE.css — Mini CSS Framework
 * Based on CUBE CSS methodology (cube.fyi)
 * + Every Layout composition primitives
 * + Fluid typography & spacing
 *
 * Layers: CSS → Composition → Utility → Block (+ nested Exceptions) → Grouping
 * No build tools. No preprocessors. Pure CSS.
 * CSS Nesting used in Block layer only (Chrome 120+, Firefox 117+, Safari 17.2+)
 *
 * Author: ADiSoft d.o.o.
 * Version: 0.4.0
 *
 * TABLE OF CONTENTS
 * ─────────────────
 * 1. CSS LAYER         — Reset, custom properties, base styles
 * 2. COMPOSITION LAYER — Layout primitives (Every Layout)
 * 3. UTILITY LAYER     — Single-purpose atomic classes
 * 4. BLOCK LAYER       — Components with nested exceptions
 * 5. GROUPING LAYER    — Contextual theming (dark, brand, muted)
 * 6. ACCESSIBILITY     — Reduced motion, color scheme, contrast
 * 7. PRINT STYLES      — Print-specific overrides
 *
 * CSS @layer order (low → high specificity):
 * reset < composition < utility < block < grouping
 * Accessibility & print are unlayered so they always win.
 * Project-specific CSS should remain unlayered for easy overrides.
 */

@layer reset, composition, utility, block, grouping;

/* ═══════════════════════════════════════════════════════
   1. CSS LAYER — Reset, custom properties, base styles
   ═══════════════════════════════════════════════════════ */

@layer reset {
  /* --- Modern Reset --- */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    overflow-x: clip;
    scroll-behavior: smooth;
    text-size-adjust: none;
  }

  body {
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    min-block-size: 100vh;
    overflow-x: clip;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    block-size: auto;
    display: block;
    max-inline-size: 100%;
  }

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.15;
    overflow-wrap: break-word;
    text-wrap: balance;
  }

  p,
  li,
  figcaption {
    max-inline-size: 65ch;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  a {
    color: currentColor;
    text-underline-offset: 0.15em;
  }

  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }

  :target {
    scroll-margin-block-start: 5rem;
  }

  dialog {
    background: transparent;
    border: none;
    max-block-size: unset;
    max-inline-size: unset;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
    inline-size: 100%;
  }

  /* --- Custom Properties --- */
  :root {
    color-scheme: light dark;

    /* ── Color Palette ── */
    --color-accent: #f59e0b;
    --color-accent-light: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-alt: #b91c1c;
    --color-danger-light: #fee2e2;
    --color-dark: #1c1b18;
    --color-dark-2: #3d3b37;
    --color-light: #fafaf9;
    --color-light-2: #f0efed;
    --color-light-3: #e5e3e0;
    --color-mid: #94928d;
    --color-primary: #2563eb;
    --color-primary-alt: #1d4ed8;
    --color-primary-light: #dbeafe;
    --color-secondary: #059669;
    --color-secondary-light: #d1fae5;

    /* ── Surfaces ── */
    --surface-base: var(--color-light);
    --surface-overlay: var(--color-dark);
    --surface-raised: #fff;

    /* ── Text ── */
    --text-base: var(--color-dark);
    --text-inverse: var(--color-light);
    --text-muted: var(--color-mid);

    /* ── Fluid Spacing Scale (clamp) ──
     Based on utopia.fyi — viewport 320px → 1240px */
    --space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.45rem + 0.22vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.67rem + 0.37vw, 0.9375rem);
    --space-s: clamp(1rem, 0.89rem + 0.54vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.34rem + 0.76vw, 1.875rem);
    --space-l: clamp(2rem, 1.78rem + 1.09vw, 2.5rem);
    --space-xl: clamp(3rem, 2.67rem + 1.63vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.56rem + 2.17vw, 5rem);
    --space-3xl: clamp(6rem, 5.35rem + 3.26vw, 7.5rem);

    /* ── Fluid Type Scale ── */
    --step--2: clamp(0.72rem, 0.68rem + 0.18vw, 0.8rem);
    --step--1: clamp(0.83rem, 0.78rem + 0.29vw, 1rem);
    --step-0: clamp(1rem, 0.91rem + 0.43vw, 1.25rem);
    --step-1: clamp(1.2rem, 1.07rem + 0.63vw, 1.563rem);
    --step-2: clamp(1.44rem, 1.26rem + 0.89vw, 1.953rem);
    --step-3: clamp(1.728rem, 1.48rem + 1.22vw, 2.441rem);
    --step-4: clamp(2.074rem, 1.74rem + 1.67vw, 3.052rem);
    --step-5: clamp(2.488rem, 2.03rem + 2.28vw, 3.815rem);

    /* ── Font Families ── */
    --font-base: system-ui, -apple-system, sans-serif;
    --font-heading: var(--font-base);
    --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

    /* ── Measures ── */
    --measure-base: 65ch;
    --measure-narrow: 45ch;
    --measure-wide: 80ch;

    /* ── Breakpoints (for reference in project CSS / media queries) ── */
    --bp-sm: 36rem;
    --bp-md: 48rem;
    --bp-lg: 64rem;
    --bp-xl: 80rem;

    /* ── Borders & Radii ── */
    --border-mid: 2px solid var(--color-light-2);
    --border-thin: 1px solid var(--color-light-2);
    --radius-full: 9999px;
    --radius-l: 1rem;
    --radius-m: 0.5rem;
    --radius-s: 0.25rem;

    /* ── Shadows ── */
    --shadow-l: 0 8px 30px hsl(0 0% 0% / 0.12);
    --shadow-m: 0 4px 12px hsl(0 0% 0% / 0.08);
    --shadow-s: 0 1px 2px hsl(0 0% 0% / 0.06);

    /* ── Transitions ── */
    --transition-base: 250ms ease;
    --transition-fast: 150ms ease;
    --transition-slow: 400ms ease;

    /* ── Z-index ── */
    --layer-base: 1;
    --layer-nav: 100;
    --layer-overlay: 1000;
    --layer-raised: 10;

    /* ── Focus & Accent ── */
    --focus-offset: 3px;
    --focus-ring: 3px solid var(--color-primary);
    accent-color: var(--color-primary);

    /* ── Dark Mode Source Tokens (single source of truth) ── */
    --dark-border-mid: 2px solid hsl(0 0% 100% / 0.1);
    --dark-border-thin: 1px solid hsl(0 0% 100% / 0.1);
    --dark-color-light-2: hsl(0 0% 100% / 0.08);
    --dark-color-light-3: hsl(0 0% 100% / 0.15);
    --dark-color-primary-light: hsl(217 91% 20% / 0.4);
    --dark-shadow-l: 0 8px 30px hsl(0 0% 0% / 0.4);
    --dark-shadow-m: 0 4px 12px hsl(0 0% 0% / 0.3);
    --dark-shadow-s: 0 1px 2px hsl(0 0% 0% / 0.2);
    --dark-surface-base: var(--color-dark);
    --dark-surface-raised: var(--color-dark-2);
    --dark-text-base: var(--color-light);
    --dark-text-muted: var(--color-mid);
  }

  /* Global body styles */
  body {
    background-color: var(--surface-base);
    color: var(--text-base);
    font-family: var(--font-base);
    font-size: var(--step-0);
  }

  /* Headings */
  h1 {
    font-size: var(--step-5);
  }
  h2 {
    font-size: var(--step-4);
  }
  h3 {
    font-size: var(--step-3);
  }
  h4 {
    font-size: var(--step-2);
  }
  h5 {
    font-size: var(--step-1);
  }
  h6 {
    font-size: var(--step-0);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-heading);
    font-weight: 700;
  }

  /* Global focus-visible */
  :focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }
} /* end @layer reset */

/* ═══════════════════════════════════════════════════════
   2. COMPOSITION LAYER — Layout primitives (Every Layout)
   ═══════════════════════════════════════════════════════ */

@layer composition {
  /**
 * Stack: Vertical rhythm via lobotomized owl
 * Modifier: --stack-space
 */
  .stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

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

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

  /**
 * Cluster: Flexible horizontal grouping with wrapping
 * Modifiers: --cluster-align, --cluster-gap, --cluster-justify
 */
  .cluster {
    align-items: var(--cluster-align, center);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cluster-gap, var(--space-s));
    justify-content: var(--cluster-justify, flex-start);
  }

  /**
 * Center: Horizontally centered column
 * Modifier: --center-measure
 */
  .center {
    margin-inline: auto;
    max-inline-size: var(--center-measure, var(--measure-base));
    padding-inline: var(--space-s);
  }

  .center[data-intrinsic] {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  /**
 * Sidebar: Two-panel layout, one fixed-ish, one fluid
 * Modifiers: --sidebar-gap, --sidebar-threshold, --sidebar-width
 */
  .with-sidebar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sidebar-gap, var(--space-l));
  }

  .with-sidebar > :first-child {
    flex-basis: var(--sidebar-width, 18rem);
    flex-grow: 1;
  }

  .with-sidebar > :last-child {
    flex-basis: 0;
    flex-grow: 999;
    min-inline-size: var(--sidebar-threshold, 55%);
  }

  /**
 * Switcher: Horizontal until too narrow, then vertical
 * Modifiers: --switcher-gap, --switcher-threshold
 */
  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--space-s));
  }

  .switcher > * {
    flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
    flex-grow: 1;
  }

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

  /**
 * Cover: Vertically centered content with header/footer
 * Modifier: --cover-min-height
 */
  .cover {
    display: flex;
    flex-direction: column;
    min-block-size: var(--cover-min-height, 100vh);
    padding: var(--space-s);
  }

  .cover > [data-cover-center] {
    margin-block: auto;
  }

  .cover > :first-child:not([data-cover-center]) {
    margin-block-start: 0;
  }

  .cover > :last-child:not([data-cover-center]) {
    margin-block-end: 0;
  }

  /**
 * Frame: Aspect-ratio container for media
 * Modifier: --frame-ratio
 */
  .frame {
    aspect-ratio: var(--frame-ratio, 16 / 9);
    overflow: hidden;
    position: relative;
  }

  .frame > img,
  .frame > video {
    block-size: 100%;
    inline-size: 100%;
    object-fit: cover;
  }

  /**
 * Region: Consistent vertical section padding
 * Modifier: --region-space
 */
  .region {
    padding-block: var(--region-space, var(--space-xl));
  }

  /**
 * Wrapper: Max-width page container
 * Modifier: --wrapper-max
 */
  .wrapper {
    margin-inline: auto;
    max-inline-size: var(--wrapper-max, 75rem);
    padding-inline: var(--space-s);
  }

  /**
 * Repel: Push two items to opposite ends
 * Modifier: --repel-gap
 */
  .repel {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--repel-gap, var(--space-s));
    justify-content: space-between;
  }

  /**
 * Imposter: Absolutely positioned overlay element
 * Exception: data-position
 */
  .imposter {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }

  .imposter[data-position='top-start'] {
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    transform: none;
  }

  .imposter[data-position='top-end'] {
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
    inset-inline-start: auto;
    transform: none;
  }

  .imposter[data-position='bottom-start'] {
    inset-block-end: var(--space-2xs);
    inset-block-start: auto;
    inset-inline-start: var(--space-2xs);
    transform: none;
  }

  .imposter[data-position='bottom-end'] {
    inset-block-end: var(--space-2xs);
    inset-block-start: auto;
    inset-inline-end: var(--space-2xs);
    inset-inline-start: auto;
    transform: none;
  }
} /* end @layer composition */

/* ═══════════════════════════════════════════════════════
   3. UTILITY LAYER — Single-purpose atomic classes
   ═══════════════════════════════════════════════════════ */

@layer utility {
  /* --- Flow — vertical rhythm for any content --- */
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  .flow :is(h2, h3, h4) {
    --flow-space: 1.5em;
  }
  .flow :is(h2, h3, h4) + * {
    --flow-space: 0.5em;
  }

  .flow :is(figure, blockquote, pre, .table-wrap, details) {
    --flow-space: 1.5em;
  }
  .flow :is(figure, blockquote, pre, .table-wrap, details) + * {
    --flow-space: 1.5em;
  }

  /* --- Spacing --- */
  .gap-3xs {
    gap: var(--space-3xs);
  }
  .gap-2xs {
    gap: var(--space-2xs);
  }
  .gap-xs {
    gap: var(--space-xs);
  }
  .gap-s {
    gap: var(--space-s);
  }
  .gap-m {
    gap: var(--space-m);
  }
  .gap-l {
    gap: var(--space-l);
  }
  .gap-xl {
    gap: var(--space-xl);
  }
  .gap-2xl {
    gap: var(--space-2xl);
  }

  .pad-3xs {
    padding: var(--space-3xs);
  }
  .pad-2xs {
    padding: var(--space-2xs);
  }
  .pad-xs {
    padding: var(--space-xs);
  }
  .pad-s {
    padding: var(--space-s);
  }
  .pad-m {
    padding: var(--space-m);
  }
  .pad-l {
    padding: var(--space-l);
  }
  .pad-xl {
    padding: var(--space-xl);
  }
  .pad-2xl {
    padding: var(--space-2xl);
  }

  /* --- Typography --- */
  .text-xs {
    font-size: var(--step--2);
  }
  .text-s {
    font-size: var(--step--1);
  }
  .text-base {
    font-size: var(--step-0);
  }
  .text-m {
    font-size: var(--step-1);
  }
  .text-l {
    font-size: var(--step-2);
  }
  .text-xl {
    font-size: var(--step-3);
  }
  .text-2xl {
    font-size: var(--step-4);
  }
  .text-3xl {
    font-size: var(--step-5);
  }

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

  .weight-black {
    font-weight: 900;
  }
  .weight-bold {
    font-weight: 700;
  }
  .weight-medium {
    font-weight: 500;
  }
  .weight-regular {
    font-weight: 400;
  }

  .leading-loose {
    line-height: 1.8;
  }
  .leading-normal {
    line-height: 1.6;
  }
  .leading-snug {
    line-height: 1.35;
  }
  .leading-tight {
    line-height: 1.15;
  }

  .measure-base {
    max-inline-size: var(--measure-base);
  }
  .measure-narrow {
    max-inline-size: var(--measure-narrow);
  }
  .measure-wide {
    max-inline-size: var(--measure-wide);
  }

  .text-center {
    text-align: center;
  }
  .text-end {
    text-align: end;
  }
  .text-start {
    text-align: start;
  }

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

  .uppercase {
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* --- Color --- */
  .color-accent {
    color: var(--color-accent);
  }
  .color-danger {
    color: var(--color-danger);
  }
  .color-inverse {
    color: var(--text-inverse);
  }
  .color-muted {
    color: var(--text-muted);
  }
  .color-primary {
    color: var(--color-primary);
  }
  .color-secondary {
    color: var(--color-secondary);
  }

  .bg-base {
    background-color: var(--surface-base);
  }
  .bg-overlay {
    background-color: var(--surface-overlay);
  }
  .bg-primary {
    background-color: var(--color-primary);
  }
  .bg-raised {
    background-color: var(--surface-raised);
  }

  /* --- Visibility --- */
  .hidden {
    display: none;
  }

  .visually-hidden {
    block-size: 1px;
    border: 0;
    clip: rect(0, 0, 0, 0);
    inline-size: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
  }

  @media (max-width: 47.999rem) {
    [data-hide='below-md'] {
      display: none !important;
    }
    [data-show='above-md'] {
      display: none !important;
    }
  }
  @media (min-width: 48rem) {
    [data-hide='above-md'] {
      display: none !important;
    }
    [data-show='below-md'] {
      display: none !important;
    }
  }

  /* --- Decoration --- */
  .border-mid {
    border: var(--border-mid);
  }
  .border-thin {
    border: var(--border-thin);
  }

  .radius-full {
    border-radius: var(--radius-full);
  }
  .radius-l {
    border-radius: var(--radius-l);
  }
  .radius-m {
    border-radius: var(--radius-m);
  }
  .radius-s {
    border-radius: var(--radius-s);
  }

  .shadow-l {
    box-shadow: var(--shadow-l);
  }
  .shadow-m {
    box-shadow: var(--shadow-m);
  }
  .shadow-s {
    box-shadow: var(--shadow-s);
  }

  /* --- Misc --- */
  .relative {
    position: relative;
  }

  .divider {
    background-color: var(--color-light-2);
    block-size: 1px;
    border: none;

    &[data-orientation='vertical'] {
      align-self: stretch;
      block-size: auto;
      inline-size: 1px;
    }
  }
} /* end @layer utility */

/* ═══════════════════════════════════════════════════════
   4. BLOCK LAYER — Components with nested exceptions
   ═══════════════════════════════════════════════════════ */

@layer block {
  /* ──────────────── Button ──────────────── */
  .button {
    align-items: center;
    background-color: var(--button-bg, var(--color-primary));
    border: 2px solid transparent;
    border-radius: var(--radius-m);
    color: var(--button-color, var(--color-light));
    cursor: pointer;
    display: inline-flex;
    font-size: var(--step--1);
    font-weight: 600;
    gap: var(--space-2xs);
    justify-content: center;
    line-height: 1;
    padding: var(--button-padding, var(--space-2xs) var(--space-s));
    text-decoration: none;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast);

    &:hover {
      background-color: var(--button-bg-hover, var(--color-primary-alt));
    }

    &:active {
      transform: scale(0.98);
    }

    /* Variants */
    &[data-variant='secondary'] {
      --button-bg: transparent;
      --button-color: var(--color-primary);
      border-color: var(--color-primary);

      &:hover {
        --button-bg-hover: var(--color-primary);
        color: var(--color-light);
      }
    }

    &[data-variant='ghost'] {
      --button-bg: transparent;
      --button-color: var(--text-base);

      &:hover {
        --button-bg-hover: var(--color-light-2);
      }
    }

    &[data-variant='danger'] {
      --button-bg: var(--color-danger);

      &:hover {
        --button-bg-hover: var(--color-danger-alt);
      }
    }

    /* Sizes */
    &[data-size='s'] {
      --button-padding: var(--space-3xs) var(--space-xs);
      font-size: var(--step--2);
    }

    &[data-size='l'] {
      --button-padding: var(--space-xs) var(--space-m);
      font-size: var(--step-0);
    }

    /* Modifiers */
    &[data-full] {
      inline-size: 100%;
    }
  }

  /* ──────────────── Card ──────────────── */
  .card {
    background-color: var(--surface-raised);
    border: var(--border-thin);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-s);
    padding: var(--card-padding, var(--space-m));

    &[data-variant='highlight'] {
      border-color: var(--color-primary);
      border-width: 2px;
    }

    &[data-variant='flat'] {
      background-color: var(--color-light-2);
      border: none;
      box-shadow: none;

      &:hover {
        box-shadow: none;
      }
    }

    &[data-interactive] {
      cursor: pointer;
      transition:
        box-shadow var(--transition-base),
        border-color var(--transition-fast);

      &:hover {
        border-color: var(--color-primary);
        box-shadow: var(--shadow-m);
      }
    }
  }

  /* ──────────────── Tag / Badge ──────────────── */
  .tag {
    background-color: var(--tag-bg, var(--color-light-2));
    border-radius: var(--radius-full);
    color: var(--tag-color, var(--color-dark-2));
    display: inline-block;
    font-size: var(--step--2);
    font-weight: 600;
    line-height: 1;
    padding: var(--space-3xs) var(--space-2xs);

    &[data-variant='primary'] {
      --tag-bg: var(--color-primary);
      --tag-color: var(--color-light);
    }

    &[data-variant='success'] {
      --tag-bg: var(--color-secondary);
      --tag-color: var(--color-light);
    }

    &[data-variant='warning'] {
      --tag-bg: var(--color-accent);
      --tag-color: var(--color-dark);
    }

    &[data-variant='danger'] {
      --tag-bg: var(--color-danger);
      --tag-color: var(--color-light);
    }

    &[data-outline] {
      background-color: transparent;
      box-shadow: inset 0 0 0 1.5px currentColor;
    }
  }

  /* ──────────────── Skip Link ──────────────── */
  .skip-link {
    background: var(--color-dark);
    border-radius: var(--radius-m);
    color: var(--color-light);
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    position: absolute;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--transition-fast);
    z-index: var(--layer-overlay);

    &:focus {
      transform: translateY(0);
    }
  }

  /* ──────────────── Form: Input ──────────────── */
  .input {
    background-color: var(--surface-raised);
    border: 2px solid var(--color-light-3);
    border-radius: var(--radius-m);
    color: var(--text-base);
    display: block;
    font-size: var(--step-0);
    inline-size: 100%;
    line-height: 1.5;
    padding: var(--input-padding, var(--space-2xs) var(--space-xs));
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);

    &::placeholder {
      color: var(--color-mid);
    }

    &:hover {
      border-color: var(--color-mid);
    }

    &:focus {
      border-color: var(--color-primary);
      box-shadow: 0 0 0 3px var(--color-primary-light);
      outline: none;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }

    /* Validation states */
    &[data-validation='error'],
    &:user-invalid {
      border-color: var(--color-danger);

      &:focus {
        box-shadow: 0 0 0 3px var(--color-danger-light);
      }
    }

    &[data-validation='valid'] {
      border-color: var(--color-secondary);

      &:focus {
        box-shadow: 0 0 0 3px var(--color-secondary-light);
      }
    }

    /* Sizes */
    &[data-size='s'] {
      --input-padding: var(--space-3xs) var(--space-2xs);
      font-size: var(--step--1);
    }

    &[data-size='l'] {
      --input-padding: var(--space-xs) var(--space-s);
      font-size: var(--step-1);
    }
  }

  textarea.input {
    min-block-size: 6rem;
    resize: vertical;
  }

  select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394928d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right var(--space-xs) center;
    background-repeat: no-repeat;
    padding-inline-end: var(--space-l);
  }

  /* ──────────────── Form: Label, Field, Fieldset ──────────────── */
  .label {
    color: var(--text-base);
    display: block;
    font-size: var(--step--1);
    font-weight: 600;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .field-error {
    color: var(--color-danger);
    font-size: var(--step--2);
  }

  .field-hint {
    color: var(--text-muted);
    font-size: var(--step--2);
  }

  .fieldset {
    border: var(--border-thin);
    border-radius: var(--radius-m);
    padding: var(--space-m);

    & > legend {
      font-size: var(--step--1);
      font-weight: 600;
      padding-inline: var(--space-2xs);
    }
  }

  /* ──────────────── Form: Checkbox / Radio ──────────────── */
  .check {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--step-0);
    gap: var(--space-2xs);

    & > input[type='checkbox'],
    & > input[type='radio'] {
      -webkit-appearance: none;
      appearance: none;
      background-color: var(--surface-raised);
      block-size: 1.25em;
      border: 2px solid var(--color-light-3);
      cursor: pointer;
      display: grid;
      flex-shrink: 0;
      inline-size: 1.25em;
      place-content: center;
      transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast);
    }

    & > input[type='checkbox'] {
      border-radius: var(--radius-s);
    }

    & > input[type='radio'] {
      border-radius: 50%;
    }

    & > input:hover {
      border-color: var(--color-primary);
    }

    & > input:checked {
      background-color: var(--color-primary);
      border-color: var(--color-primary);
    }

    & > input[type='checkbox']:checked::before {
      block-size: 0.35em;
      border-block-end: 2px solid #fff;
      border-inline-start: 2px solid #fff;
      content: '';
      inline-size: 0.6em;
      transform: rotate(-45deg) translateY(-0.05em);
    }

    & > input[type='radio']:checked::before {
      background-color: #fff;
      block-size: 0.5em;
      border-radius: 50%;
      content: '';
      inline-size: 0.5em;
    }

    & > input:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }

    & > input:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  /* ──────────────── Form: Input Group ──────────────── */
  .input-group {
    align-items: stretch;
    display: flex;

    & > .input {
      flex: 1;
      min-inline-size: 0;
    }

    & > .input:not(:first-child) {
      border-end-start-radius: 0;
      border-start-start-radius: 0;
    }

    & > .input:not(:last-child) {
      border-end-end-radius: 0;
      border-inline-end: none;
      border-start-end-radius: 0;
    }
  }

  .input-addon {
    align-items: center;
    background-color: var(--color-light-2);
    border: 2px solid var(--color-light-3);
    color: var(--text-muted);
    display: flex;
    font-size: var(--step--1);
    padding-inline: var(--space-xs);
    white-space: nowrap;

    &:first-child {
      border-end-start-radius: var(--radius-m);
      border-inline-end: none;
      border-start-start-radius: var(--radius-m);
    }

    &:last-child {
      border-end-end-radius: var(--radius-m);
      border-inline-start: none;
      border-start-end-radius: var(--radius-m);
    }
  }

  /* ──────────────── Breadcrumb ──────────────── */
  .breadcrumb {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--step--1);
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      max-inline-size: none;
    }

    & > li + li::before {
      color: var(--text-muted);
      content: '/';
      margin-inline-end: var(--space-3xs);
    }

    & a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color var(--transition-fast);

      &:hover {
        color: var(--color-primary);
      }
    }

    & [aria-current='page'] {
      color: var(--text-base);
      font-weight: 500;
    }
  }

  /* ──────────────── Table ──────────────── */
  .table-wrap {
    border: var(--border-thin);
    border-radius: var(--radius-m);
    overflow-x: auto;
  }

  .table {
    font-size: var(--step--1);
    inline-size: 100%;
    text-align: start;

    & th,
    & td {
      border-block-end: var(--border-thin);
      padding: var(--space-2xs) var(--space-xs);
      vertical-align: top;
    }

    & th {
      background-color: var(--color-light-2);
      font-weight: 600;
      text-align: inherit;
      white-space: nowrap;
    }

    & tbody tr:last-child td {
      border-block-end: none;
    }

    & tbody tr:hover {
      background-color: var(--color-light-2);
    }

    /* Table exceptions */
    &[data-striped] tbody tr:nth-child(even) {
      background-color: var(--color-light-2);
    }

    &[data-compact] th,
    &[data-compact] td {
      font-size: var(--step--2);
      padding: var(--space-3xs) var(--space-2xs);
    }
  }

  /* ──────────────── Dialog / Modal ──────────────── */
  .dialog {
    &::backdrop {
      backdrop-filter: blur(4px);
      background-color: hsl(0 0% 0% / 0.5);
    }

    &[open] {
      animation: dialog-enter var(--transition-base) ease;
      background-color: var(--surface-raised);
      border-radius: var(--radius-l);
      box-shadow: var(--shadow-l);
      display: flex;
      flex-direction: column;
      max-block-size: min(85vh, 40rem);
      max-inline-size: min(90vw, 32rem);
    }

    & .dialog-header {
      align-items: center;
      border-block-end: var(--border-thin);
      display: flex;
      justify-content: space-between;
      padding: var(--space-s) var(--space-m);
    }

    & .dialog-body {
      overflow-y: auto;
      padding: var(--space-m);
    }

    & .dialog-footer {
      border-block-start: var(--border-thin);
      display: flex;
      gap: var(--space-2xs);
      justify-content: flex-end;
      padding: var(--space-s) var(--space-m);
    }

    & .dialog-close {
      background: none;
      block-size: 2rem;
      border: none;
      border-radius: var(--radius-s);
      color: var(--text-muted);
      cursor: pointer;
      display: grid;
      font-size: 1.25rem;
      inline-size: 2rem;
      padding: 0;
      place-content: center;
      transition:
        background-color var(--transition-fast),
        color var(--transition-fast);

      &:hover {
        background-color: var(--color-light-2);
        color: var(--text-base);
      }
    }
  }

  @keyframes dialog-enter {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(0.5rem);
    }
  }

  /* ──────────────── Skeleton / Placeholder ──────────────── */
  .skeleton {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background: linear-gradient(90deg, var(--color-light-2) 0%, var(--color-light-3) 40%, var(--color-light-2) 80%);
    background-size: 200% 100%;
    border-radius: var(--radius-s);
  }

  .skeleton-circle {
    border-radius: 50%;
  }

  @keyframes skeleton-pulse {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* ──────────────── Frame Exceptions ──────────────── */
  .frame[data-ratio='1/1'] {
    --frame-ratio: 1 / 1;
  }
  .frame[data-ratio='3/2'] {
    --frame-ratio: 3 / 2;
  }
  .frame[data-ratio='3/4'] {
    --frame-ratio: 3 / 4;
  }
  .frame[data-ratio='4/3'] {
    --frame-ratio: 4 / 3;
  }
  .frame[data-ratio='21/9'] {
    --frame-ratio: 21 / 9;
  }

  /* ──────────────── Generic State Exceptions ──────────────── */
  [data-state='inactive'] {
    opacity: 0.5;
    pointer-events: none;
  }

  [data-state='loading'] {
    color: transparent !important;
    position: relative;

    &::after {
      animation: spin 0.6s linear infinite;
      block-size: 1.25em;
      border: 2px solid var(--color-mid);
      border-block-start-color: var(--color-primary);
      border-radius: 50%;
      content: '';
      inline-size: 1.25em;
      inset: 0;
      margin: auto;
      position: absolute;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  [data-visible='false'] {
    display: none;
  }

  /* ──────────────── Prose — rich content styling ──────────────── */
  .prose blockquote {
    border-inline-start: 3px solid var(--color-primary);
    color: var(--text-muted);
    font-style: italic;
    padding-block: var(--space-2xs);
    padding-inline-start: var(--space-s);

    & > * + * {
      margin-block-start: 0.5em;
    }
  }

  .prose figure {
    max-inline-size: 100%;
  }

  .prose figcaption {
    color: var(--text-muted);
    font-size: var(--step--1);
    margin-block-start: var(--space-2xs);
  }

  .prose :is(ul, ol) {
    padding-inline-start: 1.5em;
  }
  .prose :is(ul, ol) > li + li {
    margin-block-start: 0.35em;
  }

  .prose hr {
    background-color: var(--color-light-2);
    block-size: 1px;
    border: none;
    margin-block: var(--space-m);
  }

  .prose img {
    border-radius: var(--radius-m);
  }

  .prose a {
    color: var(--color-primary);
    text-decoration-thickness: 1px;
    transition: color var(--transition-fast);

    &:hover {
      color: var(--color-primary-alt);
    }
  }

  .prose pre {
    background-color: var(--color-dark);
    border-radius: var(--radius-m);
    color: var(--color-light);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    overflow-x: auto;
    padding: var(--space-s);
  }

  .prose code {
    background-color: var(--color-light-2);
    border-radius: var(--radius-s);
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
  }

  .prose pre code {
    background: transparent;
    padding: 0;
  }
} /* end @layer block */

/* ═══════════════════════════════════════════════════════
   5. GROUPING LAYER — Contextual theming
   ═══════════════════════════════════════════════════════ */

@layer grouping {
  /* Dark theme — explicit toggle via [data-theme="dark"] on any element.
   Values come from --dark-* source tokens in :root. */
  [data-theme='dark'] {
    --border-mid: var(--dark-border-mid);
    --border-thin: var(--dark-border-thin);
    --color-light-2: var(--dark-color-light-2);
    --color-light-3: var(--dark-color-light-3);
    --color-primary-light: var(--dark-color-primary-light);
    --shadow-l: var(--dark-shadow-l);
    --shadow-m: var(--dark-shadow-m);
    --shadow-s: var(--dark-shadow-s);
    --surface-base: var(--dark-surface-base);
    --surface-raised: var(--dark-surface-raised);
    --text-base: var(--dark-text-base);
    --text-muted: var(--dark-text-muted);

    background-color: var(--surface-base);
    color: var(--text-base);
  }

  /* Dark theme — automatic via OS preference (only when no explicit theme is set).
   Same --dark-* source tokens, zero duplication of values. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      --border-mid: var(--dark-border-mid);
      --border-thin: var(--dark-border-thin);
      --color-light-2: var(--dark-color-light-2);
      --color-light-3: var(--dark-color-light-3);
      --color-primary-light: var(--dark-color-primary-light);
      --shadow-l: var(--dark-shadow-l);
      --shadow-m: var(--dark-shadow-m);
      --shadow-s: var(--dark-shadow-s);
      --surface-base: var(--dark-surface-base);
      --surface-raised: var(--dark-surface-raised);
      --text-base: var(--dark-text-base);
      --text-muted: var(--dark-text-muted);

      background-color: var(--surface-base);
      color: var(--text-base);
    }
  }

  [data-theme='brand'] {
    --surface-base: var(--color-primary);
    --surface-raised: var(--color-primary-alt);
    --text-base: var(--color-light);
    --text-muted: hsl(0 0% 100% / 0.7);

    background-color: var(--surface-base);
    color: var(--text-base);
  }

  [data-theme='muted'] {
    --surface-base: var(--color-light-2);
    --surface-raised: var(--surface-base);

    background-color: var(--surface-base);
  }
} /* end @layer grouping */

/* ═══════════════════════════════════════════════════════
   6. ACCESSIBILITY — Motion, contrast
   (Unlayered — always wins over layered styles)
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border-mid: 3px solid var(--text-base);
    --border-thin: 2px solid var(--text-base);
  }

  .button {
    border-width: 3px;
  }
  .input {
    border-width: 3px;
  }
}

@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
  }

  .input {
    border: 2px solid ButtonText;
  }

  .card {
    border: 2px solid CanvasText;
  }

  .tag {
    border: 1px solid CanvasText;
  }

  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ═══════════════════════════════════════════════════════
   7. PRINT STYLES
   ═══════════════════════════════════════════════════════ */

@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .button[data-variant='ghost'],
  .dialog,
  .skeleton,
  .skip-link {
    display: none !important;
  }

  .region {
    padding-block: 1rem;
  }

  .wrapper {
    max-inline-size: none;
    padding: 0;
  }

  .shadow-l,
  .shadow-m,
  .shadow-s {
    box-shadow: none;
  }

  .card {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }

  .tag {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .flow a[href^='http']::after {
    color: #666;
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    word-break: break-all;
  }

  .table tr {
    break-inside: avoid;
  }
  img,
  .frame {
    break-inside: avoid;
  }
}