/*
 * Azibom design system
 * Runtime source of truth. See docs/DESIGN-SYSTEM.md.
 */

:root {
    color-scheme: light;
    --az-color-canvas: #f9f9fc;
    --az-color-surface: #ffffff;
    --az-color-surface-soft: #f5f5f8;
    --az-color-primary-soft: #f1f0ff;
    --az-color-ink: #25252d;
    --az-color-text: #4a4a57;
    --az-color-muted: #747481;
    --az-color-subtle: #9c9ca7;
    --az-color-border: #ececf1;
    --az-color-border-strong: #d9d9e2;
    --az-color-primary: #4f46e5;
    --az-color-primary-strong: #4338ca;
    --az-color-success: #15803d;
    --az-color-success-soft: #ecfdf3;
    --az-color-warning: #a16207;
    --az-color-warning-soft: #fffbeb;
    --az-color-danger: #b42318;
    --az-color-danger-soft: #fef3f2;
    --az-color-info: #0369a1;

    --az-text-xs: 0.75rem;
    --az-text-sm: 0.875rem;
    --az-text-base: 1rem;
    --az-text-lg: 1.125rem;
    --az-text-xl: 1.25rem;
    --az-text-2xl: clamp(1.375rem, 1.22rem + 0.62vw, 1.625rem);
    --az-text-3xl: clamp(1.75rem, 1.43rem + 1.28vw, 2.25rem);
    --az-text-display: clamp(2.125rem, 1.57rem + 2.22vw, 3rem);
    --az-leading-tight: 1.35;
    --az-leading-heading: 1.55;
    --az-leading-body: 1.9;

    --az-radius-xs: 0.25rem;
    --az-radius-sm: 0.5rem;
    --az-radius-md: 0.75rem;
    --az-radius-lg: 1rem;
    --az-radius-pill: 999px;

    --az-shadow-card: 0 1px 2px rgba(37, 37, 45, 0.025),
        0 8px 24px -20px rgba(37, 37, 45, 0.18);
    --az-shadow-raised: 0 14px 34px -24px rgba(37, 37, 45, 0.26);
    --az-focus-ring: 0 0 0 2px rgba(79, 70, 229, 0.16);
    --az-motion-fast: 160ms;
    --az-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

html,
body {
    background: var(--az-color-canvas);
    color: var(--az-color-text);
}

body {
    font-family: Vazirmatn, Tahoma, Arial, sans-serif;
    font-size: var(--az-text-base);
    line-height: var(--az-leading-body);
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--az-color-primary-soft);
    color: var(--az-color-ink);
}

:where(a, button, input, select, textarea, summary) {
    transition-duration: var(--az-motion-fast);
    transition-property: color, background-color, border-color, box-shadow,
        opacity, transform;
    transition-timing-function: var(--az-ease-standard);
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--az-color-primary);
    outline-offset: 3px;
}

body h1,
body h2,
body h3,
body h4 {
    color: var(--az-color-ink);
    font-weight: 500;
    text-wrap: balance;
}

body h1 {
    font-size: var(--az-text-3xl) !important;
    line-height: var(--az-leading-tight) !important;
}

body.home h1 {
    font-size: var(--az-text-display) !important;
}

/* The home-page opening text is a long quotation, not a short display label. */
body.home .home-hero__title {
    font-size: var(--az-text-3xl) !important;
    line-height: var(--az-leading-heading) !important;
    max-inline-size: 22ch;
}

body h2 {
    font-size: var(--az-text-2xl) !important;
    line-height: var(--az-leading-heading) !important;
}

body h3,
.simple-card-title {
    font-size: var(--az-text-xl) !important;
    line-height: var(--az-leading-heading) !important;
}

body h4 {
    font-size: var(--az-text-lg) !important;
    line-height: var(--az-leading-heading) !important;
}

:where(p, li, dd, blockquote) {
    line-height: var(--az-leading-body);
}

