/*
    AngelRide visual system - initial theme/base CSS
    Scope: foundational tokens and base page styling.
*/

:root {
    color-scheme: dark;

    --ar-bg: #07090b;
    --ar-bg-soft: #0b0f13;
    --ar-bg-panel: #10161b;
    --ar-bg-panel-raised: #151c22;

    --ar-red: #d7202f;
    --ar-red-bright: #f03343;
    --ar-red-dark: #8f111c;
    --ar-red-glow: rgba(215, 32, 47, 0.32);

    --ar-text: #f4f5f6;
    --ar-text-soft: #c6ccd2;
    --ar-text-muted: #858e97;
    --ar-text-faint: #59626c;

    --ar-metal: #b8c0c7;
    --ar-metal-dark: #4b555f;
    --ar-border: rgba(184, 192, 199, 0.22);
    --ar-border-soft: rgba(184, 192, 199, 0.12);
    --ar-border-red: rgba(215, 32, 47, 0.66);

    --ar-font-body: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ar-font-display: "Rajdhani", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --ar-container: 1180px;
    --ar-gutter: 24px;

    --ar-space-1: 4px;
    --ar-space-2: 8px;
    --ar-space-3: 12px;
    --ar-space-4: 16px;
    --ar-space-5: 24px;
    --ar-space-6: 32px;
    --ar-space-7: 48px;
    --ar-space-8: 64px;

    --ar-radius-sm: 4px;
    --ar-radius-md: 8px;
    --ar-radius-lg: 14px;

    --ar-shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.34);
    --ar-shadow-red: 0 0 28px rgba(215, 32, 47, 0.20);

    --ar-line: 1px solid var(--ar-border);
    --ar-transition-fast: 160ms ease;
    --ar-transition-med: 260ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--ar-bg);
}

