/* === Baka Too Accent Font === */
        @font-face {
          font-family: 'Baka Too';
          src: url('/static/fonts/BakaToo.otf') format('opentype');
          font-weight: normal;
          font-style: normal;
          font-display: swap;
        }

        /* === Design Guide v1.0 Color System === */
        :root {
          --sc-offwhite: #F5F3F1;
          --sc-beige-light: #E3D9C8;
          --sc-beige-earthy: #D7C9AF;
          --sc-graublau: #6F7C80;
          --sc-graublau-deep: #515A66;
          --sc-darkgray: #2B2B2B;
          --sc-white: #FFFFFF;
        }

        /* === Typography === */
        body { font-family: 'Source Sans 3', sans-serif; color: var(--sc-darkgray); }
        h1, h2, h3, h4 { font-family: 'Source Sans 3', sans-serif; }
        .font-accent { font-family: 'Baka Too', cursive; }

        /* === Color Utility Classes === */
        .bg-teaser { background-color: var(--sc-beige-light); }
        .bg-warm { background-color: var(--sc-offwhite); }
        .text-clay { color: var(--sc-graublau); }
        .bg-clay { background-color: var(--sc-graublau); }
        .bg-sage { background-color: var(--sc-offwhite); }
        .text-sage { color: var(--sc-graublau-deep); }
        .bg-terracotta { background-color: var(--sc-graublau); }
        .text-terracotta { color: var(--sc-graublau); }

        .bg-linen { background-color: var(--sc-beige-light); }
        .text-linen { color: var(--sc-beige-light); }
        .bg-dustyblue { background-color: var(--sc-graublau-deep); }
        .bg-linen-50 { background-color: rgba(227, 217, 200, 0.2); }
        .bg-dustyblue-50 { background-color: rgba(111, 124, 128, 0.15); }
        .text-dustyblue { color: var(--sc-graublau); }
        .text-dustyblue-50 { color: rgba(111, 124, 128, 0.3); }

        /* === Button Styles === */
        .btn-primary {
          background-color: var(--sc-graublau);
          color: var(--sc-white);
          font-family: 'Source Sans 3', sans-serif;
          font-weight: 600;
          padding: 10px 24px;
          border-radius: 4px;
          transition: background-color 0.2s;
          display: inline-block;
          text-decoration: none;
        }
        .btn-primary:hover {
          background-color: var(--sc-graublau-deep);
        }

        .btn-secondary {
          background-color: var(--sc-beige-earthy);
          color: var(--sc-darkgray);
          font-family: 'Source Sans 3', sans-serif;
          font-weight: 500;
          padding: 10px 24px;
          border-radius: 4px;
          transition: background-color 0.2s;
          display: inline-block;
          text-decoration: none;
        }
        .btn-secondary:hover {
          background-color: #C8BA9F;
        }

        .btn-outline {
          background-color: transparent;
          border: 1px solid var(--sc-graublau);
          color: var(--sc-graublau);
          padding: 10px 24px;
          border-radius: 4px;
          transition: all 0.2s;
          display: inline-block;
          text-decoration: none;
        }
        .btn-outline:hover {
          background-color: var(--sc-graublau);
          color: var(--sc-white);
        }

        /* === Smooth transition for mobile menu === */
        #mobile-menu { transition: transform 0.3s ease-in-out; }

        /* === Loading Spinner === */
        .loading-spinner {
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            border: 2px solid #d6d3d1;
            border-top-color: #44403c;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }

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

        /* Button loading state */
        .btn-loading {
            position: relative;
            color: transparent !important;
            pointer-events: none;
        }
        .btn-loading::after {
            content: '';
            position: absolute;
            inset: 0;
            margin: auto;
            width: 1.25rem;
            height: 1.25rem;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }