/**
 * Apollo V2 Design System — Global Tokens & Base Components
 *
 * Loaded site-wide via apollo-templates.
 * Prefix: av2-
 * Theme: Exotic Modern Clean Minimalist (Light)
 *
 * @package Apollo\Templates
 * @since 2.0.0
 */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    /* ─── Typography ─── */
    --av2-ff-fun:  "Syne", sans-serif;
    --av2-ff-mono: "Space Mono", monospace;
    --av2-ff-main: "Space Grotesk", system-ui, sans-serif;

    /* ─── Colors ─── */
    --av2-primary: FF9820;
    --av2-primary-hover: #ff7a1a;
    --av2-bg: #ffffff;
    --av2-surface: #f4f4f5;
    --av2-surface-hover: #ececed;
    --av2-border: #e4e4e7;
    --av2-border-light: #f0f0f2;
    --av2-black: #121214;
    --av2-grey: #666;
    --av2-grey-light: #999;
    --av2-white: #ffffff;
    --av2-danger: #ef4444;
    --av2-success: #22c55e;
    --av2-link: #2563eb;

    /* ─── Spacing & Sizing ─── */
    --av2-r-xs: 4px;
    --av2-r-sm: 8px;
    --av2-radius: 16px;
    --av2-r-lg: 24px;
    --av2-r-pill: 100px;
    --av2-max-w: 1280px;

    /* ─── Motion ─── */
    --av2-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --av2-transition: 0.3s var(--av2-ease);
    --av2-transition-fast: 0.15s var(--av2-ease);
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL RESET / BASE (non-destructive)
   ═══════════════════════════════════════════════════════════ */

.av2-scope,
.av2-scope *,
.av2-scope *::before,
.av2-scope *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.av2-scope {
    font-family: var(--av2-ff-main);
    color: var(--av2-black);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.av2-scope a {
    color: inherit;
    text-decoration: none;
}

.av2-scope img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

.av2-heading-xl {
    font-family: var(--av2-ff-main);
    font-size: clamp(48px, 10vw, 140px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--av2-black);
}

.av2-heading-lg {
    font-family: var(--av2-ff-main);
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.av2-heading-md {
    font-family: var(--av2-ff-main);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.2;
}

.av2-heading-sm {
    font-family: var(--av2-ff-main);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.av2-label {
    font-family: var(--av2-ff-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--av2-grey);
}

.av2-body {
    font-family: var(--av2-ff-main);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--av2-black);
}

.av2-body-lg {
    font-family: var(--av2-ff-main);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
}

.av2-mono {
    font-family: var(--av2-ff-mono);
}

.av2-fun {
    font-family: var(--av2-ff-fun);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.av2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--av2-r-sm);
    font-family: var(--av2-ff-main);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all var(--av2-transition);
    text-decoration: none;
    line-height: 1;
}

.av2-btn--primary {
    background: var(--av2-black);
    color: var(--av2-white);
}

.av2-btn--primary::before {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 100%;
    background: var(--av2-primary);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--av2-transition);
}

.av2-btn--primary:hover::before {
    transform: scaleY(1);
}

.av2-btn--primary span,
.av2-btn--primary i {
    position: relative;
    z-index: 1;
}

.av2-btn--secondary {
    background: transparent;
    color: var(--av2-black);
    border: 1px solid var(--av2-border);
}

.av2-btn--secondary:hover {
    background: var(--av2-black);
    color: var(--av2-white);
    border-color: var(--av2-black);
}

.av2-btn--ghost {
    background: transparent;
    color: var(--av2-grey);
    padding: 8px 16px;
}

.av2-btn--ghost:hover {
    color: var(--av2-black);
    background: var(--av2-surface);
}

.av2-btn--sm {
    padding: 8px 16px;
    font-size: 12px;
}

.av2-btn--lg {
    padding: 16px 40px;
    font-size: 16px;
}

.av2-btn--block {
    width: 100%;
}

.av2-btn--disabled,
.av2-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   PILLS & TAGS
   ═══════════════════════════════════════════════════════════ */

.av2-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    border-radius: var(--av2-r-pill);
    background: var(--av2-surface);
    font-family: var(--av2-ff-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--av2-grey);
    transition: all var(--av2-transition-fast);
    white-space: nowrap;
}

.av2-pill:hover {
    background: var(--av2-black);
    color: var(--av2-white);
}

.av2-pill--primary {
    background: var(--av2-primary);
    color: var(--av2-white);
}

.av2-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: var(--av2-r-sm);
    background: var(--av2-surface);
    font-family: var(--av2-ff-main);
    font-size: 13px;
    font-weight: 500;
    color: var(--av2-black);
    transition: all var(--av2-transition-fast);
}

.av2-tag:hover {
    background: var(--av2-black);
    color: var(--av2-white);
}

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */

.av2-card {
    background: var(--av2-bg);
    border: 1px solid var(--av2-border);
    border-radius: var(--av2-r);
    overflow: hidden;
    transition: all var(--av2-transition);
}

.av2-card:hover {
    border-color: var(--av2-black);
}

.av2-card__image {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--av2-surface);
}

.av2-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: all 0.6s var(--av2-ease);
}

.av2-card:hover .av2-card__image img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

.av2-card__body {
    padding: 20px;
}

.av2-card__title {
    font-family: var(--av2-ff-main);
    font-size: 18px;
    font-weight: 600;
    color: var(--av2-black);
    margin-bottom: 8px;
}

.av2-card__meta {
    font-family: var(--av2-ff-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--av2-grey);
}

.av2-card__text {
    font-size: 14px;
    color: var(--av2-grey);
    line-height: 1.6;
    margin-top: 8px;
}