body {
    min-height: 100%;
    margin: 0;
    background:
        radial-gradient(circle at 80% 0%, rgba(215, 32, 47, 0.13), transparent 32rem),
        radial-gradient(circle at 10% 12%, rgba(184, 192, 199, 0.08), transparent 28rem),
        linear-gradient(180deg, #090c10 0%, var(--ar-bg) 42%, #050607 100%);
    color: var(--ar-text);
    font-family: var(--ar-font-body);
    font-size: 16px;
    line-height: 1.55;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

.ar-page {
    min-height: 100vh;
    position: relative;
    overflow-x: clip;
}

.ar-site-main {
    min-height: calc(100vh - 76px - 4rem);
}

.ar-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.42;
    background:
        linear-gradient(120deg, transparent 0 18%, rgba(215, 32, 47, 0.10) 18.1% 18.25%, transparent 18.35% 100%),
        linear-gradient(145deg, transparent 0 62%, rgba(184, 192, 199, 0.08) 62.1% 62.25%, transparent 62.35% 100%);
}

.ar-container {
    width: min(var(--ar-container), calc(100% - (var(--ar-gutter) * 2)));
    margin-inline: auto;
}

.ar-kicker {
    color: var(--ar-red-bright);
    font-family: var(--ar-font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ar-display {
    margin: 0;
    font-family: var(--ar-font-display);
    font-size: clamp(2.25rem, 7vw, 5.25rem);
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 0.95;
    text-transform: uppercase;
}

.ar-heading {
    margin: 0;
    font-family: var(--ar-font-display);
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    font-weight: 750;
    letter-spacing: 0.045em;
    line-height: 1.08;
    text-transform: uppercase;
}

.ar-subheading {
    margin: 0;
    color: var(--ar-text-soft);
    font-size: 1.05rem;
    line-height: 1.65;
}

.ar-muted {
    color: var(--ar-text-muted);
}

.ar-red {
    color: var(--ar-red-bright);
}

.ar-section {
    padding-block: var(--ar-space-7);
}

.ar-panel {
    position: relative;
    border: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 26%),
        linear-gradient(180deg, var(--ar-bg-panel-raised), var(--ar-bg-panel));
    box-shadow: var(--ar-shadow-panel);
}

.ar-site-brand--image {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ar-site-brand__logo {
    display: block;
    width: clamp(220px, 28vw, 360px);
    height: auto;
}

/*
    Shared cut-corner border renderer.
    Components can opt in with .ar-cut-border, or use existing component selectors
    that are aliased below for backward compatibility.

    Reserved pseudo-element: ::after draws the border.
    Decorative shapes should use ::before or a real child element.
*/
.ar-cut-border,
.ar-panel--cut,
.ar-feature-panel--cut,
.ar-callout-panel,
.ar-image-frame--cut {
    --ar-cut-size: 30px;
    --ar-cut-border-width: 1px;
    --ar-cut-border-color: var(--ar-border);
    --ar-cut-diagonal-half-width: 1px;
}

.ar-cut-border::after,
.ar-panel--cut::after,
.ar-feature-panel--cut::after,
.ar-callout-panel::after,
.ar-image-frame--cut::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;

    background:
        linear-gradient(var(--ar-cut-border-color) 0 0)
            top left /
            calc(100% - var(--ar-cut-size)) var(--ar-cut-border-width)
            no-repeat,

        linear-gradient(
            45deg,
            transparent calc(50% - var(--ar-cut-diagonal-half-width)),
            var(--ar-cut-border-color) calc(50% - var(--ar-cut-diagonal-half-width)),
            var(--ar-cut-border-color) calc(50% + var(--ar-cut-diagonal-half-width)),
            transparent calc(50% + var(--ar-cut-diagonal-half-width))
        )
            top right /
            var(--ar-cut-size) var(--ar-cut-size)
            no-repeat,

        linear-gradient(var(--ar-cut-border-color) 0 0)
            bottom right /
            var(--ar-cut-border-width) calc(100% - var(--ar-cut-size))
            no-repeat,

        linear-gradient(var(--ar-cut-border-color) 0 0)
            bottom right /
            calc(100% - var(--ar-cut-size)) var(--ar-cut-border-width)
            no-repeat,

        linear-gradient(
            45deg,
            transparent calc(50% - var(--ar-cut-diagonal-half-width)),
            var(--ar-cut-border-color) calc(50% - var(--ar-cut-diagonal-half-width)),
            var(--ar-cut-border-color) calc(50% + var(--ar-cut-diagonal-half-width)),
            transparent calc(50% + var(--ar-cut-diagonal-half-width))
        )
            bottom left /
            var(--ar-cut-size) var(--ar-cut-size)
            no-repeat,

        linear-gradient(var(--ar-cut-border-color) 0 0)
            top left /
            var(--ar-cut-border-width) calc(100% - var(--ar-cut-size))
            no-repeat;
}

.ar-panel--cut {
    --ar-cut-size: 26px;
    --ar-cut-border-color: rgba(184, 192, 199, 0.32);

    clip-path: polygon(
        0 0,
        calc(100% - var(--ar-cut-size)) 0,
        100% var(--ar-cut-size),
        100% 100%,
        var(--ar-cut-size) 100%,
        0 calc(100% - var(--ar-cut-size))
    );
}

.ar-panel--red-edge {
    --ar-cut-border-color: rgba(215, 32, 47, 0.82);
}

.ar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.75rem 1.15rem;
    border: 1px solid var(--ar-border);
    border-radius: var(--ar-radius-sm);
    color: var(--ar-text);
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    text-transform: uppercase;
    transition:
        transform var(--ar-transition-fast),
        border-color var(--ar-transition-fast),
        background-color var(--ar-transition-fast),
        box-shadow var(--ar-transition-fast);
}

.ar-button:hover {
    transform: translateY(-1px);
}

.ar-button--primary {
    border-color: rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, var(--ar-red-bright), var(--ar-red) 52%, var(--ar-red-dark));
    box-shadow: 0 0 0 1px rgba(215, 32, 47, 0.22), var(--ar-shadow-red);
}

.ar-button--primary:hover {
    box-shadow: 0 0 0 1px rgba(215, 32, 47, 0.42), 0 0 38px rgba(215, 32, 47, 0.30);
}

.ar-button--secondary {
    background: rgba(255, 255, 255, 0.035);
}

.ar-button--secondary:hover {
    border-color: var(--ar-border-red);
    background: rgba(215, 32, 47, 0.08);
}

.ar-button--danger {
    border-color: rgba(215, 32, 47, 0.70);
    color: var(--ar-red-bright);
    background: rgba(215, 32, 47, 0.08);
}

.ar-button--danger:hover {
    border-color: var(--ar-red-bright);
    background: rgba(215, 32, 47, 0.16);
    box-shadow: 0 0 0 1px rgba(215, 32, 47, 0.28);
}

.ar-button__icon {
    width: 0;
    height: 0;
    border-block: 6px solid transparent;
    border-left: 9px solid currentColor;
}

.ar-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(215, 32, 47, 0.58);
    border-radius: var(--ar-radius-sm);
    background: rgba(215, 32, 47, 0.14);
    color: var(--ar-red-bright);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.ar-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: var(--ar-space-4);
}

.ar-swatch {
    min-height: 112px;
    padding: var(--ar-space-4);
    border: var(--ar-line);
    background: var(--swatch-color);
}

.ar-swatch span {
    display: block;
    color: var(--ar-text);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ar-swatch code {
    display: block;
    margin-top: 0.35rem;
    color: var(--ar-text-soft);
    font-size: 0.78rem;
}

@media (max-width: 1000px) {
    :root {
        --ar-gutter: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 680px) {
    .ar-site-brand__logo {
        width: 220px;
    }
}