a:link,
a:visited {
    color: var(--az-color-primary);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--az-color-primary-strong);
}

.site-shell {
    min-height: 100vh;
    background: var(--az-color-canvas);
}

.home-hero {
    background: linear-gradient(
        to bottom,
        var(--az-color-surface) 0%,
        var(--az-color-surface-soft) 50%,
        var(--az-color-canvas) 100%
    );
}

.home-content-transition {
    background: linear-gradient(
        to bottom,
        var(--az-color-canvas) 0,
        var(--az-color-surface) 24rem
    );
}

.home-section {
    position: relative;
    padding-block: clamp(2.25rem, 4vw, 3.5rem);
    background-color: var(--az-color-surface);
}

.home-section + .home-section::before {
    position: absolute;
    inset-block-start: 0;
    left: 50%;
    width: min(calc(100% - 3rem), 72rem);
    height: 1px;
    background: linear-gradient(
        to left,
        transparent,
        var(--az-color-border) 12%,
        var(--az-color-border) 88%,
        transparent
    );
    content: "";
    transform: translateX(-50%);
}

.home-section__inner {
    width: min(calc(100% - 3rem), 72rem);
    margin-inline: auto;
}

.home-section__header {
    max-inline-size: 42rem;
    margin-inline: 0;
    padding-inline-start: 1rem;
    border-inline-start: 3px solid var(--az-color-primary);
    text-align: start;
}

.home-section__header h2,
.home-section__header p {
    margin-block: 0;
}

.home-section__header p:last-child {
    margin-block-start: .5rem;
    color: var(--az-color-muted);
}

.home-section__content {
    margin-block-start: clamp(2.5rem, 5vw, 4rem);
}

.home-articles__grid {
    row-gap: 3.5rem;
}

.site-header {
    border-bottom: 1px solid rgba(236, 236, 241, 0.72);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 1px 0 rgba(37, 37, 45, 0.015);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.site-navigation {
    min-height: 5rem;
}

.site-brand {
    color: var(--az-color-ink);
    font-size: var(--az-text-2xl);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.site-brand:link,
.site-brand:visited,
.site-brand:hover {
    color: var(--az-color-ink);
    text-decoration: none;
}

.site-icon-button {
    border-radius: var(--az-radius-sm);
    color: var(--az-color-muted);
}

.site-icon-button:hover,
.site-footer a:hover {
    background: var(--az-color-surface-soft);
    color: var(--az-color-ink);
}

.site-account-link {
    border: 1px solid var(--az-color-border);
    border-radius: var(--az-radius-pill);
    padding: 0.45rem 0.9rem;
}

.site-account-link:hover {
    border-color: var(--az-color-border-strong);
    background: var(--az-color-surface-soft);
    text-decoration: none;
}

.site-mobile-panel {
    border-left: 1px solid var(--az-color-border);
    box-shadow: var(--az-shadow-raised);
}

body.is-mobile-menu-open {
    overflow: hidden;
}

#phone-menu-1 {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.28);
}

#phone-menu-2 {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    width: 100%;
    max-width: 24rem;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    background: var(--az-color-surface);
}

.site-footer {
    border-top: 1px solid var(--az-color-border);
    background: var(--az-color-surface);
}

.site-footer a {
    border-radius: var(--az-radius-sm);
    padding: 0.35rem;
}

.menu a:link,
.menu a:visited {
    color: var(--az-color-text);
    font-size: var(--az-text-sm);
    font-weight: 500;
}

.menu a:hover,
.menu .current-menu-item > a {
    color: var(--az-color-primary);
}

.button,
input[type="submit"],
#rcp_submit {
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: var(--az-radius-md);
    background: var(--az-color-surface-soft);
    box-shadow: 0 1px 1px rgba(24, 24, 31, 0.04);
    color: var(--az-color-text) !important;
    font-size: var(--az-text-sm);
    font-weight: 500;
    line-height: 1.4;
}

