/* Punch Collective — shared foundations and Azuriom compatibility.
   Source of truth for tokens. Rules and examples: docs/DESIGN-SYSTEM.md. */
:root {
    --punch-bg: #15191f;
    --punch-surface: #1b222b;
    --punch-surface-raised: #232d3a;
    --punch-text: #edf0f6;
    --punch-muted: #a4acba;
    --punch-accent: #8faaf0;
    --punch-accent-hover: #a4baf4;
    --punch-on-accent: #111722;
    --punch-line: #354153;
    --punch-control-line: #697992;
    --punch-focus: #b9cbff;
    --punch-success: #a3cdbb;
    --punch-success-surface: #20302c;
    --punch-warning: #dac18f;
    --punch-warning-surface: #342e23;
    --punch-danger: #e8adad;
    --punch-danger-surface: #35272e;
    --punch-font-body: Onest, Arial, sans-serif;
    --punch-font-display: Unbounded, Arial, sans-serif;
    --punch-text-xs: .75rem;
    --punch-text-sm: .875rem;
    --punch-text-md: 1rem;
    --punch-text-lg: 1.125rem;
    --punch-space-1: 4px;
    --punch-space-2: 8px;
    --punch-space-3: 12px;
    --punch-space-4: 16px;
    --punch-space-6: 24px;
    --punch-space-8: 32px;
    --punch-space-12: 48px;
    --punch-space-16: 64px;
    --punch-space-24: 96px;
    --punch-radius-control: 12px;
    --punch-radius-panel: 20px;
    --punch-radius-stage: 32px;
    --punch-control-height: 48px;
    --punch-motion-press: 90ms;
    --punch-motion-fast: 160ms;
    --punch-motion-ui: 240ms;
    --punch-motion-scene: 420ms;
    --punch-ease: cubic-bezier(.2, .8, .2, 1);
    --punch-ease-enter: cubic-bezier(.16, .8, .24, 1);
}

.punch-site {
    --punch-blue: var(--punch-accent);
    --punch-paper: var(--punch-text);
    --theme-body-background: var(--punch-bg);
    --theme-body-color: var(--punch-text);
    --theme-color: var(--punch-text);
    --theme-font-family: var(--punch-font-body);
    --theme-button-background: var(--punch-accent);
    --theme-button-background-2: var(--punch-accent-hover);
    --theme-button-color: var(--punch-on-accent);
    --theme-button-second-background: var(--punch-surface-raised);
    --theme-button-second-background-2: #2e3a4b;
    --theme-button-second-color: var(--punch-text);
    --theme-navbar-background: var(--punch-surface);
    --bs-body-font-family: var(--punch-font-body);
    --bs-body-bg: var(--punch-bg);
    --bs-body-color: var(--punch-text);
    --bs-secondary-color: var(--punch-muted);
    --bs-border-color: var(--punch-line);
    --bs-link-color: var(--punch-accent);
    --bs-link-hover-color: var(--punch-accent-hover);
    font-family: var(--punch-font-body);
    font-size: var(--punch-text-md);
    line-height: 1.65;
    color: var(--punch-text);
    background: var(--punch-bg);
    color-scheme: dark;
}

