/*
 * Urticad Gold System
 * Source reference: /Users/pema/Documents/uart/design-system
 * Scope: public Urticad pages, shared shell, content surfaces, forms.
 */

:root {
    --ur-bg: #fbf8f1;
    --ur-bg-2: #ebe3d2;
    --ur-paper: oklch(97% 0.018 88);
    --ur-paper-2: oklch(94% 0.028 86);
    --ur-surface: oklch(99% 0.01 90);
    --ur-ink: oklch(34% 0.035 83);
    --ur-ink-soft: oklch(55% 0.032 82);
    --ur-gold: oklch(74% 0.09 82);
    --ur-gold-deep: oklch(56% 0.085 78);
    --ur-gold-dark: oklch(44% 0.075 74);
    --ur-silver: oklch(89% 0.012 92);
    --ur-silver-line: oklch(74% 0.015 90);
    --ur-hairline: oklch(86% 0.03 84);
    --ur-hairline-strong: #d3c4a6;
    --ur-success: oklch(56% 0.07 120);
    --ur-danger: oklch(54% 0.13 32);
    --ur-radius-sm: 6px;
    --ur-radius-md: 10px;
    --ur-radius-lg: 16px;
    --ur-radius-xl: 24px;
    --ur-radius-pill: 999px;
    --ur-space-xs: 4px;
    --ur-space-sm: 8px;
    --ur-space-md: 12px;
    --ur-space-lg: 16px;
    --ur-space-xl: 24px;
    --ur-space-2xl: 32px;
    --ur-space-3xl: 48px;
    --ur-space-4xl: 64px;
    --ur-font-display: Georgia, 'Times New Roman', serif;
    --ur-font-body: 'Avenir Next', Montserrat, system-ui, sans-serif;
    --ur-font-mono: Menlo, 'SF Mono', monospace;
    --ur-shadow-soft: 0 18px 45px rgba(91, 79, 59, 0.08);
    --ur-shadow-deep: 0 28px 90px rgba(91, 79, 59, 0.16);
    --ur-card-glass: linear-gradient(145deg, color-mix(in oklch, var(--ur-surface) 94%, white), color-mix(in oklch, var(--ur-paper-2) 72%, var(--ur-gold)));
    --ur-card-border: color-mix(in oklch, var(--ur-gold) 42%, transparent);

    --warm-gold: var(--ur-gold);
    --deep-gold: var(--ur-gold-deep);
    --aurora-teal: var(--ur-gold);
    --aurora-purple: var(--ur-silver-line);
    --ice-white: var(--ur-ink);
    --pure-white: var(--ur-paper);
    --text-muted: var(--ur-ink-soft);
    --text-light: color-mix(in oklch, var(--ur-ink) 84%, white);
    --glass-bg: color-mix(in oklch, var(--ur-surface) 92%, transparent);
    --glass-border: color-mix(in oklch, var(--ur-gold) 22%, transparent);
    --surface: var(--ur-paper);
    --surface-elevated: var(--ur-surface);
    --border: color-mix(in oklch, var(--ur-gold) 22%, transparent);
    --radius-md: var(--ur-radius-md);
    --radius-lg: var(--ur-radius-lg);
}

