/* ==========================================================================
   FARNIKWEB — Global Foundation
   Version: 1.0
   ========================================================================== */

:root {

    /* Brand Colors */
    --fw-primary: #1C39BB;
    --fw-navy: #101D36;
    --fw-misty-blue: #7899D4;
    --fw-ice-blue: #E9F0FA;

    /* Backgrounds */
    --fw-bg: #FAF9F6;
    --fw-bg-warm: #F5F1E8;
    --fw-white: #FFFFFF;

    /* Text */
    --fw-text: #121A29;
    --fw-text-secondary: #667085;

    /* Borders */
    --fw-border: #E5E7EB;

    /* Brand Gradient */
    --fw-gradient: linear-gradient(
        135deg,
        #1C39BB 0%,
        #7899D4 100%
    );

    /* Border Radius */
    --fw-radius-button: 10px;
    --fw-radius-input: 10px;
    --fw-radius-small: 14px;
    --fw-radius-card: 18px;
    --fw-radius-portfolio: 18px;
    --fw-radius-large: 24px;
    --fw-radius-pill: 999px;

    /* Spacing Scale */
    --fw-space-1: 4px;
    --fw-space-2: 8px;
    --fw-space-3: 12px;
    --fw-space-4: 16px;
    --fw-space-6: 24px;
    --fw-space-8: 32px;
    --fw-space-12: 48px;
    --fw-space-16: 64px;
    --fw-space-20: 80px;
    --fw-space-24: 96px;
    --fw-space-30: 120px;

    /* Layout */
    --fw-container: 1280px;
    --fw-container-padding: 32px;

    /* Motion */
    --fw-transition-fast: 150ms;
    --fw-transition: 250ms;
    --fw-transition-slow: 300ms;
}


/* ==========================================================================
   Base & Typography
   ========================================================================== */

/* --------------------------------------------------------------------------
   Document
   -------------------------------------------------------------------------- */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

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

body {
    margin: 0;
    direction: rtl;

    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.9;

    color: var(--fw-text);
    background-color: var(--fw-bg);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}


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

h1,
h2,
h3,
h4,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--fw-text);
}

h1 {
    margin-bottom: var(--fw-space-6);

    font-size: 52px;
    font-weight: 800;
    line-height: 1.3;
}

h2 {
    margin-bottom: var(--fw-space-6);

    font-size: 40px;
    font-weight: 700;
    line-height: 1.35;
}

h3 {
    margin-bottom: var(--fw-space-4);

    font-size: 30px;
    font-weight: 600;
    line-height: 1.4;
}

h4 {
    margin-bottom: var(--fw-space-4);

    font-size: 24px;
    font-weight: 600;
    line-height: 1.5;
}

p {
    margin-bottom: var(--fw-space-4);
}

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

strong,
b {
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Shared Typography Utilities
   -------------------------------------------------------------------------- */

.fw-hero-title {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.25;
}

.fw-body-large {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.9;
}

.fw-small {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

.fw-nav {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.fw-button-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}


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

.fw-latin {
    direction: ltr;
    font-family: 'Poppins', sans-serif;
}

.fw-latin-heading {
    direction: ltr;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

.fw-latin-small {
    direction: ltr;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

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

img,
video {
    height: auto;
}


/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

:focus-visible {
    outline: 2px solid var(--fw-primary);
    outline-offset: 3px;
}


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

@media (max-width: 767px) {

    .fw-hero-title {
        font-size: 40px;
    }

    h1 {
        font-size: 36px;
    }

    h2 {
        font-size: 30px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    .fw-body-large {
        font-size: 17px;
    }
}


/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ==========================================================================
   Layout Foundation
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.fw-container {
    width: 100%;
    max-width: var(--fw-container);
    margin-inline: auto;
    padding-inline: var(--fw-container-padding);
}


/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.fw-section {
    position: relative;
    width: 100%;
    padding-block: var(--fw-space-24);
}

.fw-section--large {
    padding-block: var(--fw-space-30);
}


/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.fw-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--fw-space-6);
}


/* --------------------------------------------------------------------------
   General Layout Utilities
   -------------------------------------------------------------------------- */

.fw-full-width {
    width: 100%;
}

.fw-relative {
    position: relative;
}

.fw-overflow-hidden {
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    :root {
        --fw-container-padding: 24px;
    }

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

    .fw-section,
    .fw-section--large {
        padding-block: var(--fw-space-20);
    }
}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    :root {
        --fw-container-padding: 20px;
    }

    .fw-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--fw-space-4);
    }

    .fw-section,
    .fw-section--large {
        padding-block: var(--fw-space-16);
    }
}
/* ==========================================================================
   Shared Components Foundation
   ========================================================================== */

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

.fw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fw-space-2);

    min-height: 48px;
    padding-inline: var(--fw-space-6);

    border: 1px solid transparent;
    border-radius: var(--fw-radius-button);

    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--fw-transition) ease,
        border-color var(--fw-transition) ease,
        color var(--fw-transition) ease,
        transform var(--fw-transition-fast) ease;
}

.fw-button--primary {
    color: var(--fw-white);
    background-color: var(--fw-primary);
}

.fw-button--primary:hover {
    color: var(--fw-white);
    background-color: #1732A6;
    transform: translateY(-1px);
}

.fw-button--secondary {
    color: var(--fw-navy);
    background-color: transparent;
    border-color: var(--fw-border);
}

.fw-button--secondary:hover {
    color: var(--fw-navy);
    background-color: var(--fw-ice-blue);
    transform: translateY(-1px);
}


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

.fw-card {
    background-color: var(--fw-white);
    border: 1px solid var(--fw-border);
    border-radius: var(--fw-radius-card);
    padding: var(--fw-space-8);
}

.fw-card--interactive {
    transition:
        transform var(--fw-transition) ease,
        box-shadow var(--fw-transition) ease,
        border-color var(--fw-transition) ease;
}

.fw-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(16, 29, 54, 0.08);
}


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

.fw-field {
    display: flex;
    flex-direction: column;
    gap: var(--fw-space-2);
}

.fw-label {
    color: var(--fw-text);
    font-family: 'Vazirmatn', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.fw-input,
.fw-textarea,
.fw-select {
    width: 100%;

    border: 1px solid var(--fw-border);
    border-radius: var(--fw-radius-input);

    color: var(--fw-text);
    background-color: var(--fw-white);

    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;

    transition:
        border-color var(--fw-transition-fast) ease,
        box-shadow var(--fw-transition-fast) ease;
}

.fw-input,
.fw-select {
    height: 52px;
    padding-inline: var(--fw-space-4);
}

.fw-textarea {
    min-height: 140px;
    padding: var(--fw-space-4);
    resize: vertical;
}

.fw-input::placeholder,
.fw-textarea::placeholder {
    color: var(--fw-text-secondary);
    opacity: 1;
}

.fw-input:focus,
.fw-textarea:focus,
.fw-select:focus {
    border-color: var(--fw-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(28, 57, 187, 0.10);
}


/* --------------------------------------------------------------------------
   Mobile Components
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {

    .fw-button--mobile-full {
        width: 100%;
    }

    .fw-card {
        padding: var(--fw-space-6);
    }
}
/* Whole-card links remain keyboard accessible without nesting anchors. */
[data-fw-card-href] { cursor: pointer; }
[data-fw-card-href]:focus-visible {
	outline: 3px solid rgba(28, 57, 187, .28);
	outline-offset: 4px;
}