/* A single stationary label, restrained surface movement, tactile press. */
.punch-site :is(.punch-button, .btn:where(:not(.btn-link)), .btn-theme, .btn-theme-second, .btn-theme-simple) {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-block-size: var(--punch-control-height);
    padding: 11px 20px;
    border: 1px solid var(--button-line, var(--punch-control-line)) !important;
    border-radius: var(--punch-radius-control);
    background: var(--button-bg, var(--punch-surface-raised)) !important;
    color: var(--button-fg, var(--punch-text)) !important;
    box-shadow: var(--button-shadow, inset 0 1px 0 #ffffff09) !important;
    font: 600 var(--punch-text-sm)/1.4 var(--punch-font-body);
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    filter: none;
    cursor: pointer;
    vertical-align: middle;
    transform: none;
    transition: transform var(--punch-motion-fast) var(--punch-ease),
        background-color var(--punch-motion-ui) var(--punch-ease),
        border-color var(--punch-motion-ui) var(--punch-ease),
        box-shadow var(--punch-motion-fast) var(--punch-ease);
}

.punch-site :is(.punch-button, .btn:where(:not(.btn-link)), .btn-theme, .btn-theme-second, .btn-theme-simple)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    background: linear-gradient(105deg, #ffffff00, #ffffff16 50%, #ffffff05);
    opacity: 0;
    transform: translateX(-105%) skewX(-12deg);
    transition: transform var(--punch-motion-ui) var(--punch-ease), opacity var(--punch-motion-fast) linear;
    pointer-events: none;
}
.punch-site :is(.punch-button, .btn-theme, .btn-theme-second, .btn-theme-simple)::after { content: none; }

.punch-site :is(.punch-button-primary, .punch-button-blue, .btn-primary, .btn-theme, .btn-theme-simple) {
    --button-bg: var(--punch-accent);
    --button-fg: var(--punch-on-accent);
    --button-line: #b7c9f5;
    --button-shadow: inset 0 1px 0 #ffffff32, 0 3px 0 #4e6595, 0 7px 18px #070d171c;
}
.punch-site :is(.punch-button-secondary, .punch-button-light, .btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-theme-second) {
    --button-bg: var(--punch-surface-raised);
    --button-fg: var(--punch-text);
    --button-line: var(--punch-control-line);
}
.punch-site :is(.punch-button-quiet, .btn-outline-light) {
    --button-bg: transparent;
    --button-fg: #d9e1ee;
    --button-line: transparent;
    --button-shadow: none;
}
.punch-site .punch-button-glass {
    --button-bg: #15191fc9;
    --button-fg: var(--punch-text);
    --button-line: #8090ab;
    backdrop-filter: blur(10px);
}
.punch-site :is(.punch-button-danger, .btn-danger, .btn-outline-danger) {
    --button-bg: var(--punch-danger-surface);
    --button-fg: var(--punch-danger);
    --button-line: #a5737e;
}
.punch-site :is(.btn-success, .btn-outline-success) {
    --button-bg: var(--punch-success-surface);
    --button-fg: var(--punch-success);
    --button-line: #6a9a85;
}
.punch-site :is(.btn-warning, .btn-outline-warning) {
    --button-bg: var(--punch-warning-surface);
    --button-fg: var(--punch-warning);
    --button-line: #998566;
}
.punch-site :is(.punch-button, .btn, .btn-theme, .btn-theme-second, .btn-theme-simple):active:not(:disabled):not([aria-disabled=true]) {
    transform: translateY(1px);
    --button-shadow: inset 0 1px 2px #00000016, 0 1px 0 #11172240;
    transition-duration: var(--punch-motion-press);
}
.punch-site .punch-button-label { display: block; overflow: visible; }
.punch-site .punch-button-label>span+span { display: none; }
.punch-site .punch-button:hover .punch-button-label>span:first-child,
.punch-site .punch-button-label>span:first-child { opacity: 1; transform: none; transition: none; }
.punch-site .punch-button>svg { flex: none; transition: translate var(--punch-motion-ui) var(--punch-ease); transform: none; }
.punch-site .punch-button-content { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.punch-site :is(.punch-button, .btn, .btn-theme, .btn-theme-second):is(:disabled, .disabled, [aria-disabled=true]) {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    --button-shadow: none;
}
.punch-site :is(.punch-button, .btn, .btn-theme, .btn-theme-second)[aria-busy=true] {
    opacity: 1;
    cursor: progress;
    transform: none;
}
.punch-site .punch-spinner {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: punch-spin 800ms linear infinite;
}
.punch-site :is(.punch-button-sm, .btn-sm) { min-block-size: 44px; padding: 9px 16px; font-size: 13px; }
.punch-site :is(.punch-button-lg, .btn-lg) { min-block-size: 56px; padding: 15px 24px; font-size: 16px; }

/* Visible focus remains independent of hover, button shadows and colour. */
.punch-site :focus-visible {
    outline: 3px solid var(--punch-focus);
    outline-offset: 4px;
}
.punch-site :is(.punch-icon-button, .punch-menu-toggle, .crew-arrow) {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid var(--punch-control-line);
    border-radius: var(--punch-radius-control);
    background: #ffffff04;
    color: #cbd6e7;
    transition: background-color var(--punch-motion-fast) linear, transform var(--punch-motion-fast) var(--punch-ease);
}
.punch-site .punch-menu-toggle { display: none; }
.punch-site .crew-arrow { border-radius: 50%; }
.punch-site .punch-navigation .punch-nav-link { min-height: 44px; }
.punch-site .punch-signup { white-space: nowrap; }
.punch-site .punch-socials a { width: 44px; height: 44px; min-width: 44px; }
.punch-site .punch-socials a:hover { transform: translateY(-1px); }
.punch-site .punch-footer-links a { font-size: 14px; min-height: 28px; }
.punch-site .punch-footer-about p { color: var(--punch-muted); }
.punch-site .punch-footer-bottom { color: #97a3b5; font-size: 12px; }

/* Forms share the same height, radius and contrast as adjacent actions. */
.punch-site :is(.punch-input, .form-control, .form-select) {
    min-height: var(--punch-control-height);
    padding: 11px 14px;
    font: 400 16px/1.5 var(--punch-font-body);
    color: var(--punch-text);
    background-color: var(--punch-surface) !important;
    border: 1px solid var(--punch-control-line);
    border-radius: var(--punch-radius-control);
    box-shadow: none;
    transition: border-color var(--punch-motion-fast) linear, background-color var(--punch-motion-fast) linear;
}
.punch-site :is(.punch-input, .form-control)::placeholder { color: #9ba8bb; opacity: 1; }
.punch-site :is(.punch-input, .form-control, .form-select):focus {
    color: var(--punch-text);
    border-color: var(--punch-focus);
    box-shadow: 0 0 0 1px var(--punch-focus);
}
.punch-site :is(.punch-input, .form-control, .form-select):focus-visible { outline-offset: 3px; }
.punch-site :is(.punch-input, .form-control, .form-select):is(.is-invalid, [aria-invalid=true]) {
    border-color: var(--punch-danger);
    box-shadow: inset 3px 0 0 var(--punch-danger);
}
.punch-site :is(.punch-input, .form-control, .form-select):disabled { color: var(--punch-muted); opacity: .6; cursor: not-allowed; }
.punch-site .punch-field-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #d5deeb; }
.punch-site :is(.punch-field-help, .form-text) { font-size: 13px; line-height: 1.6; color: var(--punch-muted); margin-top: 8px; }
.punch-site :is(.punch-field-error, .invalid-feedback) { font-size: 13px; color: var(--punch-danger); line-height: 1.6; }
.punch-site .form-check-input { width: 20px; height: 20px; border-color: var(--punch-control-line); margin-top: .2em; }
.punch-site .form-check-input:checked { background-color: #5c78bb; border-color: var(--punch-accent); }
.punch-site .form-check-label { font-size: 14px; padding-inline-start: 4px; }
.punch-site .form-check-input:focus-visible { outline: 3px solid var(--punch-focus); outline-offset: 4px; }
.punch-site textarea:is(.punch-input, .form-control) { min-height: 128px; resize: vertical; }

/* Existing Azuriom classes receive the shared treatment without DOM rewrites. */
.punch-site :is(.punch-panel, .card, .auth-card, .modal-content) {
    background: var(--punch-surface) !important;
    color: var(--punch-text);
    border: 1px solid var(--punch-line);
    border-radius: var(--punch-radius-panel);
    box-shadow: none;
}
.punch-site :is(.card-body, .card-header, .modal-header, .modal-body, .modal-footer) { background: transparent !important; }
.punch-site .card-body { padding: 24px; }
.punch-site .card-header { border-bottom: 1px solid var(--punch-line); padding: 18px 24px; }
.punch-site .auth-card { max-width: 480px; padding: 32px; }
.punch-site .auth-card .card-logo { max-width: 64px; }
.punch-site .auth-card .card-title { font: 600 24px/1.4 var(--punch-font-body); letter-spacing: -.025em; text-transform: none; }
.punch-site .auth-card :is(.card-btn-2, .card-btn-3) { font-size: 14px; color: var(--punch-accent); text-transform: none; letter-spacing: 0; }
.punch-site .auth-card .punch-auth-options { flex-wrap: wrap; gap: 0 16px; align-items: center; }
.punch-site .auth-card :is(.form-check, .custom-checkbox) { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-left: 0; }
.punch-site .auth-card :is(.form-check-input, .custom-control-input) { flex: none; margin: 0; float: none; width: 20px; height: 20px; }
.punch-site .auth-card :is(.form-check-label, .custom-control-label) { display: flex; align-items: center; min-height: 44px; padding-left: 0; font-size: 14px; }
.punch-site .auth-card :is(.card-btn-2, .card-btn-3) { display: inline-flex; min-height: 44px; align-items: center; }
.punch-site .punch-page-content { max-width: 1320px; padding-inline: 24px; }
.punch-site .punch-page-content>h1 { font: 600 clamp(24px, 3vw, 36px)/1.3 var(--punch-font-display); letter-spacing: -.04em; margin-bottom: 24px; }
.punch-site .punch-copy { max-width: 68ch; line-height: 1.75; }
.punch-site :is(.punch-copy, .card-body) a:not(:is(.btn, .punch-button, .btn-theme, .btn-theme-second, .btn-theme-simple)) {
    color: var(--punch-accent);
    text-decoration: underline;
    text-underline-offset: .22em;
    text-decoration-color: #8faaf070;
}
.punch-site .punch-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: var(--punch-surface-raised); color: var(--punch-muted); font-size: 13px; }
.punch-site :is(.punch-status-success, .alert-success) { color: var(--punch-success); background: var(--punch-success-surface); border-color: #527b69; }
.punch-site :is(.punch-status-warning, .alert-warning) { color: var(--punch-warning); background: var(--punch-warning-surface); border-color: #8c7959; }
.punch-site :is(.punch-status-danger, .alert-danger) { color: var(--punch-danger); background: var(--punch-danger-surface); border-color: #946773; }
.punch-site .text-success { color: var(--punch-success) !important; }
.punch-site .text-danger { color: var(--punch-danger) !important; }
.punch-site .punch-divider { border: 0; border-top: 1px solid var(--punch-line); opacity: 1; }
.punch-site #wiki .col-md-3 .card:hover { transform: none; }

/* Movement budget: interaction first; no animated margins, type or page scale. */
.punch-site .punch-hero-content { animation: punch-hero-in var(--punch-motion-scene) var(--punch-ease-enter) both; }
.punch-site .punch-dropdown-panel { animation: punch-panel-in var(--punch-motion-fast) var(--punch-ease-enter) both; }
.punch-site .punch-navigation.is-open { animation: punch-panel-in var(--punch-motion-fast) var(--punch-ease-enter) both; }
@keyframes punch-hero-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes punch-panel-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }
@keyframes punch-spin { to { transform: rotate(360deg); } }

@media (hover: hover) and (pointer: fine) {
    .punch-site :is(.punch-button, .btn:where(:not(.btn-link)), .btn-theme, .btn-theme-second, .btn-theme-simple):hover:not(:active):not(:disabled):not([aria-disabled=true]):not([aria-busy=true]) { transform: translateY(-1px); }
    .punch-site :is(.punch-button, .btn:where(:not(.btn-link)), .btn-theme, .btn-theme-second, .btn-theme-simple):hover:not(:disabled):not([aria-disabled=true])::before { opacity: 1; transform: translateX(0) skewX(0); }
    .punch-site :is(.punch-button-primary, .punch-button-blue, .btn-primary, .btn-theme, .btn-theme-simple):hover { --button-bg: var(--punch-accent-hover); }
    .punch-site .punch-button:hover>svg { translate: 2px 0; transform: none; }
    .punch-site :is(.punch-icon-button, .crew-arrow):hover { background: #ffffff0b; transform: none; }
}
@media (max-width: 1100px) { .punch-site .punch-menu-toggle { display: flex; } }
@media (max-width: 700px) {
    .punch-site .punch-signup { min-height: 44px; font-size: 12px; padding: 10px 12px; }
    .punch-site .punch-page-content { padding-inline: 16px; }
    .punch-site .auth-card { padding: 24px; }
    .punch-site .card-body { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .punch-site:not([data-motion=full]) *:not(.crew *),
    .punch-site:not([data-motion=full]) *:not(.crew *)::before,
    .punch-site:not([data-motion=full]) *:not(.crew *)::after { animation: none !important; transition: none !important; }
    .punch-site:not([data-motion=full]) :is(.punch-button, .btn, .btn-theme, .punch-socials a):hover { transform: none; }
}
.punch-site[data-motion=reduce] *, .punch-site[data-motion=reduce] *::before, .punch-site[data-motion=reduce] *::after { animation: none !important; transition: none !important; }
.punch-site[data-motion=reduce] :is(.punch-button, .btn, .btn-theme):hover { transform: none; }
@media (forced-colors: active) {
    .punch-site :focus-visible { outline-color: Highlight; }
    .punch-site :is(.punch-button, .btn, .punch-input, .form-control, .punch-icon-button) { border-color: ButtonText !important; }
}