.button:hover,
input[type="submit"]:hover,
#rcp_submit:hover {
    background: var(--az-color-border);
    color: var(--az-color-ink) !important;
    transform: none;
}

.button-primary,
input[type="submit"],
#rcp_submit {
    background: var(--az-color-primary);
    color: #ffffff !important;
}

.button-primary:hover,
input[type="submit"]:hover,
#rcp_submit:hover {
    background: var(--az-color-primary-strong);
    color: #ffffff !important;
}

.button-outline {
    border-color: var(--az-color-border-strong);
    background: var(--az-color-surface);
}

.button-cancel {
    background: var(--az-color-danger-soft);
    color: var(--az-color-danger) !important;
}

.button-success {
    background: var(--az-color-success-soft);
    color: var(--az-color-success) !important;
}

.button-warning {
    background: var(--az-color-warning-soft);
    color: var(--az-color-warning) !important;
}

.button-telegram {
    border-radius: var(--az-radius-md);
    background: var(--az-color-info);
    font-size: var(--az-text-sm);
    font-weight: 500;
}

.button-icon {
    min-width: 2.75rem;
    padding-inline: 0.75rem;
}

.simple-card,
.inline-question,
#rcp_subscription_levels .rcp_subscription_level,
.single-blog aside > div {
    border: 1px solid var(--az-color-border);
    border-radius: var(--az-radius-lg);
    background: var(--az-color-surface);
    box-shadow: var(--az-shadow-card);
}

.article-card,
.course-summary,
.article-card img,
.single-blog img,
.course-summary img {
    border-radius: var(--az-radius-lg);
}

.single-blog .lg\:col-span-2,
.single-blog .max-w-3xl {
    min-width: 0;
}

.single-blog :is(p, li, h1, h2, h3, h4, h5, h6, a, blockquote) {
    overflow-wrap: anywhere;
}

.single-blog a {
    white-space: normal;
    word-break: break-word;
}

