/*!
 * Purissimo Design System
 * "Less is pure"
 *
 * Version: 1.0.0
 * Author: Rafael Craice
 * License: MIT
 * Repository: https://github.com/craice/purissimo
 *
 * A pure HTML5/CSS design system inspired by Antarctic ice.
 * Zero JavaScript. Maximum accessibility.
 * Created in collaboration with AI, optimized for AI.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@layer reset, tokens, base, components, utilities;

/* ==========================================================================
   Reset Layer
   ========================================================================== */

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

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    line-height: var(--line-height-base);
  }

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

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

  button {
    cursor: pointer;
    background: none;
    border: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  fieldset {
    border: none;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  p {
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   Tokens Layer
   ========================================================================== */

@layer tokens {
  :root {
    /* ---- Color Palette ---- */

    /* Base */
    --pure-white: #FFFFFF;
    --ice-white: #F8FAFB;
    --frost: #EEF3F6;
    --mist: #E1E8ED;

    /* Grays (cool-toned) */
    --gray-100: #D4DCE2;
    --gray-200: #B8C4CC;
    --gray-300: #9AA8B2;
    --gray-400: #7A8A96;
    --gray-500: #5C6B76;
    --gray-600: #465058;
    --gray-700: #323A40;
    --gray-800: #1F252A;
    --gray-900: #0F1214;

    /* Accent (glacial) */
    --glacial-50: #F0F9FA;
    --glacial-100: #D6F0F2;
    --glacial-200: #B0E2E8;
    --glacial-300: #7ACDD6;
    --glacial-400: #4AB5C2;
    --glacial-500: #2E9CAA;
    --glacial-600: #257D8A;
    --glacial-700: #1E6370;
    --glacial-800: #184F5A;
    --glacial-900: #123E47;

    /* Semantic Colors */
    --color-text-primary: var(--gray-800);
    --color-text-secondary: var(--gray-500);
    --color-text-muted: var(--gray-400);
    --color-text-inverse: var(--pure-white);

    --color-bg-primary: var(--pure-white);
    --color-bg-secondary: var(--ice-white);
    --color-bg-tertiary: var(--frost);

    --color-border: var(--mist);
    --color-border-light: var(--frost);

    --color-action: var(--glacial-500);
    --color-action-hover: var(--glacial-600);
    --color-action-active: var(--glacial-700);

    --color-success: #34A86C;
    --color-warning: #D4A520;
    --color-error: #D64545;
    --color-info: var(--glacial-500);

    /* Transparencies */
    --alpha-light: rgba(255, 255, 255, 0.8);
    --alpha-overlay: rgba(15, 18, 20, 0.5);
    --alpha-frost: rgba(238, 243, 246, 0.6);

    /* ---- Typography ---- */

    /* Font Family */
    --font-family-base: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Font Sizes (base 16px) */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: 3rem;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;

    /* ---- Spacing (base-4) ---- */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ---- Borders & Radius ---- */

    /* Border Width */
    --border-width-thin: 1px;
    --border-width-base: 1.5px;
    --border-width-thick: 2px;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-base: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(15, 18, 20, 0.04);
    --shadow-base: 0 2px 8px rgba(15, 18, 20, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 18, 20, 0.08);
    --shadow-lg: 0 8px 32px rgba(15, 18, 20, 0.1);
    --shadow-xl: 0 16px 48px rgba(15, 18, 20, 0.12);

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

/* ==========================================================================
   Base Layer
   ========================================================================== */

@layer base {

  /* ---- 2.1 Typography ---- */

  body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    letter-spacing: var(--letter-spacing-normal);
  }

  h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
  }

  h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
  }

  h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
  }

  h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
  }

  p + p {
    margin-top: var(--space-4);
  }

  a {
    color: var(--color-action);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-action-hover);
  }

  a:active {
    color: var(--color-action-active);
  }

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

  em,
  i {
    font-style: italic;
  }

  small {
    font-size: var(--font-size-sm);
  }

  mark {
    background-color: var(--glacial-100);
    color: var(--color-text-primary);
    padding-inline: var(--space-1);
    border-radius: var(--radius-sm);
  }

  blockquote {
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-action);
    color: var(--color-text-secondary);
    font-style: italic;
  }

  /* ---- 2.2 Lists ---- */

  ul,
  ol {
    padding-left: var(--space-6);
  }

  ul {
    list-style: disc;
  }

  ol {
    list-style: decimal;
  }

  li + li {
    margin-top: var(--space-1);
  }

  li > ul,
  li > ol {
    margin-top: var(--space-1);
  }

  dt {
    font-weight: var(--font-weight-semibold);
  }

  dd {
    margin-left: var(--space-4);
    color: var(--color-text-secondary);
  }

  dd + dt {
    margin-top: var(--space-2);
  }

  /* ---- 2.3 Code ---- */

  code {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background-color: var(--color-bg-tertiary);
    color: var(--glacial-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }

  pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    background-color: var(--gray-800);
    color: var(--frost);
    padding: var(--space-4);
    border-radius: var(--radius-base);
    overflow-x: auto;
    line-height: var(--line-height-relaxed);
  }

  pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
  }

  kbd {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    padding: var(--space-1) var(--space-2);
    border: var(--border-width-thin) solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--color-border);
  }

  /* ---- 2.4 Tables ---- */

  table {
    width: 100%;
    text-align: left;
  }

  th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-thick) solid var(--color-border);
  }

  td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    color: var(--color-text-secondary);
  }

  /* ---- 2.5 Form Elements ---- */

  label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"] {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="password"]:hover,
  input[type="search"]:hover,
  input[type="url"]:hover,
  input[type="tel"]:hover,
  input[type="number"]:hover,
  input[type="date"]:hover,
  input[type="time"]:hover,
  input[type="datetime-local"]:hover {
    border-color: var(--gray-300);
  }

  textarea {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-base);
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  textarea:hover {
    border-color: var(--gray-300);
  }

  select {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6B76' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-10);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  select:hover {
    border-color: var(--gray-300);
  }

  legend {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding-bottom: var(--space-2);
  }

  /* ---- 2.6 Media ---- */

  img {
    height: auto;
  }

  figure {
    display: block;
  }

  figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
  }

  /* ---- 2.7 Divider ---- */

  hr {
    border: none;
    height: var(--border-width-thin);
    background-color: var(--color-border);
    margin-block: var(--space-6);
  }

  /* ---- 2.8 Focus States ---- */

  :focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: none;
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px rgba(46, 156, 170, 0.15);
  }
}

