/* Utilities derived from tokens */
:root { --_tmp: 0 }

/* Spacing (subset) */
.p-4{padding:var(--alo-space-4)}.p-6{padding:var(--alo-space-6)}.p-8{padding:var(--alo-space-8)}
.px-6{padding-left:var(--alo-space-6);padding-right:var(--alo-space-6)}
.py-6{padding-top:var(--alo-space-6);padding-bottom:var(--alo-space-6)}
.mt-2{margin-top:var(--alo-space-2)}.mt-3{margin-top:var(--alo-space-3)}.mt-4{margin-top:var(--alo-space-4)}.mt-6{margin-top:var(--alo-space-6)}
.mb-6{margin-bottom:var(--alo-space-6)}
.gap-4{gap:var(--alo-space-4)}.gap-6{gap:var(--alo-space-6)}

/* Typography */
.text-xs{font-size:var(--alo-text-xs)}.text-sm{font-size:var(--alo-text-sm)}.text-md{font-size:var(--alo-text-md)}
.text-lg{font-size:var(--alo-text-lg)}.text-xl{font-size:var(--alo-text-xl)}.text-xxl{font-size:var(--alo-text-xxl)}
.muted{color:var(--alo-color-muted)}
.text-danger{color:var(--alo-color-danger)}

/* Layout */
.flex{display:flex}.grid{display:grid}.center{display:grid;place-items:center}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.flex-1{flex:1}.flex-column{flex-direction:column}
.gap-2{gap:var(--alo-space-2)}.gap-3{gap:var(--alo-space-3)}.gap-4{gap:var(--alo-space-4)}
.rounded-md{border-radius:var(--alo-radius-md)}.rounded-lg{border-radius:var(--alo-radius-lg)}

/* Height utilities (small, used for skeleton lines) */
.h-14{height:14px}.h-16{height:16px}

/* Width helpers */
.w-full{width:100%}
.max-w-screen-lg{max-width:1024px}
.max-w-screen-xl{max-width:1280px}

/* Responsive grid helpers */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}
.col-span-6{grid-column:span 6}
.col-span-12{grid-column:span 12}

@media (max-width: 768px) {
    .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
    .md\:col-span-12{grid-column:span 12}
}
@media (max-width: 480px) {
    .sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
}

/* A11y helpers */
.focusable:focus-visible{outline:var(--alo-focus-ring); outline-offset: 2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Visibility helpers */
@media (max-width: var(--alo-bp-sm)) { .hidden-sm{display:none !important} }
@media (max-width: var(--alo-bp-md)) { .hidden-md{display:none !important} }
@media (max-width: var(--alo-bp-lg)) { .hidden-lg{display:none !important} }
@media (min-width: var(--alo-bp-lg)) { .only-mobile{display:none !important} }

/* Container */
.container{max-width:1200px;margin:0 auto;padding:0 var(--alo-space-6)}

/* Content layout */
.content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Touch targets (increase minimum hit area on touch devices) */
@media (pointer: coarse) {
    .touch-target, .btn, .menu .menu-item { min-height: 44px; }
    .btn { padding-top: var(--alo-space-4); padding-bottom: var(--alo-space-4); }
}

/* Elevation utilities (glass) */
.e0{backdrop-filter:blur(var(--alo-e0-blur));box-shadow:var(--alo-e0-shadow);background:color-mix(in oklab,var(--alo-color-surface) var(--alo-e0-alpha),transparent)}
.e1{backdrop-filter:blur(var(--alo-e1-blur));box-shadow:var(--alo-e1-shadow);background:color-mix(in oklab,var(--alo-color-surface) var(--alo-e1-alpha),transparent)}
.e2{backdrop-filter:blur(var(--alo-e2-blur));box-shadow:var(--alo-e2-shadow);background:color-mix(in oklab,var(--alo-color-surface) var(--alo-e2-alpha),transparent)}
.e3{backdrop-filter:blur(var(--alo-e3-blur));box-shadow:var(--alo-e3-shadow);background:color-mix(in oklab,var(--alo-color-surface) var(--alo-e3-alpha),transparent)}
.e4{backdrop-filter:blur(var(--alo-e4-blur));box-shadow:var(--alo-e4-shadow);background:color-mix(in oklab,var(--alo-color-surface) var(--alo-e4-alpha),transparent)}
.e5{backdrop-filter:blur(var(--alo-e5-blur));box-shadow:var(--alo-e5-shadow);background:color-mix(in oklab,var(--alo-color-surface) var(--alo-e5-alpha),transparent)}

/* Buttons baseline */
.btn{
    font-weight:600;
    border:1px solid var(--alo-color-border);
    border-radius:var(--alo-radius-md);
    padding:var(--alo-space-4) var(--alo-space-6);
    cursor:pointer;
    transition:all var(--alo-dur-2) var(--alo-ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--alo-space-2);
    font-size: var(--alo-text-sm);
    letter-spacing: 0.025em;
    backdrop-filter: blur(var(--alo-e1-blur));
    position: relative;
    overflow: hidden;
}
/* Edge light */
.btn::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    padding: 1px; opacity: 0; transition: opacity var(--alo-dur-2) var(--alo-ease);
}
.btn::before{
    content:"";
    position:absolute; inset: -120% -50% auto -50%; height: 240%; width: 40%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(18deg) translateX(-140%);
    transition: transform var(--alo-dur) var(--alo-ease);
    pointer-events: none;
}
.btn:hover::before{ transform: rotate(18deg) translateX(60%); }
.btn:hover::after, .btn:focus-visible::after{ opacity: 1; }
.btn:active{ transform: translateY(1px) scale(0.995); box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.btn:focus-visible{outline:var(--alo-focus-ring)}
.btn:active{transform:translateY(1px)}

/* Primary Button */
.btn-primary{
    color:var(--alo-color-brand-contrast);
    background:linear-gradient(135deg, var(--alo-color-brand), color-mix(in oklab, var(--alo-color-brand) 85%, black));
    border-color: var(--alo-color-brand);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--alo-color-brand) 25%, transparent);
}
.btn-primary:hover{
    background:linear-gradient(135deg, color-mix(in oklab, var(--alo-color-brand) 110%, white), var(--alo-color-brand));
    box-shadow: 0 6px 20px color-mix(in oklab, var(--alo-color-brand) 35%, transparent);
    transform: translateY(-1px);
}