.shadow-sm,
.shadow-lg {
    box-shadow: var(--az-shadow-card);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
select,
textarea {
    border-color: var(--az-color-border-strong);
    border-radius: var(--az-radius-sm);
    background: var(--az-color-surface);
    color: var(--az-color-ink);
    font-size: var(--az-text-base);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
select:focus,
textarea:focus {
    border-color: var(--az-color-primary);
    box-shadow: var(--az-focus-ring);
    outline: 0;
}

input::placeholder,
textarea::placeholder {
    color: var(--az-color-subtle);
}

table {
    overflow: hidden;
    border: 1px solid var(--az-color-border);
    border-radius: var(--az-radius-md);
    background: var(--az-color-surface);
    font-size: var(--az-text-sm);
}

thead {
    background: var(--az-color-surface-soft);
    color: var(--az-color-ink);
}

.prose {
    --tw-prose-body: var(--az-color-text);
    --tw-prose-headings: var(--az-color-ink);
    --tw-prose-lead: var(--az-color-muted);
    --tw-prose-links: var(--az-color-primary);
    --tw-prose-bold: var(--az-color-ink);
    --tw-prose-counters: var(--az-color-muted);
    --tw-prose-bullets: var(--az-color-border-strong);
    --tw-prose-hr: var(--az-color-border);
    --tw-prose-quotes: var(--az-color-ink);
    --tw-prose-quote-borders: var(--az-color-primary);
    --tw-prose-captions: var(--az-color-muted);
    --tw-prose-code: var(--az-color-ink);
    --tw-prose-pre-bg: var(--az-color-ink);
}

/* Compatibility bridge for the utility classes already used by templates. */
.text-black,
.text-text,
.text-gray-900,
.text-gray-800,
.text-slate-800 { color: var(--az-color-ink); }
.text-gray-700,
.text-gray-600,
.text-slate-600 { color: var(--az-color-text); }
.text-gray-500,
.text-gray-400,
.text-slate-400 { color: var(--az-color-muted); }
.text-indigo-600,
.text-indigo-700,
.text-link { color: var(--az-color-primary); }
.text-green-600,
.text-green-700,
.text-green-900 { color: var(--az-color-success); }
.text-yellow-700,
.text-yellow-800 { color: var(--az-color-warning); }
.text-red-500,
.text-red-800 { color: var(--az-color-danger); }

.bg-white { background-color: var(--az-color-surface); }
.bg-gray-50,
.bg-gray-100,
.bg-slate-50,
.bg-slate-100,
.bg-slate-200 { background-color: var(--az-color-surface-soft); }
.bg-gray-400 { background-color: var(--az-color-muted); }
.bg-gray-900\/5 { background-color: var(--az-color-surface-soft); }
.bg-indigo-50 { background-color: var(--az-color-primary-soft); }
.bg-indigo-500,
.bg-indigo-600,
.bg-indigo-700,
.bg-primary-800,
.bg-primary-900 { background-color: var(--az-color-primary); }
.bg-green-100 { background-color: var(--az-color-success-soft); }
.bg-yellow-50,
.bg-yellow-100 { background-color: var(--az-color-warning-soft); }
.bg-red-50,
.bg-red-100 { background-color: var(--az-color-danger-soft); }

.border-gray-200,
.border-gray-300,
.border-slate-100,
.border-slate-200,
.border-slate-300 { border-color: var(--az-color-border); }
.border-slate-400,
.border-slate-500 { border-color: var(--az-color-border-strong); }
.border-indigo-500 { border-color: var(--az-color-primary); }
.border-yellow-200 { border-color: var(--az-color-warning); }
.ring-gray-900\/5,
.ring-gray-900\/10,
.sm\:ring-gray-900\/10 { --tw-ring-color: var(--az-color-border); }
.ring-indigo-500 { --tw-ring-color: var(--az-color-primary); }

.text-indigo-500,
.text-indigo-800 { color: var(--az-color-primary); }

.hover\:bg-gray-100:hover { background-color: var(--az-color-surface-soft); }
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-700:hover { background-color: var(--az-color-primary-strong); }
.hover\:text-gray-500:hover { color: var(--az-color-muted); }
.hover\:text-gray-700:hover,
.group:hover .group-hover\:text-gray-600 { color: var(--az-color-text); }
.hover\:text-indigo-500:hover,
.hover\:text-indigo-600:hover,
.hover\:text-indigo-800:hover,
.group:hover .group-hover\:text-indigo-600 { color: var(--az-color-primary); }
.focus\:border-indigo-500:focus { border-color: var(--az-color-primary); }
.focus\:ring-indigo-500:focus { --tw-ring-color: var(--az-color-primary); }

.text-\[10px\],
.text-\[12px\],
.text-xs { font-size: var(--az-text-xs); }
.text-sm { font-size: var(--az-text-sm); }
.text-base { font-size: var(--az-text-base); }
.text-lg { font-size: var(--az-text-lg); }
.text-xl { font-size: var(--az-text-xl); }
.text-3xl,
.text-4xl { font-size: var(--az-text-3xl); }
.text-6xl { font-size: var(--az-text-display); }

.rounded,
.rounded-md { border-radius: var(--az-radius-sm); }
.rounded-lg,
.rounded-xl { border-radius: var(--az-radius-md); }
.rounded-2xl { border-radius: var(--az-radius-lg); }
.rounded-full { border-radius: var(--az-radius-pill); }
.shadow,
.shadow-sm,
.shadow-lg { box-shadow: var(--az-shadow-card); }
.shadow-2xl { box-shadow: var(--az-shadow-raised); }

@media (max-width: 640px) {
    .site-navigation { min-height: 4.5rem; }
    .site-brand { font-size: var(--az-text-xl); }
    .home-section {
        padding-inline: 1.5rem;
    }
    .home-section__inner {
        width: auto;
    }
    .home-section + .home-section::before {
        width: calc(100% - 3rem);
    }
}

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