.av2-card__footer {
    padding: 16px 20px;
    border-top: 1px solid var(--av2-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ═══════════════════════════════════════════════════════════
   INFO BLOCKS (mono label + value)
   ═══════════════════════════════════════════════════════════ */

.av2-info-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.av2-info-block__label {
    font-family: var(--av2-ff-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--av2-grey);
}

.av2-info-block__value {
    font-family: var(--av2-ff-main);
    font-size: 18px;
    font-weight: 600;
    color: var(--av2-black);
}

/* ═══════════════════════════════════════════════════════════
   SECTION TITLE PATTERN
   ═══════════════════════════════════════════════════════════ */

.av2-section-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.av2-section-title__text {
    font-family: var(--av2-ff-main);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.av2-section-title__line {
    flex: 1;
    height: 1px;
    background: var(--av2-border);
}

/* ═══════════════════════════════════════════════════════════
   FORM ELEMENTS
   ═══════════════════════════════════════════════════════════ */

.av2-input,
.av2-select,
.av2-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--av2-border);
    border-radius: var(--av2-r-sm);
    font-family: var(--av2-ff-main);
    font-size: 14px;
    color: var(--av2-black);
    background: var(--av2-bg);
    transition: border-color var(--av2-transition-fast);
    outline: none;
}

.av2-input:focus,
.av2-select:focus,
.av2-textarea:focus {
    border-color: var(--av2-primary);
}

.av2-input::placeholder,
.av2-textarea::placeholder {
    color: var(--av2-grey-light);
}

.av2-form-group {
    margin-bottom: 20px;
}

.av2-form-label {
    display: block;
    font-family: var(--av2-ff-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--av2-grey);
    margin-bottom: 8px;
}

.av2-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT HELPERS
   ═══════════════════════════════════════════════════════════ */

.av2-container {
    max-width: var(--av2-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.av2-grid {
    display: grid;
    gap: 24px;
}

.av2-grid--2 { grid-template-columns: repeat(2, 1fr); }
.av2-grid--3 { grid-template-columns: repeat(3, 1fr); }
.av2-grid--4 { grid-template-columns: repeat(4, 1fr); }
.av2-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.av2-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

.av2-flex--between {
    justify-content: space-between;
}

.av2-flex--wrap {
    flex-wrap: wrap;
}

.av2-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════
   AVATAR
   ═══════════════════════════════════════════════════════════ */

.av2-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--av2-surface);
    filter: grayscale(100%);
    transition: filter 0.4s var(--av2-ease);
}

.av2-avatar:hover,
.av2-avatar--color {
    filter: grayscale(0%);
}

.av2-avatar--sm { width: 28px; height: 28px; }
.av2-avatar--md { width: 48px; height: 48px; }
.av2-avatar--lg { width: 64px; height: 64px; }
.av2-avatar--xl { width: 96px; height: 96px; }

/* ═══════════════════════════════════════════════════════════
   GRAYSCALE IMAGE PATTERN
   ═══════════════════════════════════════════════════════════ */

.av2-img-gray {
    filter: grayscale(100%);
    transition: filter 0.6s var(--av2-ease);
}

.av2-img-gray:hover,
*:hover > .av2-img-gray {
    filter: grayscale(0%);
}

/* ═══════════════════════════════════════════════════════════
   BADGE / STATUS
   ═══════════════════════════════════════════════════════════ */

.av2-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--av2-r-pill);
    font-family: var(--av2-ff-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.av2-badge--primary {
    background: var(--av2-primary);
    color: var(--av2-white);
}

.av2-badge--surface {
    background: var(--av2-surface);
    color: var(--av2-grey);
}

.av2-badge--success {
    background: #dcfce7;
    color: #166534;
}

.av2-badge--danger {
    background: #fef2f2;
    color: #991b1b;
}

/* ═══════════════════════════════════════════════════════════
   DIVIDERS
   ═══════════════════════════════════════════════════════════ */

.av2-divider {
    height: 1px;
    background: var(--av2-border);
    border: none;
    margin: 24px 0;
}

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════════════════════ */

.av2-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--av2-black);
    color: var(--av2-white);
    padding: 14px 28px;
    border-radius: var(--av2-r-sm);
    font-family: var(--av2-ff-main);
    font-size: 14px;
    font-weight: 500;
    z-index: 100000;
    opacity: 0;
    transition: all 0.4s var(--av2-ease);
    pointer-events: none;
}

.av2-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */

.av2-empty {
    text-align: center;
    padding: 60px 24px;
    color: var(--av2-grey);
}

.av2-empty__icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.av2-empty__title {
    font-family: var(--av2-ff-main);
    font-size: 18px;
    font-weight: 600;
    color: var(--av2-black);
    margin-bottom: 8px;
}

.av2-empty__text {
    font-size: 14px;
    max-width: 340px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   LOADING SKELETON
   ═══════════════════════════════════════════════════════════ */

.av2-skeleton {
    background: linear-gradient(90deg, var(--av2-surface) 25%, var(--av2-border-light) 50%, var(--av2-surface) 75%);
    background-size: 200% 100%;
    animation: av2-shimmer 1.5s infinite;
    border-radius: var(--av2-r-sm);
}

@keyframes av2-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .av2-grid--2,
    .av2-grid--3,
    .av2-grid--4 {
        grid-template-columns: 1fr;
    }

    .av2-container {
        padding: 0 16px;
    }

    .av2-heading-xl {
        font-size: 48px;
    }
}

@media (max-width: 480px) {
    .av2-btn--lg {
        padding: 14px 28px;
        font-size: 14px;
    }
}