/* ==========================================================================
   Components Layer
   ========================================================================== */

@layer components {

  /* =====================================================
     3.1 Heading Classes
     ===================================================== */

  .heading-1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  .heading-2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  .heading-3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
  }

  .heading-4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
  }

  .heading-5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
  }

  .heading-6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
  }

  /* =====================================================
     3.2 Text Size Classes
     ===================================================== */

  .text-lg {
    font-size: var(--font-size-lg);
  }

  .text-sm {
    font-size: var(--font-size-sm);
  }

  .text-xs {
    font-size: var(--font-size-xs);
  }

  /* =====================================================
     3.3 Text Utility Classes
     ===================================================== */

  .text-muted {
    color: var(--color-text-muted);
  }

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

  .font-light {
    font-weight: var(--font-weight-light);
  }

  .font-regular {
    font-weight: var(--font-weight-regular);
  }

  .font-medium {
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    font-weight: var(--font-weight-semibold);
  }

  .font-bold {
    font-weight: var(--font-weight-bold);
  }

  /* =====================================================
     3.4 Base Button
     ===================================================== */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-base);
    text-decoration: none;
    border: var(--border-width-base) solid transparent;
    border-radius: var(--radius-base);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast);
  }

  /* =====================================================
     3.5 Button Variants
     ===================================================== */

  .btn--primary {
    background-color: var(--color-action);
    color: var(--color-text-inverse);
    border-color: var(--color-action);
  }

  .btn--secondary {
    background-color: transparent;
    color: var(--color-action);
    border-color: var(--color-action);
  }

  .btn--ghost {
    background-color: transparent;
    color: var(--color-action);
    border-color: transparent;
  }

  /* =====================================================
     3.6 Button Sizes
     ===================================================== */

  .btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-sm);
  }

  .btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-lg);
  }

  /* =====================================================
     3.7 Button States
     ===================================================== */

  .btn--primary:hover {
    background-color: var(--color-action-hover);
    border-color: var(--color-action-hover);
  }

  .btn--primary:active {
    background-color: var(--color-action-active);
    border-color: var(--color-action-active);
  }

  .btn--secondary:hover {
    background-color: var(--glacial-50);
    border-color: var(--color-action-hover);
    color: var(--color-action-hover);
  }

  .btn--secondary:active {
    background-color: var(--glacial-100);
    border-color: var(--color-action-active);
    color: var(--color-action-active);
  }

  .btn--ghost:hover {
    background-color: var(--glacial-50);
    color: var(--color-action-hover);
  }

  .btn--ghost:active {
    background-color: var(--glacial-100);
    color: var(--color-action-active);
  }

  .btn:focus-visible {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
  }

  .btn:disabled,
  .btn[disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* =====================================================
     3.8 Link Classes
     ===================================================== */

  .link {
    color: var(--color-action);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
  }

  .link:hover {
    color: var(--color-action-hover);
  }

  .link:active {
    color: var(--color-action-active);
  }

  .link--subtle {
    color: var(--color-text-secondary);
    text-decoration: none;
  }

  .link--subtle:hover {
    color: var(--color-action);
    text-decoration: underline;
  }

  .link--nav {
    color: var(--color-text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
  }

  .link--nav:hover {
    color: var(--color-action);
  }

  .link--nav[aria-current="page"] {
    color: var(--color-action);
  }

  /* =====================================================
     3.9 Form Field Container
     ===================================================== */

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

  .form-field + .form-field {
    margin-top: var(--space-4);
  }

  /* =====================================================
     3.10 Form Label
     ===================================================== */

  .form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
  }

  /* =====================================================
     3.11 Form Input
     ===================================================== */

  .form-input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .form-input::placeholder {
    color: var(--color-text-muted);
  }

  .form-input:hover {
    border-color: var(--gray-300);
  }

  .form-input:focus-visible {
    outline: none;
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px rgba(46, 156, 170, 0.15);
  }

  /* =====================================================
     3.12 Form Textarea
     ===================================================== */

  .form-textarea {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-base);
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .form-textarea::placeholder {
    color: var(--color-text-muted);
  }

  .form-textarea:hover {
    border-color: var(--gray-300);
  }

  .form-textarea:focus-visible {
    outline: none;
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px rgba(46, 156, 170, 0.15);
  }

  /* =====================================================
     3.13 Form Select
     ===================================================== */

  .form-select {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    padding-right: var(--space-10);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-base);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235C6B76' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }

  .form-select:hover {
    border-color: var(--gray-300);
  }

  .form-select:focus-visible {
    outline: none;
    border-color: var(--color-action);
    box-shadow: 0 0 0 3px rgba(46, 156, 170, 0.15);
  }

  /* =====================================================
     3.14 Form Hint
     ===================================================== */

  .form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  /* =====================================================
     3.15 Form Validation States
     ===================================================== */

  .form-input:user-valid:not(:placeholder-shown) {
    border-color: var(--color-success);
  }

  .form-input:user-invalid:not(:placeholder-shown) {
    border-color: var(--color-error);
  }

  .form-input:user-valid:not(:placeholder-shown):focus-visible {
    box-shadow: 0 0 0 3px rgba(52, 168, 108, 0.15);
  }

  .form-input:user-invalid:not(:placeholder-shown):focus-visible {
    box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.15);
  }

  .form-textarea:user-valid:not(:placeholder-shown) {
    border-color: var(--color-success);
  }

  .form-textarea:user-invalid:not(:placeholder-shown) {
    border-color: var(--color-error);
  }

  /* =====================================================
     3.16 Checkbox
     ===================================================== */

  .form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
  }

  .form-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .form-checkbox__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg-primary);
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast);
  }

  .form-checkbox input[type="checkbox"]:checked + .form-checkbox__indicator {
    background-color: var(--color-action);
    border-color: var(--color-action);
  }

  .form-checkbox input[type="checkbox"]:checked + .form-checkbox__indicator::after {
    content: '';
    display: block;
    width: 0.375rem;
    height: 0.625rem;
    border: solid var(--color-text-inverse);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
  }

  .form-checkbox input[type="checkbox"]:focus-visible + .form-checkbox__indicator {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
  }

  .form-checkbox:hover .form-checkbox__indicator {
    border-color: var(--gray-300);
  }

  .form-checkbox__label {
    color: var(--color-text-primary);
  }

  /* =====================================================
     3.17 Radio
     ===================================================== */

  .form-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
  }

  .form-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .form-radio__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border: var(--border-width-base) solid var(--color-border);
    border-radius: var(--radius-full);
    background-color: var(--color-bg-primary);
    transition: border-color var(--transition-fast);
  }

  .form-radio input[type="radio"]:checked + .form-radio__indicator {
    border-color: var(--color-action);
  }

  .form-radio input[type="radio"]:checked + .form-radio__indicator::after {
    content: '';
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-full);
    background-color: var(--color-action);
  }

  .form-radio input[type="radio"]:focus-visible + .form-radio__indicator {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
  }

  .form-radio:hover .form-radio__indicator {
    border-color: var(--gray-300);
  }

  .form-radio__label {
    color: var(--color-text-primary);
  }

  /* =====================================================
     3.18 Toggle / Switch
     ===================================================== */

  .form-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
  }

  .form-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .form-toggle__track {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
  }

  .form-toggle__track::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--pure-white);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
  }

  .form-toggle input[type="checkbox"]:checked + .form-toggle__track {
    background-color: var(--color-action);
  }

  .form-toggle input[type="checkbox"]:checked + .form-toggle__track::after {
    transform: translateX(1.25rem);
  }

  .form-toggle input[type="checkbox"]:focus-visible + .form-toggle__track {
    outline: 2px solid var(--color-action);
    outline-offset: 2px;
  }

  .form-toggle:hover .form-toggle__track {
    background-color: var(--gray-300);
  }

  .form-toggle input[type="checkbox"]:checked + .form-toggle__track:hover {
    background-color: var(--color-action-hover);
  }

  .form-toggle__label {
    color: var(--color-text-primary);
  }

  /* =====================================================
     3.19 Fieldset & Legend
     ===================================================== */

  .form-fieldset {
    border: none;
    padding: 0;
  }

  .form-fieldset > .form-radio + .form-radio,
  .form-fieldset > .form-checkbox + .form-checkbox {
    margin-top: var(--space-2);
  }

  .form-legend {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding-bottom: var(--space-2);
  }

  /* =====================================================
     3.20 Table Component
     ===================================================== */

  .table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
  }

  .table th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-thick) solid var(--color-border);
  }

  .table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    color: var(--color-text-secondary);
  }

  /* =====================================================
     3.21 Table Variants
     ===================================================== */

  .table--striped tbody tr:nth-child(even) {
    background-color: var(--color-bg-secondary);
  }

  .table--bordered th,
  .table--bordered td {
    border: var(--border-width-thin) solid var(--color-border);
  }

  /* =====================================================
     3.22 Card Component
     ===================================================== */

  .card {
    background-color: var(--color-bg-primary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
  }

  .card__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
  }

  .card__body {
    padding: var(--space-4) var(--space-5);
  }

  .card__footer {
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-width-thin) solid var(--color-border-light);
  }

  /* =====================================================
     3.23 Card Variants
     ===================================================== */

  .card--elevated {
    border-color: transparent;
    box-shadow: var(--shadow-md);
  }

  .card--outlined {
    border-color: var(--color-border);
    box-shadow: none;
  }

  .card--glass {
    background-color: var(--alpha-frost);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.3);
  }

  /* =====================================================
     3.24 Alert Component
     ===================================================== */

  .alert {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-base);
    border: var(--border-width-thin) solid var(--color-border);
    background-color: var(--color-bg-secondary);
  }

  .alert__icon {
    flex-shrink: 0;
    line-height: var(--line-height-base);
  }

  .alert__message {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
  }

  /* =====================================================
     3.25 Alert Variants
     ===================================================== */

  .alert--info {
    background-color: var(--glacial-50);
    border-color: var(--glacial-200);
    color: var(--glacial-800);
  }

  .alert--info .alert__icon {
    color: var(--glacial-600);
  }

  .alert--success {
    background-color: #f0faf4;
    border-color: #b0e2c8;
    color: #1a5c38;
  }

  .alert--success .alert__icon {
    color: var(--color-success);
  }

  .alert--warning {
    background-color: #fdf9ee;
    border-color: #e8d48b;
    color: #6b5310;
  }

  .alert--warning .alert__icon {
    color: var(--color-warning);
  }

  .alert--error {
    background-color: #fdf0f0;
    border-color: #e8a8a8;
    color: #7a1f1f;
  }

  .alert--error .alert__icon {
    color: var(--color-error);
  }

  /* =====================================================
     3.26 Navbar
     ===================================================== */

  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
  }

  .navbar__brand {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    text-decoration: none;
    letter-spacing: var(--letter-spacing-tight);
  }

  .navbar__brand:hover {
    color: var(--color-text-primary);
  }

  .navbar__menu {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    padding-left: 0;
  }

  .navbar__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-base);
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }

  .navbar__link:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-tertiary);
  }

  .navbar__link[aria-current="page"] {
    color: var(--color-action);
    background-color: var(--glacial-50);
  }

  /* =====================================================
     3.27 Breadcrumb
     ===================================================== */

  .breadcrumb ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    list-style: none;
    padding-left: 0;
    font-size: var(--font-size-sm);
  }

  .breadcrumb li + li::before {
    content: '/';
    margin-right: var(--space-1);
    color: var(--color-text-muted);
  }

  .breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .breadcrumb a:hover {
    color: var(--color-action);
    text-decoration: underline;
  }

  .breadcrumb [aria-current="page"] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
  }

  /* =====================================================
     3.28 Accordion
     ===================================================== */

  .accordion {
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .accordion__item {
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
  }

  .accordion__item:last-child {
    border-bottom: none;
  }

  .accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    list-style: none;
  }

  .accordion__header::-webkit-details-marker {
    display: none;
  }

  .accordion__header::after {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    flex-shrink: 0;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
  }

  .accordion__item[open] > .accordion__header::after {
    transform: rotate(-135deg);
  }

  .accordion__header:hover {
    background-color: var(--color-bg-secondary);
  }

  .accordion__content {
    padding: 0 var(--space-4) var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  /* =====================================================
     3.29 Tabs
     ===================================================== */

  .tabs {
    display: flex;
    flex-wrap: wrap;
  }

  .tabs__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .tabs__label {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
  }

  .tabs__label:hover {
    color: var(--color-text-primary);
  }

  .tabs__input:checked + .tabs__label {
    color: var(--color-action);
    border-bottom-color: var(--color-action);
  }

  .tabs__input:focus-visible + .tabs__label {
    outline: 2px solid var(--color-action);
    outline-offset: -2px;
  }

  .tabs__panels {
    width: 100%;
    border-top: var(--border-width-thin) solid var(--color-border-light);
  }

  .tabs__panel {
    display: none;
    padding: var(--space-4);
    color: var(--color-text-secondary);
  }

  /* Show panel when its corresponding radio is checked */
  .tabs__input:nth-of-type(1):checked ~ .tabs__panels .tabs__panel:nth-child(1),
  .tabs__input:nth-of-type(2):checked ~ .tabs__panels .tabs__panel:nth-child(2),
  .tabs__input:nth-of-type(3):checked ~ .tabs__panels .tabs__panel:nth-child(3),
  .tabs__input:nth-of-type(4):checked ~ .tabs__panels .tabs__panel:nth-child(4),
  .tabs__input:nth-of-type(5):checked ~ .tabs__panels .tabs__panel:nth-child(5) {
    display: block;
  }

  /* =====================================================
     3.30 Modal
     ===================================================== */

  .modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .modal:target {
    opacity: 1;
    visibility: visible;
  }

  .modal__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--alpha-overlay);
  }

  .modal__content {
    position: relative;
    width: 90%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
  }

  .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
  }

  .modal__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }

  .modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--font-size-xl);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
  }

  .modal__close:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-tertiary);
  }

  .modal__body {
    padding: var(--space-4) var(--space-5);
    color: var(--color-text-secondary);
  }

  .modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: var(--border-width-thin) solid var(--color-border-light);
  }

  /* =====================================================
     3.31 Tooltip
     ===================================================== */

  .tooltip {
    position: relative;
    display: inline-block;
  }

  .tooltip__content {
    position: absolute;
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-inverse);
    background-color: var(--gray-800);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
  }

  .tooltip__content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--gray-800);
  }

  .tooltip:hover .tooltip__content,
  .tooltip:focus-within .tooltip__content {
    opacity: 1;
  }

  /* =====================================================
     3.32 List Classes
     ===================================================== */

  .list {
    padding-left: var(--space-6);
    list-style: disc;
  }

  .list li + li {
    margin-top: var(--space-1);
  }

  .list--ordered {
    list-style: decimal;
  }

  .list--none {
    padding-left: 0;
    list-style: none;
  }

  /* =====================================================
     3.33 Badge / Tag
     ===================================================== */

  .badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
  }

  .badge--primary {
    color: var(--color-text-inverse);
    background-color: var(--color-action);
  }

  .badge--success {
    color: #1a5c38;
    background-color: #d4f5e2;
  }

  .badge--warning {
    color: #6b5310;
    background-color: #faf0d1;
  }

  .badge--error {
    color: #7a1f1f;
    background-color: #f5d4d4;
  }

  /* =====================================================
     3.34 Divider Classes
     ===================================================== */

  .divider {
    border: none;
    height: var(--border-width-thin);
    background-color: var(--color-border);
    margin-block: var(--space-6);
  }

  .divider--subtle {
    background-color: var(--color-border-light);
  }

  /* =====================================================
     3.35 Code Block
     ===================================================== */

  .code {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background-color: var(--color-bg-tertiary);
    color: var(--glacial-700);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }

  .code-block {
    display: block;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    background-color: var(--gray-800);
    color: var(--frost);
    padding: var(--space-4);
    border-radius: var(--radius-base);
    overflow-x: auto;
    line-height: var(--line-height-relaxed);
  }

  .code-block code {
    background-color: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
  }

  /* =====================================================
     3.36 Blockquote Component
     ===================================================== */

  .blockquote {
    padding-left: var(--space-5);
    border-left: 3px solid var(--color-action);
    font-style: italic;
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
  }

  .blockquote p {
    margin-bottom: var(--space-2);
  }

  .blockquote__footer {
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--color-text-muted);
  }

  .blockquote__footer cite {
    font-weight: var(--font-weight-medium);
    font-style: normal;
  }

  /* =====================================================
     3.37 Figure Component
     ===================================================== */

  .figure {
    display: block;
  }

  .figure__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-base);
  }

  .figure__caption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
  }
}

