/**
 * Stitch Design System - Professional Banking Core
 * A design system built on reliability, precision, and institutional trust.
 */

:root {
    /* ===== COLORS ===== */
    /* Primary - Corporate Blue */
    --color-primary: #003b72;
    --color-on-primary: #ffffff;
    --color-primary-container: #00529b;
    --color-on-primary-container: #a5c7ff;
    --color-primary-fixed: #d5e3ff;
    --color-primary-fixed-dim: #a6c8ff;
    --color-on-primary-fixed: #001c3b;
    --color-on-primary-fixed-variant: #004787;
    --color-inverse-primary: #a6c8ff;

    /* Secondary - High-energy Red */
    --color-secondary: #bc0004;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #e2261c;
    --color-on-secondary-container: #fffbff;
    --color-secondary-fixed: #ffdad5;
    --color-secondary-fixed-dim: #ffb4a9;
    --color-on-secondary-fixed: #410000;
    --color-on-secondary-fixed-variant: #930002;

    /* Tertiary */
    --color-tertiary: #383c3e;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #4f5355;
    --color-on-tertiary-container: #c3c6c8;
    --color-tertiary-fixed: #e0e3e5;
    --color-tertiary-fixed-dim: #c4c7c9;
    --color-on-tertiary-fixed: #181c1e;
    --color-on-tertiary-fixed-variant: #434749;

    /* Error */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    /* Surface System */
    --color-surface: #fbf9f8;
    --color-surface-dim: #dbd9d9;
    --color-surface-bright: #fbf9f8;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f5f3f3;
    --color-surface-container: #efeded;
    --color-surface-container-high: #eae8e7;
    --color-surface-container-highest: #e4e2e2;
    --color-surface-variant: #e4e2e2;
    --color-surface-tint: #1d5fa8;

    /* On Colors */
    --color-on-surface: #1b1c1c;
    --color-on-surface-variant: #424751;
    --color-inverse-surface: #303030;
    --color-inverse-on-surface: #f2f0f0;
    --color-on-background: #1b1c1c;

    /* Outline */
    --color-outline: #727782;
    --color-outline-variant: #c2c6d3;

    /* Background */
    --color-background: #fbf9f8;

    /* ===== TYPOGRAPHY ===== */
    --font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font Sizes */
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-nav-item: 22px;
    --font-size-body-lg: 18px;
    --font-size-body-md: 16px;
    --font-size-body-sm: 14px;
    --font-size-link-bold: 16px;
    --font-size-label: 12px;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-h1: 1.2;
    --line-height-h2: 1.3;
    --line-height-h3: 1.4;
    --line-height-nav-item: 1.5;
    --line-height-body-lg: 1.6;
    --line-height-body-md: 1.6;
    --line-height-body-sm: 1.5;
    --line-height-link-bold: 1.5;
    --line-height-label: 1;

    /* Letter Spacing */
    --letter-spacing-link-bold: 0.02em;
    --letter-spacing-label: 0.05em;

    /* ===== SPACING ===== */
    --spacing-xs: 4px;
    --spacing-sm: 12px;
    --spacing-base: 8px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 64px;
    --spacing-gutter: 24px;
    --spacing-container-max: 1280px;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 0.25rem;
    --radius-default: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0px 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0px 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0px 25px 50px rgba(0, 0, 0, 0.2);

    /* ===== TRANSITIONS ===== */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/* ===== BASE STYLES ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-body-md);
    line-height: var(--line-height-body-md);
    color: var(--color-on-surface);
    background-color: var(--color-background);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== TYPOGRAPHY CLASSES ===== */
.font-h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
}

.font-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h2);
}

.font-h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
}

.font-nav-item {
    font-size: var(--font-size-nav-item);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-nav-item);
}

.font-body-lg {
    font-size: var(--font-size-body-lg);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-lg);
}

.font-body-md {
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-md);
}

.font-body-sm {
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body-sm);
}

.font-link-bold {
    font-size: var(--font-size-link-bold);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-link-bold);
    letter-spacing: var(--letter-spacing-link-bold);
}

.font-label {
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-label);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

/* ===== COLOR CLASSES ===== */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-on-primary { color: var(--color-on-primary); }
.text-on-secondary { color: var(--color-on-secondary); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }

