@casoon/dragonfly/core/reset.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * @casoon/dragonfly – Reset CSS
 *
 * This file provides a clean, consistent baseline across all browsers to ensure
 * reliable styling for components and layouts.
 *
 * ➤ Modern reset principles are applied without over-normalizing.
 * ➤ Accessibility, performance, and logical defaults are prioritized.
 * ➤ All rules are scoped within @layer reset to prevent specificity conflicts.
 *
 * 🚨 Important: This file must be imported first before any other styles,
 * especially tokens, themes, and components.
 *
 * Recommended Import Order:
 *   1. @import "@casoon/dragonfly/core/reset.css";
 *   2. @import "@casoon/dragonfly/tokens/index.css";
 *   3. @import "@casoon/dragonfly/themes/index.css";
 *   4. @import "@casoon/dragonfly/ui/index.css";
 *
 * Accessibility:
 * - Includes support for `prefers-reduced-motion`
 * - Uses system fonts and semantic defaults
 *
 * Compatibility:
 * - Optimized for modern browsers (Chrome, Firefox, Safari, Edge)
 * - Progressive enhancement for older ones
 */

 @layer reset {
    /* 1. Box-Sizing + Margin-Reset */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
  
    /* 2. Core Root Defaults */
    html {
      -webkit-font-smoothing: antialiased;
      height: 100;
      scroll-behavior: smooth;
      text-size-adjust: 100;
    }
  
    html:focus-within {
      scroll-behavior: smooth;
    }
  
    body {
      background-color: var(--color-background, var(--color-white));
      color: var(--color-foreground, var(--color-black));
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      min-height: 100;
      text-rendering: optimizespeed;
    }
  
    /* 3. List & Table */
    ul, ol {
      list-style: none;
    }
  
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
  
    /* 4. Media */
    img, picture, video, canvas, svg {
      display: block;
      height: auto;
      max-width: 100;
    }
  
    /* 5. Forms & Buttons */
    input, button, textarea, select {
      appearance: none;
      background: none;
      border: none;
      color: inherit;
      font: inherit;
      margin: 0;
      padding: 0;
    }
  
    button {
      cursor: pointer;
    }
  
    textarea {
      resize: vertical;
    }
  
    /* 6. Links */
    a:not([class]) {
      color: inherit;
      text-decoration-skip-ink: auto;
    }
  
    /* 7. Accessibility: Motion Reduce */
    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }
  }