body {
    background-color: var(--ur-bg) !important;
    background-image:
        linear-gradient(180deg, #fffdf8 0%, #fbf8f1 46%, #f4eee1 100%) !important;
    color: var(--ur-ink) !important;
    font-family: var(--ur-font-body);
}

#starfield,
.aurora-trigger {
    display: none !important;
}

.navbar,
.navbar.scrolled {
    background: rgba(251, 248, 241, 0.94) !important;
    border-bottom: 1px solid var(--ur-hairline) !important;
    box-shadow: 0 10px 34px rgba(91, 79, 59, 0.08) !important;
    backdrop-filter: blur(18px);
}

.logo,
.nav-links a,
.footer a {
    color: var(--ur-ink) !important;
}

.logo-icon {
    background: var(--ur-paper-2) !important;
    border: 1px solid var(--ur-hairline-strong, #d3c4a6) !important;
    box-shadow: none !important;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--ur-gold-dark) !important;
}

.mobile-menu-btn span {
    background: var(--ur-ink) !important;
}

.hero {
    min-height: clamp(560px, 78vh, 760px);
    background: transparent !important;
}

.section {
    background: transparent !important;
}

h1,
h2,
h3,
h4,
.font-display,
.logo,
.footer-column h4 {
    font-family: var(--ur-font-display);
    letter-spacing: 0;
}

.navbar.scrolled {
    background: color-mix(in oklch, var(--ur-bg) 88%, transparent);
    border-bottom-color: color-mix(in oklch, var(--ur-gold) 24%, transparent);
}

.logo {
    letter-spacing: 0.12em;
}

.nav-links a,
.section-label,
label,
.showcase-badge {
    letter-spacing: 0.14em;
}

.hero-title,
.section-title,
.showcase-title,
.cta-title {
    letter-spacing: 0;
}

.nav-links a::after,
.footer-column h4::after {
    background: var(--ur-gold);
}

.hero-frame,
.card,
.feature-card,
.content-card,
.app-card,
.mission-card,
.value-card,
.ilr-feature-card,
.visa-card,
.pricing-card,
.support-info-card,
.legal-body,
.cta-frame {
    --ur-card-lift: 0px;
    --ur-card-tilt: 0deg;
    border: 1.5px solid var(--ur-card-border) !important;
    border-radius: var(--ur-radius-lg) !important;
    background: var(--ur-card-glass) !important;
    box-shadow:
        var(--ur-shadow-deep),
        inset 0 1px 0 color-mix(in oklch, white 82%, transparent),
        inset 0 -1px 0 color-mix(in oklch, var(--ur-gold-dark) 18%, transparent) !important;
    backdrop-filter: blur(14px) !important;
    isolation: isolate;
    overflow: hidden;
    position: relative;
    transform: translateY(var(--ur-card-lift, 0px)) rotate(var(--ur-card-tilt, 0deg));
    transform-origin: 50% 72%;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease !important;
}

.features-grid,
.content-grid,
.values-grid,
.apps-grid {
    perspective: 1200px;
}

.card::before,
.feature-card::before,
.content-card::before,
.app-card::before,
.mission-card::before,
.value-card::before,
.ilr-feature-card::before,
.visa-card::before,
.pricing-card::before,
.support-info-card::before,
.legal-body::before,
.cta-frame::before {
    border-radius: calc(var(--ur-radius-lg) - 1px);
    box-shadow:
        inset 0 1px 0 color-mix(in oklch, white 82%, transparent),
        inset 0 -1px 0 color-mix(in oklch, var(--ur-gold-dark) 18%, transparent);
    content: "";
    inset: 1px;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.card::after,
.feature-card::after,
.content-card::after,
.app-card::after,
.mission-card::after,
.value-card::after,
.ilr-feature-card::after,
.visa-card::after,
.pricing-card::after,
.support-info-card::after,
.legal-body::after,
.cta-frame::after {
    background: radial-gradient(ellipse at center, color-mix(in oklch, var(--ur-gold-dark) 22%, transparent), transparent 68%);
    border-radius: var(--ur-radius-pill);
    bottom: -44px;
    content: "";
    filter: blur(14px);
    height: 78px;
    left: 10%;
    pointer-events: none;
    position: absolute;
    right: 10%;
    z-index: 0;
}

.card > *,
.feature-card > *,
.content-card > *,
.app-card > *,
.mission-card > *,
.value-card > *,
.ilr-feature-card > *,
.visa-card > *,
.pricing-card > *,
.support-info-card > *,
.legal-body > *,
.cta-frame > * {
    position: relative;
    z-index: 1;
}

.feature-card:nth-child(2),
.content-card:nth-child(2),
.app-card:nth-child(2),
.value-card:nth-child(2) {
    --ur-card-lift: 16px;
    --ur-card-tilt: -0.55deg;
}

.feature-card:nth-child(3),
.content-card:nth-child(3),
.app-card:nth-child(3),
.value-card:nth-child(3) {
    --ur-card-lift: -8px;
    --ur-card-tilt: 0.48deg;
}

.hero-frame {
    border-radius: var(--ur-radius-xl);
    max-width: 1040px;
    padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 7vw, 6rem);
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.card:hover,
.feature-card:hover,
.content-card:hover,
.app-card:hover,
.value-card:hover,
.ilr-feature-card:hover,
.visa-card:hover,
.pricing-card:hover {
    border-color: color-mix(in oklch, var(--ur-gold) 56%, transparent) !important;
    box-shadow:
        0 34px 96px rgba(91, 79, 59, 0.2),
        inset 0 1px 0 color-mix(in oklch, white 86%, transparent),
        inset 0 -1px 0 color-mix(in oklch, var(--ur-gold-dark) 22%, transparent) !important;
    transform: translateY(calc(var(--ur-card-lift, 0px) - 6px)) rotate(var(--ur-card-tilt, 0deg)) scale(1.01) !important;
}

.section-label,
.showcase-badge,
.app-badge,
.legal-meta,
.miharana-kicker {
    color: var(--ur-gold-dark);
}

.hero-title,
.showcase-title,
.cta-title,
.app-title,
.about-title,
.legal-title {
    color: var(--ur-ink);
}

.hero-subtitle,
.subtitle,
.showcase-description,
.cta-description,
.feature-card p,
.card p {
    color: var(--text-muted);
}

.btn,
.hero-nav a,
.platform-badge,
.app-meta-item,
.response-badge,
.back-to-top,
.legal-toc a,
.tag-filter {
    border-radius: var(--ur-radius-pill);
}

.btn-primary {
    background: var(--ur-gold);
    color: var(--ur-ink);
    box-shadow: 0 14px 36px color-mix(in oklch, var(--ur-gold) 24%, transparent);
}

.btn-primary:hover {
    background: color-mix(in oklch, var(--ur-gold) 86%, var(--ur-paper));
    box-shadow: 0 18px 48px color-mix(in oklch, var(--ur-gold) 32%, transparent);
}

.btn-secondary,
.hero-nav a,
.platform-badge {
    border-color: color-mix(in oklch, var(--ur-gold) 28%, transparent);
    background: color-mix(in oklch, var(--ur-paper) 78%, var(--ur-gold));
    color: var(--ur-ink);
}

.btn-secondary:hover,
.hero-nav a:hover,
.platform-badge:hover {
    border-color: var(--ur-gold);
    background: color-mix(in oklch, var(--ur-gold) 10%, transparent);
    color: var(--ur-gold);
}

input,
select,
textarea {
    border-color: color-mix(in oklch, var(--ur-gold) 24%, transparent);
    border-radius: var(--ur-radius-md);
    background: var(--ur-surface);
    color: var(--ur-ink);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ur-gold);
    background: var(--ur-surface);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ur-gold) 18%, transparent);
}

