/**
 * Jena Design System
 *
 * A modern, accessible design system for the Mietspiegel application
 * following Jena design principles.
 *
 * Features:
 * - Strong geometric shapes with black borders (3px)
 * - High contrast colors for accessibility
 * - Bold typography with slight angles
 * - Asymmetric and "imperfect" design elements
 * - WCAG 2.1 AA compliant
 *
 * Primary color: #ffde59 (vibrant yellow)
 * Secondary color: #ff6b6b (bold red)
 */

/*
 * CSS Module System
 *
 * We're using a modular CSS architecture with the @import url() syntax
 * to comply with our Stylelint configuration while maintaining a clean,
 * organized structure.
 *
 * The imports are organized in a logical order:
 * 1. Base styles and variables (design tokens, global styles)
 * 2. Component styles (reusable UI components)
 * 3. Utility styles (helper classes)
 *
 * Note: While modern bundlers often prefer @import without url(),
 * we're using url() to maintain compatibility with our linting rules.
 * Symfony's Asset Mapper will handle bundling and optimization for production.
 */

/* Import base styles and variables */
@import url("fonts-b0571319b2bf7ead8976e83ca68aabf4.css");
@import url("foundation/variables-0e32963dc37cf18a73f076f2eb03315c.css");
@import url("foundation/base-e629a15f9bf6f483a237dd16f59b17de.css");
@import url("foundation/focus-4f37075a615e7c186b0f6080b69bf3fd.css");

/* Import component styles */
@import url("components/headings-1a9b3e99ae82b98d87130332dbb27447.css");
@import url("components/inline-elements-2d33e0bf93edd1e08eee74eadbc8f8fa.css");
@import url("components/buttons-af40584a3161bb3f3006628db3d0e29d.css");
@import url("components/forms-c633030389ef4242815a164ad8dead46.css");
@import url("components/footer-f23227a2207b06d681244b3474b732a0.css");
@import url("components/links-d43f371cbc9acfa9c37d790f9f6ef350.css");
@import url("components/sections-2fcfbff552b70ac5446a80fda71041e1.css");
@import url("components/accordion-b21d093ff337aff9d24b9c90e42429a1.css");
@import url("components/cards-19599f00c8c8a224ce6905bf7f024e77.css");
@import url("components/alerts-bda3a5a4ee1087ff20ed88c57f4597c8.css");
@import url("components/backgrounds-3cad6e2fc5ee043679db30428289dddb.css");
@import url("components/price-92755d341e4dd9be1101ff007d739719.css");
@import url("components/results-21b5c5978843b9fb0a84c9f4c640ea3f.css");
@import url("components/tables-779acb964594ea5163d7e3518c0c6c0b.css");
@import url("components/badges-01815b9fa0f627915003e4c7a38347c0.css");
@import url("components/details-0534d4194a0402a61feceec870324983.css");
@import url("components/nav-f2b1c533fac442cdcc9e62df591127f3.css");
@import url("components/dividers-aa9eb1eb76d5637f2c665cfd484a8236.css");

/* Import utility styles */
@import url("utilities/jena-662b8a7c40ada52995da0745566a4129.css");


/* Responsive adjustments */

/* Medium devices (tablets, less than 768px) */
@media (width < 768px) {
    :root {
        --jena-shadow-offset-x: 5px;
        --jena-shadow-offset-y: 5px;
    }

    .jena-card {
        margin-bottom: var(--jena-space-stack-md);
    }

    .jena-section {
        margin-bottom: var(--jena-space-stack-lg);
    }

    .jena-submit-button {
        width: 100%;
    }
}