/**
 * utilities.css — Design Tokens & Utility Classes
 *
 * Contains CSS variables, design tokens, and utility classes
 * used throughout the theme.
 *
 * @package MyApostille
 * @version 2.0.0
 * @author Your Name
 * @license GPL-2.0+
 */

/* ============================================================
   CSS VARIABLES / DESIGN TOKENS
   ============================================================ */

:root {
    /* ── Brand Colors ────────────────────────────────────────── */
    --color-primary: #d21f3c;
    --color-primary-dark: #a5182f;
    --color-primary-light: #fff1f2;

    --color-accent: #0f52ba;
    --color-accent-dark: #0c4194;
    --color-accent-light: #ebf3fc;

    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* ── Neutrals ────────────────────────────────────────────── */
    --color-bg: #f8fafc;
    --color-bg-dark: #0f172a;
    --color-surface: #ffffff;
    --color-surface-dark: #1e293b;
    --color-border: #e2e8f0;
    --color-border-dark: #334155;
    --color-text: #0f172a;
    --color-text-dark: #f1f5f9;
    --color-text-muted: #64748b;
    --color-text-subtle: #94a3b8;

    /* ── Typography ──────────────────────────────────────────── */
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

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

    /* ── Border Radius ───────────────────────────────────────── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-glow-primary: 0 0 40px -10px rgba(210, 31, 60, 0.4);
    --shadow-glow-accent: 0 0 40px -10px rgba(15, 82, 186, 0.4);

    /* ── Transitions ─────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Z-Index Scale ───────────────────────────────────────── */
    --z-dropdown: 40;
    --z-sticky: 50;
    --z-modal: 60;
    --z-tooltip: 50;
    --z-toast: 70;
    --z-popover: 45;
    --z-progress: 100;
}

/* ============================================================
   DARK MODE VARIABLES
   ============================================================ */

.dark {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-border: #334155;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-text-subtle: #64748b;
}

/* ============================================================
   BASE RESET & TYPOGRAPHY
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--transition-base),
        color var(--transition-fast);
}

/* ── Headings ──────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-weight: 800;
}

/* ── Media ──────────────────────────────────────────────────── */

img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── Links ──────────────────────────────────────────────────── */

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* ── Buttons ────────────────────────────────────────────────── */

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}

/* ── Form Elements ──────────────────────────────────────────── */

input,
select,
textarea {
    font: inherit;
}

/* ── Lists ──────────────────────────────────────────────────── */

ol,
ul {
    list-style: none;
}

/* ── Focus States ───────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* ── Text Utilities ─────────────────────────────────────────── */

.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

/* ── Glassmorphism ──────────────────────────────────────────── */

.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Mesh Background ────────────────────────────────────────── */

.mesh-bg {
    background-color: #ffffff;
    background-image:
        radial-gradient(at 20% 10%, rgba(15, 82, 186, 0.07) 0, transparent 50%),
        radial-gradient(at 80% 80%, rgba(220, 38, 38, 0.04) 0, transparent 50%);
}

.dark .mesh-bg {
    background-color: #0f172a;
    background-image:
        radial-gradient(at 20% 10%, rgba(15, 82, 186, 0.09) 0, transparent 50%),
        radial-gradient(at 80% 80%, rgba(220, 38, 38, 0.06) 0, transparent 50%);
}

/* ── Scrollbar Hide ─────────────────────────────────────────── */

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ── Section Label ──────────────────────────────────────────── */

.section-label {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
}

/* ── Container ──────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* ── Section Padding ────────────────────────────────────────── */

.section-padding {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
}