/* ===== BACKGROUND CLASSES ===== */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container-lowest { background-color: var(--color-surface-container-lowest); }
.bg-white { background-color: var(--color-surface-container-lowest); }
.bg-primary-fixed { background-color: var(--color-primary-fixed); }
.bg-secondary-fixed { background-color: var(--color-secondary-fixed); }
.bg-tertiary-fixed { background-color: var(--color-tertiary-fixed); }
.bg-primary-container { background-color: var(--color-primary-container); }
.bg-secondary-container { background-color: var(--color-secondary-container); }
.bg-on-primary-container { background-color: var(--color-on-primary-container); }

/* ===== BORDER CLASSES ===== */
.border-primary { border-color: var(--color-primary); }
.border-outline { border-color: var(--color-outline); }
.border-outline-variant { border-color: var(--color-outline-variant); }

/* ===== BUTTON BASE ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-default);
    font-family: var(--font-family);
    font-size: var(--font-size-link-bold);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-link-bold);
    letter-spacing: var(--letter-spacing-link-bold);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: var(--color-primary-container);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-container);
}

.btn-outline-primary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary-fixed);
}

.btn-white-primary {
    background-color: var(--color-surface-container-lowest);
    color: var(--color-primary);
}

.btn-white-primary:hover {
    background-color: var(--color-primary-fixed);
}

.btn-primary-container {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
}

.btn-primary-container:hover {
    background-color: var(--color-primary);
}

/* ===== CONTAINER ===== */
.container {
    max-width: var(--spacing-container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-gutter);
}

/* ===== SECTION SPACING ===== */
.section {
    padding: var(--spacing-xl) 0;
}

.section-xl {
    padding: var(--spacing-xl) 0;
}

/* ===== CARD ===== */
.card {
    background-color: var(--color-surface-container-lowest);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.card-image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== ELEVATION / SHADOW ===== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* ===== BORDER RADIUS UTILITIES ===== */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-default { border-radius: var(--radius-default); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }

/* ===== GRID UTILITIES ===== */
.grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.grid {
    display: grid;
}

.gap-3 { gap: var(--spacing-sm); }
.gap-4 { gap: var(--spacing-md); }
.gap-6 { gap: var(--spacing-lg); }
.gap-12 { gap: var(--spacing-xl); }
.gap-20 { gap: 5rem; }

/* ===== FLEX UTILITIES ===== */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* ===== ICON ===== */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }
.icon-xl { font-size: 48px; }

/* ===== SPACING UTILITIES ===== */
.p-4 { padding: var(--spacing-sm); }
.p-6 { padding: var(--spacing-lg); }
.p-12 { padding: var(--spacing-xl); }
.px-8 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }
.py-4 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-3 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.pt-2 { padding-top: var(--spacing-xs); }
.pt-4 { padding-top: var(--spacing-md); }
.mb-20 { margin-bottom: 5rem; }

/* ===== TEXT UTILITIES ===== */
.text-center { text-align: center; }
.max-w-lg { max-width: 32rem; }
.max-w-md { max-width: 28rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-full { max-width: 100%; }
.w-full { width: 100%; }
.opacity-90 { opacity: 0.9; }

/* ===== DISPLAY UTILITIES ===== */
.hidden { display: none; }
.block { display: block; }

/* ===== BORDER UTILITIES ===== */
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-l-4 { border-left-width: 4px; border-style: solid; }

/* ===== POSITION ===== */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.-right-20 { right: -5rem; }
.-top-20 { top: -5rem; }
.-left-20 { left: -5rem; }
.-bottom-20 { bottom: -5rem; }

/* ===== OVERFLOW ===== */
.overflow-hidden { overflow: hidden; }

/* ===== ASPECT RATIO ===== */
.aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
}

/* ===== HEIGHT ===== */
.h-12 { height: 3rem; }
.h-full { height: 100%; }

/* ===== WIDTH ===== */
.w-12 { width: 3rem; }

/* ===== Z-INDEX ===== */
.z-10 { z-index: 10; }

/* ===== ORDER ===== */
.order-1 { order: 1; }
.order-2 { order: 2; }

/* ===== MEDIA QUERIES ===== */
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .md\:flex {
        display: flex;
    }

    .md\:block {
        display: block;
    }

    .md\:order-1 {
        order: 1;
    }

    .md\:order-2 {
        order: 2;
    }

    .md\:grid {
        display: grid;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}