.gold-paper-band,
.faq-section,
.legal-summary,
.risk-note,
.mh-certificate-panel {
    background: color-mix(in oklch, var(--ur-silver) 82%, var(--ur-paper));
    color: var(--ur-ink);
    border: 1px solid var(--ur-silver-line);
    border-radius: var(--ur-radius-lg);
}

.legal-summary,
.legal-warning,
.article-summary {
    border: 1px solid color-mix(in oklch, var(--ur-gold) 30%, transparent);
    background: var(--ur-surface);
    border-radius: var(--ur-radius-lg);
}

.legal-warning--red,
.form-message.is-error {
    border-color: color-mix(in oklch, var(--ur-danger) 45%, transparent);
    color: color-mix(in oklch, var(--ur-danger) 78%, var(--ur-paper));
}

.form-message.is-success {
    border-color: color-mix(in oklch, var(--ur-success) 45%, transparent);
    background: color-mix(in oklch, var(--ur-success) 12%, transparent);
    color: color-mix(in oklch, var(--ur-success) 78%, var(--ur-paper));
}

.form-message.is-error {
    background: color-mix(in oklch, var(--ur-danger) 12%, transparent);
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none;
}

.section-header p,
.featured .section-header p,
.showcase-description,
.showcase-features li,
.footer,
.footer p,
.footer-column li,
.version-tag {
    color: var(--text-muted) !important;
}

.feature-icon,
.exploded-layer,
.showcase-visual,
.showcase-content {
    border-color: color-mix(in oklch, var(--ur-gold) 24%, transparent) !important;
    background: var(--ur-surface) !important;
    color: var(--ur-ink) !important;
    box-shadow: var(--ur-shadow-soft) !important;
}

.feature-icon,
.exploded-layer {
    color: var(--ur-gold-dark) !important;
}

.showcase.section {
    background: color-mix(in oklch, var(--ur-paper-2) 58%, var(--ur-paper)) !important;
}

.showcase-badge,
.app-badge,
.response-badge,
.platform-badge {
    background: color-mix(in oklch, var(--ur-gold) 14%, var(--ur-paper)) !important;
    border: 1px solid color-mix(in oklch, var(--ur-gold) 32%, transparent) !important;
    color: var(--ur-gold-dark) !important;
}

.showcase-features li::before {
    color: var(--ur-gold-dark) !important;
}

.connect-line {
    background: linear-gradient(180deg, transparent, var(--ur-gold), transparent) !important;
}

.text-bio,
.text-ai,
.text-mind {
    color: var(--ur-gold-dark) !important;
}

.footer-column h4,
.footer-brand .logo {
    color: var(--ur-ink) !important;
}

.version-tag {
    background: transparent !important;
    opacity: 0.72;
}

.footer {
    background: var(--ur-paper-2) !important;
    border-top-color: var(--ur-hairline) !important;
    color: var(--ur-ink);
}

.version-tag {
    font-family: var(--ur-font-mono);
}

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

@media (max-width: 768px) {
    .btn-group,
    .hero-nav {
        gap: var(--ur-space-md);
    }

    .btn {
        justify-content: center;
        white-space: normal;
    }
}