/* Secondary/Outline Button */
.btn-secondary, .btn-outline{
    color:var(--alo-color-text);
    background:color-mix(in oklab,var(--alo-color-surface) 60%,transparent);
    border-color: var(--alo-color-border);
    backdrop-filter: blur(var(--alo-e2-blur));
}
.btn-secondary:hover, .btn-outline:hover{
    background:color-mix(in oklab,var(--alo-color-surface) 80%,transparent);
    border-color: var(--alo-color-brand);
    color: var(--alo-color-brand);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--alo-color-brand) 15%, transparent);
}

/* Ghost Button */
.btn-ghost{
    color:var(--alo-color-text);
    background:transparent;
    border-color: transparent;
}
.btn-ghost:hover{
    background:color-mix(in oklab,var(--alo-color-surface) 40%,transparent);
    border-color: var(--alo-color-border);
}

/* Button sizes */
.btn-sm {
    padding: var(--alo-space-3) var(--alo-space-4);
    font-size: var(--alo-text-xs);
}
.btn-lg {
    padding: var(--alo-space-5) var(--alo-space-8);
    font-size: var(--alo-text-md);
}

/* Danger Button */
.btn-danger {
    color: var(--alo-color-brand-contrast);
    background: linear-gradient(135deg, var(--alo-color-danger), color-mix(in oklab, var(--alo-color-danger) 85%, black));
    border-color: var(--alo-color-danger);
    box-shadow: 0 4px 12px color-mix(in oklab, var(--alo-color-danger) 25%, transparent);
}
.btn-danger:hover {
    background: linear-gradient(135deg, color-mix(in oklab, var(--alo-color-danger) 110%, white), var(--alo-color-danger));
    box-shadow: 0 6px 20px color-mix(in oklab, var(--alo-color-danger) 35%, transparent);
    transform: translateY(-1px);
}

/* Button disabled state */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}
.btn:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* High contrast helpers for A11y */
.contrast-boost {
    --_boost: color-mix(in oklab, black 15%, transparent);
    color: color-mix(in oklab, var(--alo-color-text) 95%, white);
}
.bg-contrast {
    background: color-mix(in oklab, var(--alo-color-surface) 92%, black);
}
.zone-dark-text {
  color: var(--alo-color-text-light);
}

:root[data-theme="dark"] .zone-dark-text {
  color: var(--alo-color-text-dark);
}

:root[data-theme="contrast"] .zone-dark-text {
  color: #000000;
}

:root[data-theme="contrast"] .footer {
    background-color: #ffffff;
    color: #000000;
    border-top: 2px solid #000000;
}

:root[data-theme="contrast"] .footer .footer-legal,
:root[data-theme="contrast"] .footer .footer-links h4,
:root[data-theme="contrast"] .footer .footer-link,
:root[data-theme="contrast"] .footer .muted {
    color: #000000;
}