/* ============================================================
   Hayat Tayyebah - Design System
   نظام طراحی رسمی، حوزوی و پژوهشی
   ============================================================ */

:root {
    --ds-green-900: #052e24;
    --ds-green-800: #064e3b;
    --ds-green-700: #0f3d2e;
    --ds-green-600: #14532d;
    --ds-green-500: #166534;

    --ds-gold-700: #b7791f;
    --ds-gold-600: #d6a84f;
    --ds-gold-100: #fff7df;

    --ds-slate-950: #020617;
    --ds-slate-900: #0f172a;
    --ds-slate-800: #1e293b;
    --ds-slate-700: #334155;
    --ds-slate-600: #475569;
    --ds-slate-500: #64748b;

    --ds-bg: #f7f7f1;
    --ds-bg-soft: #fafaf6;
    --ds-card: #ffffff;
    --ds-border: #e5e7eb;

    --ds-danger: #dc2626;
    --ds-warning: #d97706;
    --ds-info: #2563eb;
    --ds-success: #16a34a;

    --ds-radius-xl: 30px;
    --ds-radius-lg: 24px;
    --ds-radius-md: 18px;
    --ds-radius-sm: 12px;

    --ds-shadow-sm: 0 8px 24px rgba(15, 23, 42, .06);
    --ds-shadow-md: 0 16px 45px rgba(15, 23, 42, .08);
    --ds-shadow-lg: 0 24px 70px rgba(15, 23, 42, .12);

    --ds-font: Tahoma, Arial, sans-serif;
}

/* ---------- Base ---------- */

body {
    font-family: var(--ds-font);
    color: var(--ds-slate-800);
    background:
        radial-gradient(circle at top right, rgba(214, 168, 79, .15), transparent 25%),
        radial-gradient(circle at 10% 20%, rgba(20, 83, 45, .09), transparent 28%),
        linear-gradient(180deg, #fbfbf7, var(--ds-bg));
    line-height: 1.9;
}

.container {
    max-width: 1180px;
    margin-inline: auto;
}

a {
    color: var(--ds-green-600);
    text-decoration: none;
}

a:hover {
    color: var(--ds-gold-700);
}

::selection {
    background: var(--ds-gold-600);
    color: #fff;
}

/* ---------- Typography ---------- */

.ds-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(214, 168, 79, .14);
    color: var(--ds-gold-700);
    border: 1px solid rgba(214, 168, 79, .35);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 800;
    font-size: 13px;
}

.ds-title {
    color: var(--ds-green-900);
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.45;
    margin: 16px 0;
    letter-spacing: -1px;
}

.ds-subtitle {
    color: var(--ds-slate-600);
    font-size: 17px;
    line-height: 2.15;
    max-width: 880px;
}

/* ---------- Hero ---------- */

.ds-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(5, 46, 36, .96), rgba(15, 23, 42, .96)),
        radial-gradient(circle at 15% 20%, rgba(214,168,79,.22), transparent 35%);
    color: #fff;
    border-radius: var(--ds-radius-xl);
    padding: 46px;
    margin: 26px 0 30px;
    border-bottom: 7px solid var(--ds-gold-600);
    box-shadow: var(--ds-shadow-lg);
}

.ds-hero:before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(214, 168, 79, .22);
    border-radius: 22px;
    pointer-events: none;
}

.ds-hero > * {
    position: relative;
    z-index: 1;
}

.ds-hero .ds-title {
    color: #fff;
}

.ds-hero .ds-subtitle {
    color: #e9f7ef;
}

/* ---------- Buttons ---------- */

.ds-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ds-green-600);
    color: #fff !important;
    border: 0;
    border-radius: 14px;
    padding: 12px 20px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(20, 83, 45, .22);
    transition: .2s ease;
}

.ds-btn:hover {
    transform: translateY(-2px);
    background: var(--ds-green-800);
    color: #fff !important;
}

.ds-btn-gold {
    background: var(--ds-gold-600);
    color: var(--ds-slate-950) !important;
    box-shadow: 0 12px 30px rgba(214, 168, 79, .25);
}

.ds-btn-dark {
    background: var(--ds-slate-900);
}

/* ---------- Cards ---------- */