/* ==========================================================================
   Utilities Layer
   ========================================================================== */

@layer utilities {

  /* =====================================================
     4.1 Container
     ===================================================== */

  .container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  /* =====================================================
     4.2 Container Variants
     ===================================================== */

  .container--narrow {
    max-width: 800px;
  }

  .container--wide {
    max-width: 1400px;
  }

  /* =====================================================
     4.3 Grid Container
     ===================================================== */

  .grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(12, 1fr);
  }

  /* =====================================================
     4.4 Column Spans
     ===================================================== */

  .col-1  { grid-column: span 1; }
  .col-2  { grid-column: span 2; }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-9  { grid-column: span 9; }
  .col-10 { grid-column: span 10; }
  .col-11 { grid-column: span 11; }
  .col-12 { grid-column: span 12; }

  /* =====================================================
     4.5–4.6 Responsive Breakpoints & Column Classes
     ===================================================== */

  @media (min-width: 640px) {
    .sm\:col-1  { grid-column: span 1; }
    .sm\:col-2  { grid-column: span 2; }
    .sm\:col-3  { grid-column: span 3; }
    .sm\:col-4  { grid-column: span 4; }
    .sm\:col-5  { grid-column: span 5; }
    .sm\:col-6  { grid-column: span 6; }
    .sm\:col-7  { grid-column: span 7; }
    .sm\:col-8  { grid-column: span 8; }
    .sm\:col-9  { grid-column: span 9; }
    .sm\:col-10 { grid-column: span 10; }
    .sm\:col-11 { grid-column: span 11; }
    .sm\:col-12 { grid-column: span 12; }
  }

  @media (min-width: 768px) {
    .md\:col-1  { grid-column: span 1; }
    .md\:col-2  { grid-column: span 2; }
    .md\:col-3  { grid-column: span 3; }
    .md\:col-4  { grid-column: span 4; }
    .md\:col-5  { grid-column: span 5; }
    .md\:col-6  { grid-column: span 6; }
    .md\:col-7  { grid-column: span 7; }
    .md\:col-8  { grid-column: span 8; }
    .md\:col-9  { grid-column: span 9; }
    .md\:col-10 { grid-column: span 10; }
    .md\:col-11 { grid-column: span 11; }
    .md\:col-12 { grid-column: span 12; }
  }

  @media (min-width: 1024px) {
    .lg\:col-1  { grid-column: span 1; }
    .lg\:col-2  { grid-column: span 2; }
    .lg\:col-3  { grid-column: span 3; }
    .lg\:col-4  { grid-column: span 4; }
    .lg\:col-5  { grid-column: span 5; }
    .lg\:col-6  { grid-column: span 6; }
    .lg\:col-7  { grid-column: span 7; }
    .lg\:col-8  { grid-column: span 8; }
    .lg\:col-9  { grid-column: span 9; }
    .lg\:col-10 { grid-column: span 10; }
    .lg\:col-11 { grid-column: span 11; }
    .lg\:col-12 { grid-column: span 12; }
  }

  @media (min-width: 1280px) {
    .xl\:col-1  { grid-column: span 1; }
    .xl\:col-2  { grid-column: span 2; }
    .xl\:col-3  { grid-column: span 3; }
    .xl\:col-4  { grid-column: span 4; }
    .xl\:col-5  { grid-column: span 5; }
    .xl\:col-6  { grid-column: span 6; }
    .xl\:col-7  { grid-column: span 7; }
    .xl\:col-8  { grid-column: span 8; }
    .xl\:col-9  { grid-column: span 9; }
    .xl\:col-10 { grid-column: span 10; }
    .xl\:col-11 { grid-column: span 11; }
    .xl\:col-12 { grid-column: span 12; }
  }

  /* =====================================================
     4.7 & 4.15 Gap Utilities
     ===================================================== */

  .gap-0  { gap: var(--space-0); }
  .gap-1  { gap: var(--space-1); }
  .gap-2  { gap: var(--space-2); }
  .gap-3  { gap: var(--space-3); }
  .gap-4  { gap: var(--space-4); }
  .gap-5  { gap: var(--space-5); }
  .gap-6  { gap: var(--space-6); }
  .gap-8  { gap: var(--space-8); }
  .gap-10 { gap: var(--space-10); }
  .gap-12 { gap: var(--space-12); }

  /* =====================================================
     4.8 Margin Utilities
     ===================================================== */

  .m-0  { margin: var(--space-0); }
  .m-1  { margin: var(--space-1); }
  .m-2  { margin: var(--space-2); }
  .m-3  { margin: var(--space-3); }
  .m-4  { margin: var(--space-4); }
  .m-5  { margin: var(--space-5); }
  .m-6  { margin: var(--space-6); }
  .m-8  { margin: var(--space-8); }
  .m-10 { margin: var(--space-10); }
  .m-12 { margin: var(--space-12); }
  .m-auto { margin: auto; }

  .mt-0  { margin-top: var(--space-0); }
  .mt-1  { margin-top: var(--space-1); }
  .mt-2  { margin-top: var(--space-2); }
  .mt-3  { margin-top: var(--space-3); }
  .mt-4  { margin-top: var(--space-4); }
  .mt-5  { margin-top: var(--space-5); }
  .mt-6  { margin-top: var(--space-6); }
  .mt-8  { margin-top: var(--space-8); }
  .mt-10 { margin-top: var(--space-10); }
  .mt-12 { margin-top: var(--space-12); }

  .mr-0  { margin-right: var(--space-0); }
  .mr-1  { margin-right: var(--space-1); }
  .mr-2  { margin-right: var(--space-2); }
  .mr-3  { margin-right: var(--space-3); }
  .mr-4  { margin-right: var(--space-4); }
  .mr-5  { margin-right: var(--space-5); }
  .mr-6  { margin-right: var(--space-6); }
  .mr-8  { margin-right: var(--space-8); }

  .mb-0  { margin-bottom: var(--space-0); }
  .mb-1  { margin-bottom: var(--space-1); }
  .mb-2  { margin-bottom: var(--space-2); }
  .mb-3  { margin-bottom: var(--space-3); }
  .mb-4  { margin-bottom: var(--space-4); }
  .mb-5  { margin-bottom: var(--space-5); }
  .mb-6  { margin-bottom: var(--space-6); }
  .mb-8  { margin-bottom: var(--space-8); }
  .mb-10 { margin-bottom: var(--space-10); }
  .mb-12 { margin-bottom: var(--space-12); }

  .ml-0  { margin-left: var(--space-0); }
  .ml-1  { margin-left: var(--space-1); }
  .ml-2  { margin-left: var(--space-2); }
  .ml-3  { margin-left: var(--space-3); }
  .ml-4  { margin-left: var(--space-4); }
  .ml-5  { margin-left: var(--space-5); }
  .ml-6  { margin-left: var(--space-6); }
  .ml-8  { margin-left: var(--space-8); }

  .mx-0  { margin-inline: var(--space-0); }
  .mx-1  { margin-inline: var(--space-1); }
  .mx-2  { margin-inline: var(--space-2); }
  .mx-3  { margin-inline: var(--space-3); }
  .mx-4  { margin-inline: var(--space-4); }
  .mx-6  { margin-inline: var(--space-6); }
  .mx-8  { margin-inline: var(--space-8); }
  .mx-auto { margin-inline: auto; }

  .my-0  { margin-block: var(--space-0); }
  .my-1  { margin-block: var(--space-1); }
  .my-2  { margin-block: var(--space-2); }
  .my-3  { margin-block: var(--space-3); }
  .my-4  { margin-block: var(--space-4); }
  .my-6  { margin-block: var(--space-6); }
  .my-8  { margin-block: var(--space-8); }
  .my-10 { margin-block: var(--space-10); }
  .my-12 { margin-block: var(--space-12); }

  /* =====================================================
     4.9 Padding Utilities
     ===================================================== */

  .p-0  { padding: var(--space-0); }
  .p-1  { padding: var(--space-1); }
  .p-2  { padding: var(--space-2); }
  .p-3  { padding: var(--space-3); }
  .p-4  { padding: var(--space-4); }
  .p-5  { padding: var(--space-5); }
  .p-6  { padding: var(--space-6); }
  .p-8  { padding: var(--space-8); }
  .p-10 { padding: var(--space-10); }
  .p-12 { padding: var(--space-12); }

  .pt-0  { padding-top: var(--space-0); }
  .pt-1  { padding-top: var(--space-1); }
  .pt-2  { padding-top: var(--space-2); }
  .pt-3  { padding-top: var(--space-3); }
  .pt-4  { padding-top: var(--space-4); }
  .pt-5  { padding-top: var(--space-5); }
  .pt-6  { padding-top: var(--space-6); }
  .pt-8  { padding-top: var(--space-8); }
  .pt-10 { padding-top: var(--space-10); }
  .pt-12 { padding-top: var(--space-12); }

  .pr-0  { padding-right: var(--space-0); }
  .pr-1  { padding-right: var(--space-1); }
  .pr-2  { padding-right: var(--space-2); }
  .pr-3  { padding-right: var(--space-3); }
  .pr-4  { padding-right: var(--space-4); }
  .pr-5  { padding-right: var(--space-5); }
  .pr-6  { padding-right: var(--space-6); }
  .pr-8  { padding-right: var(--space-8); }

  .pb-0  { padding-bottom: var(--space-0); }
  .pb-1  { padding-bottom: var(--space-1); }
  .pb-2  { padding-bottom: var(--space-2); }
  .pb-3  { padding-bottom: var(--space-3); }
  .pb-4  { padding-bottom: var(--space-4); }
  .pb-5  { padding-bottom: var(--space-5); }
  .pb-6  { padding-bottom: var(--space-6); }
  .pb-8  { padding-bottom: var(--space-8); }
  .pb-10 { padding-bottom: var(--space-10); }
  .pb-12 { padding-bottom: var(--space-12); }

  .pl-0  { padding-left: var(--space-0); }
  .pl-1  { padding-left: var(--space-1); }
  .pl-2  { padding-left: var(--space-2); }
  .pl-3  { padding-left: var(--space-3); }
  .pl-4  { padding-left: var(--space-4); }
  .pl-5  { padding-left: var(--space-5); }
  .pl-6  { padding-left: var(--space-6); }
  .pl-8  { padding-left: var(--space-8); }

  .px-0  { padding-inline: var(--space-0); }
  .px-1  { padding-inline: var(--space-1); }
  .px-2  { padding-inline: var(--space-2); }
  .px-3  { padding-inline: var(--space-3); }
  .px-4  { padding-inline: var(--space-4); }
  .px-6  { padding-inline: var(--space-6); }
  .px-8  { padding-inline: var(--space-8); }

  .py-0  { padding-block: var(--space-0); }
  .py-1  { padding-block: var(--space-1); }
  .py-2  { padding-block: var(--space-2); }
  .py-3  { padding-block: var(--space-3); }
  .py-4  { padding-block: var(--space-4); }
  .py-6  { padding-block: var(--space-6); }
  .py-8  { padding-block: var(--space-8); }
  .py-10 { padding-block: var(--space-10); }
  .py-12 { padding-block: var(--space-12); }

  /* =====================================================
     4.10 Display Classes
     ===================================================== */

  .block        { display: block; }
  .inline       { display: inline; }
  .inline-block { display: inline-block; }
  .flex         { display: flex; }
  .inline-flex  { display: inline-flex; }
  .grid         { display: grid; }
  .hidden       { display: none; }

  /* =====================================================
     4.11 Responsive Display Classes
     ===================================================== */

  @media (min-width: 640px) {
    .sm\:block        { display: block; }
    .sm\:inline       { display: inline; }
    .sm\:inline-block { display: inline-block; }
    .sm\:flex         { display: flex; }
    .sm\:grid         { display: grid; }
    .sm\:hidden       { display: none; }
  }

  @media (min-width: 768px) {
    .md\:block        { display: block; }
    .md\:inline       { display: inline; }
    .md\:inline-block { display: inline-block; }
    .md\:flex         { display: flex; }
    .md\:grid         { display: grid; }
    .md\:hidden       { display: none; }
  }

  @media (min-width: 1024px) {
    .lg\:block        { display: block; }
    .lg\:inline       { display: inline; }
    .lg\:inline-block { display: inline-block; }
    .lg\:flex         { display: flex; }
    .lg\:grid         { display: grid; }
    .lg\:hidden       { display: none; }
  }

  @media (min-width: 1280px) {
    .xl\:block        { display: block; }
    .xl\:inline       { display: inline; }
    .xl\:inline-block { display: inline-block; }
    .xl\:flex         { display: flex; }
    .xl\:grid         { display: grid; }
    .xl\:hidden       { display: none; }
  }

  /* =====================================================
     4.12 Flex Direction
     ===================================================== */

  .flex-row { flex-direction: row; }
  .flex-col { flex-direction: column; }

  /* =====================================================
     4.13 Justify Content
     ===================================================== */

  .justify-start   { justify-content: flex-start; }
  .justify-center  { justify-content: center; }
  .justify-end     { justify-content: flex-end; }
  .justify-between { justify-content: space-between; }

  /* =====================================================
     4.14 Align Items
     ===================================================== */

  .items-start   { align-items: flex-start; }
  .items-center  { align-items: center; }
  .items-end     { align-items: flex-end; }
  .items-stretch { align-items: stretch; }

  /* =====================================================
     4.16 Text Alignment
     ===================================================== */

  .text-left   { text-align: left; }
  .text-center { text-align: center; }
  .text-right  { text-align: right; }

  /* =====================================================
     4.17 Screen Reader Only
     ===================================================== */

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* =====================================================
     4.18 Width Utilities
     ===================================================== */

  .w-full { width: 100%; }
  .w-auto { width: auto; }
  .overflow-auto { overflow: auto; }

  /* =====================================================
     Responsive Typography
     ===================================================== */

  @media (max-width: 639px) {
    h1, .heading-1 { font-size: var(--font-size-3xl); }
    h2, .heading-2 { font-size: var(--font-size-2xl); }
    h3, .heading-3 { font-size: var(--font-size-xl); }
  }
}

/* ==========================================================================
   Accessibility & User Preferences
   ========================================================================== */

/* ---- 5.1 Reduced Motion ---- */

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

/* ---- 5.2 High Contrast ---- */

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--gray-500);
    --color-border-light: var(--gray-400);
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }

  .btn--primary {
    border-color: var(--gray-900);
  }

  .btn--ghost {
    border-color: currentColor;
  }

  .card--glass {
    background-color: var(--color-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--gray-500);
  }

  .badge {
    border: var(--border-width-thin) solid currentColor;
  }

  .form-toggle__track {
    border: var(--border-width-thick) solid var(--gray-600);
  }

  .tooltip__content {
    border: var(--border-width-thin) solid var(--gray-400);
  }
}

/* ---- 5.6 Skip Link ---- */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse);
  background-color: var(--color-action);
  border-radius: var(--radius-base);
  z-index: 10000;
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}