@media (max-width: 768px) {
    .section-padding {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(220, 38, 38, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* ── Animation Classes ──────────────────────────────────────── */

.animate-fade-in-up {
    animation: fadeInUp 0.5s ease forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.5s ease forwards;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease forwards;
}

.animate-slide-in-right {
    animation: slideInRight 0.4s ease forwards;
}

.animate-slide-in-left {
    animation: slideInLeft 0.4s ease forwards;
}

.float {
    animation: float 6s ease-in-out infinite;
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* ============================================================
   MEGA MENU TRANSITIONS
   ============================================================ */

.mega-panel,
.mega-panel-right {
    transition: opacity var(--transition-fast),
        transform var(--transition-fast),
        visibility var(--transition-fast);
}

/* ============================================================
   TRANSFER PROOF CARD
   ============================================================ */

.transfer-proof-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease;
}

.transfer-proof-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   CUSTOM COLOR EXTENSIONS
   ============================================================ */

/* ── Red 650 ────────────────────────────────────────────────── */

.bg-red-650 {
    background-color: #c8192e;
}

.text-red-650 {
    color: #c8192e;
}

.border-red-650 {
    border-color: #c8192e;
}

.hover\:bg-red-650:hover {
    background-color: #c8192e;
}

.hover\:text-red-650:hover {
    color: #c8192e;
}

/* ── Slate Shades ───────────────────────────────────────────── */

.text-slate-350 {
    color: #aab8c8;
}

.text-slate-450 {
    color: #7d8fa5;
}

.text-slate-455 {
    color: #788a9f;
}

.text-slate-550 {
    color: #556070;
}

.text-slate-555 {
    color: #506070;
}

.text-slate-650 {
    color: #3e5060;
}

.text-slate-655 {
    color: #3a4d5c;
}

.text-slate-750 {
    color: #293548;
}

.text-slate-850 {
    color: #172030;
}

/* Backgrounds */
.bg-slate-350 {
    background-color: #aab8c8;
}

.bg-slate-450 {
    background-color: #7d8fa5;
}

.bg-slate-550 {
    background-color: #556070;
}

.bg-slate-555 {
    background-color: #506070;
}

.bg-slate-650 {
    background-color: #3e5060;
}

.bg-slate-655 {
    background-color: #3a4d5c;
}

.bg-slate-750 {
    background-color: #293548;
}

.bg-slate-850 {
    background-color: #172030;
}

/* Borders */
.border-slate-150 {
    border-color: #edf1f6;
}

.border-slate-350 {
    border-color: #aab8c8;
}

.border-slate-550 {
    border-color: #556070;
}

.border-slate-650 {
    border-color: #3e5060;
}

.border-slate-750 {
    border-color: #293548;
}

/* Hover */
.hover\:bg-slate-750:hover {
    background-color: #293548;
}

.hover\:text-slate-350:hover {
    color: #aab8c8;
}

/* Dark mode */
.dark .bg-slate-750 {
    background-color: #293548;
}

.dark .border-slate-750 {
    border-color: #293548;
}

.dark .text-slate-350 {
    color: #aab8c8;
}

.dark .text-slate-450 {
    color: #7d8fa5;
}

.dark .text-slate-455 {
    color: #788a9f;
}

.dark .hover\:bg-slate-750:hover {
    background-color: #293548;
}

.dark .hover\:text-slate-350:hover {
    color: #aab8c8;
}

/* ── Accent Extensions ──────────────────────────────────────── */

.bg-accent-50 {
    background-color: #ebf3fc;
}

.bg-accent-100 {
    background-color: #cfdef7;
}

.bg-accent-400 {
    background-color: #4d84d6;
}

.bg-accent-500 {
    background-color: #2b6cd4;
}

.bg-accent-600 {
    background-color: #0f52ba;
}

.bg-accent-700 {
    background-color: #0c4194;
}

.bg-accent-650 {
    background-color: #0c4aad;
}

.bg-accent-800 {
    background-color: #0a3278;
}

.text-accent-50 {
    color: #ebf3fc;
}

.text-accent-100 {
    color: #cfdef7;
}

.text-accent-400 {
    color: #4d84d6;
}

.text-accent-500 {
    color: #2b6cd4;
}

.text-accent-600 {
    color: #0f52ba;
}

.text-accent-650 {
    color: #0c4aad;
}

.text-accent-700 {
    color: #0c4194;
}

.border-accent-100 {
    border-color: #cfdef7;
}

.border-accent-400 {
    border-color: #4d84d6;
}

.border-accent-500 {
    border-color: #2b6cd4;
}

.border-accent-600 {
    border-color: #0f52ba;
}

.hover\:bg-accent-700:hover {
    background-color: #0c4194;
}

.hover\:text-accent-700:hover {
    color: #0c4194;
}

/* ── Violet Extensions ──────────────────────────────────────── */

.text-violet-650 {
    color: #7028db;
}

.bg-violet-650 {
    background-color: #7028db;
}

/* ── Emerald Extensions ─────────────────────────────────────── */

.text-emerald-650 {
    color: #04886b;
}

.bg-emerald-650 {
    background-color: #04886b;
}

/* ── Amber Extensions ───────────────────────────────────────── */

.text-amber-850 {
    color: #823c0f;
}

.bg-amber-850 {
    background-color: #823c0f;
}

/* ── Slate 950 Opacity Variants ────────────────────────────── */

.bg-slate-950\/20 {
    background-color: rgba(2, 6, 23, 0.20);
}

.bg-slate-950\/40 {
    background-color: rgba(2, 6, 23, 0.40);
}

.bg-slate-950\/60 {
    background-color: rgba(2, 6, 23, 0.60);
}

.bg-slate-950\/75 {
    background-color: rgba(2, 6, 23, 0.75);
}

.bg-slate-950\/85 {
    background-color: rgba(2, 6, 23, 0.85);
}

/* ── Shadow Variants ────────────────────────────────────────── */

.hover\:shadow-accent-600\/20:hover {
    box-shadow: 0 10px 15px -3px rgba(15, 82, 186, 0.20),
        0 4px 6px -4px rgba(15, 82, 186, 0.20);
}

/* ── Dark Mode Extras ───────────────────────────────────────── */

.dark .bg-accent-950\/20 {
    background-color: rgba(4, 19, 55, 0.20);
}

.dark .bg-accent-950\/30 {
    background-color: rgba(4, 19, 55, 0.30);
}

.dark .border-accent-900\/30 {
    border-color: rgba(7, 30, 84, 0.30);
}

.dark .hover\:text-accent-400:hover {
    color: #4d84d6;
}

.dark .text-accent-400 {
    color: #4d84d6;
}

/* ── Focus Rings ────────────────────────────────────────────── */

.focus-visible\:ring-accent-600:focus-visible {
    --tw-ring-color: #0f52ba;
}

.focus-visible\:ring-accent-400:focus-visible {
    --tw-ring-color: #4d84d6;
}

/* ── Red 750 ────────────────────────────────────────────────── */

.bg-red-750 {
    background-color: #a8172b;
}

.hover\:bg-red-750:hover {
    background-color: #a8172b;
}

/* ── Z-Index Utilities ──────────────────────────────────────── */

.z-45 {
    z-index: 45;
}

/* ── Transition Duration ────────────────────────────────────── */

.duration-350 {
    transition-duration: 350ms;
}

/* ── Dark Mode Extra Backgrounds ───────────────────────────── */

.dark .bg-amber-950\/20 {
    background-color: rgba(69, 26, 3, 0.20);
}

.dark .bg-blue-950\/20 {
    background-color: rgba(23, 37, 84, 0.20);
}

.dark .bg-emerald-950\/20 {
    background-color: rgba(2, 44, 34, 0.20);
}

.dark .bg-indigo-950\/20 {
    background-color: rgba(30, 27, 75, 0.20);
}

.dark .bg-red-950\/40 {
    background-color: rgba(69, 10, 10, 0.40);
}

/* ── Hover Utilities ────────────────────────────────────────── */

.hover\:bg-slate-950\/5:hover {
    background-color: rgba(2, 6, 23, 0.05);
}

.hover\:text-slate-950:hover {
    color: #020617;
}

/* ── Dark Mode Base ─────────────────────────────────────────── */

.dark .text-slate-950 {
    color: #020617;
}

.dark .from-slate-950 {
    --tw-gradient-from: #020617;
}

.dark .to-indigo-950 {
    --tw-gradient-to: #1e1b4b;
}

.dark .to-orange-950\/10 {
    --tw-gradient-to: rgba(67, 20, 7, 0.10);
}

.dark .from-amber-950\/20 {
    --tw-gradient-from: rgba(69, 26, 3, 0.20);
}

/* ── Group Hover ────────────────────────────────────────────── */

.group-hover\/post\:text-accent-600:hover {
    color: #0f52ba;
}

.group\/item:hover .group-hover\/item\:bg-accent-50 {
    background-color: #ebf3fc;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Small screens (mobile) */
@media (max-width: 639px) {
    .container {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .section-padding {
        padding-top: var(--space-12);
        padding-bottom: var(--space-12);
    }

    .text-2xl {
        font-size: 1.25rem;
    }

    .text-3xl {
        font-size: 1.5rem;
    }
}

/* Medium screens (tablet) */
@media (min-width: 640px) and (max-width: 1023px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}

/* Large screens (desktop) */
@media (min-width: 1024px) {
    .container {
        padding-left: var(--space-8);
        padding-right: var(--space-8);
    }
}

/* ============================================================
   TAILWIND ARBITRARY / CUSTOM UTILITY COMPATIBILITY CLASSES
   ============================================================ */

.py-4\.5, .py-18px {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

.text-\[9px\] { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }

.text-slate-550 { color: #576574; }
.text-slate-450 { color: #8395a7; }
.text-slate-850 { color: #222f3e; }
.text-red-650 { color: #c0392b; }
.text-accent-650 { color: #0d47a1; }

.min-h-\[54px\] { min-height: 54px; }
.min-h-\[48px\] { min-height: 48px; }

.w-8\.5 { width: 2.125rem; }
.h-8\.5 { height: 2.125rem; }
.w-5\.5 { width: 1.375rem; }
.h-5\.5 { height: 1.375rem; }

.border-slate-150 { border-color: #f1f2f6; }
.scale-102 { transform: scale(1.02); }

/* Animation Keyframes */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.05); }
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

.animate-pulse-glow {
    animation: pulseGlow 8s ease-in-out infinite;
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}