.ds-section {
    margin-top: 34px;
}

.ds-section-title {
    color: var(--ds-green-900);
    font-size: 27px;
    border-right: 6px solid var(--ds-gold-600);
    padding-right: 14px;
    margin-bottom: 18px;
}

.ds-grid {
    display: grid;
    gap: 18px;
}

.ds-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ds-card {
    background: var(--ds-card);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: 22px;
    box-shadow: var(--ds-shadow-sm);
    transition: .22s ease;
    position: relative;
    overflow: hidden;
}

.ds-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ds-shadow-md);
}

.ds-card:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 7px;
    height: 100%;
    background: linear-gradient(180deg, var(--ds-green-600), var(--ds-gold-600));
}

.ds-card h3 {
    color: var(--ds-green-900);
    margin: 0 0 10px;
    font-size: 20px;
}

.ds-card p {
    color: var(--ds-slate-600);
    line-height: 2.05;
    margin: 0;
}

.ds-card small {
    color: var(--ds-slate-500);
}

/* ---------- Scientific Boxes ---------- */

.ds-note,
.ds-warning,
.ds-danger,
.ds-success,
.ds-source,
.ds-analysis {
    border-radius: var(--ds-radius-md);
    padding: 18px 20px;
    line-height: 2.1;
    margin: 18px 0;
}

.ds-note {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-right: 5px solid var(--ds-info);
}

.ds-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-right: 5px solid var(--ds-warning);
}

.ds-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-right: 5px solid var(--ds-danger);
}

.ds-success {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-right: 5px solid var(--ds-success);
}

.ds-source {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-right: 5px solid var(--ds-slate-700);
}

.ds-analysis {
    background: var(--ds-gold-100);
    border: 1px solid #fde68a;
    border-right: 5px solid var(--ds-gold-600);
}

/* ---------- Badges ---------- */

.ds-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 13px;
    font-weight: 800;
}

.ds-badge-green {
    background: #ecfdf5;
    color: #166534;
}

.ds-badge-gold {
    background: #fffbeb;
    color: #92400e;
}

.ds-badge-blue {
    background: #eff6ff;
    color: #1d4ed8;
}

.ds-badge-red {
    background: #fef2f2;
    color: #991b1b;
}

/* ---------- Tables ---------- */

.ds-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--ds-shadow-sm);
}

.ds-table th,
.ds-table td {
    border: 1px solid var(--ds-border);
    padding: 13px;
    text-align: right;
    vertical-align: top;
    line-height: 2;
}

.ds-table th {
    background: #f1f5f9;
    color: var(--ds-green-900);
}

/* ---------- Forms ---------- */

.ds-form {
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: 24px;
    box-shadow: var(--ds-shadow-sm);
}

.ds-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--ds-green-900);
    font-weight: 800;
}

.ds-form input,
.ds-form textarea,
.ds-form select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    margin-bottom: 16px;
}

.ds-form input:focus,
.ds-form textarea:focus,
.ds-form select:focus {
    outline: none;
    border-color: var(--ds-green-600);
    box-shadow: 0 0 0 4px rgba(20, 83, 45, .12);
}

/* ---------- Home Preview ---------- */

.ds-home-shell {
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229,231,235,.85);
    border-radius: var(--ds-radius-xl);
    padding: 30px;
    box-shadow: var(--ds-shadow-md);
}

.ds-stat {
    text-align: center;
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--ds-shadow-sm);
}

.ds-stat strong {
    display: block;
    color: var(--ds-green-900);
    font-size: 31px;
}

.ds-stat span {
    color: var(--ds-slate-500);
}

.ds-path-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--ds-border);
    border-radius: 20px;
    padding: 18px;
    box-shadow: var(--ds-shadow-sm);
}

.ds-path-number {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--ds-green-600);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
}

/* ---------- Responsive ---------- */

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

    .ds-hero {
        padding: 30px;
    }
}

@media (max-width: 700px) {
    .ds-hero,
    .ds-home-shell {
        padding: 22px;
        border-radius: 22px;
    }

    .ds-actions {
        flex-direction: column;
    }

    .ds-btn {
        width: 100%;
    }

    .ds-title {
        font-size: 28px;
    }
}