/* =====================================================================
   IhsanPro design tokens — single source of truth.
   Link this BEFORE any page-level <style> block.

   Type sizes are fluid (clamp), so they scale smoothly between a 320px
   phone and a 1440px desktop instead of jumping at breakpoints. Never
   hardcode a font-size or a hex value in a page; reach for a token.
   ===================================================================== */

:root {
    /* --- Brand -------------------------------------------------------- */
    --primary: #047857;          /* 5.48:1 on white — safe for text/buttons */
    --primary-dark: #064E3B;
    --primary-darker: #043027;
    --primary-light: #10B981;    /* decorative only: fails contrast on white */
    --primary-050: #ECFDF5;
    --primary-100: #D1FAE5;

    --gold: #B45309;             /* 4.9:1 on white — safe for text */
    --gold-bright: #D97706;      /* decorative / large display only */
    --gold-050: #FFFBEB;

    /* --- Neutrals ----------------------------------------------------- */
    --ink: #0F172A;
    --ink-soft: #1E293B;
    --text: #334155;             /* body copy on white: 10.4:1 */
    --text-muted: #64748B;       /* 4.76:1 on white — smallest safe grey */
    --text-on-dark: #CBD5E1;     /* on --ink: 10.8:1 */
    --line: #E2E8F0;
    --line-soft: #F1F5F9;
    --surface: #FFFFFF;
    --surface-alt: #F8FAFC;

    /* --- Status ------------------------------------------------------- */
    --success: #047857;
    --danger: #B91C1C;
    --warning: #B45309;

    /* --- Type --------------------------------------------------------- */
    --font: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs:   clamp(0.8125rem, 0.78rem + 0.18vw, 0.90rem);
    --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.95rem);
    --fs-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);
    --fs-lg:   clamp(1.10rem, 1.03rem + 0.35vw, 1.25rem);
    --fs-xl:   clamp(1.25rem, 1.10rem + 0.70vw, 1.55rem);
    --fs-2xl:  clamp(1.45rem, 1.20rem + 1.20vw, 2.05rem);
    --fs-3xl:  clamp(1.75rem, 1.35rem + 2.00vw, 2.75rem);
    --fs-4xl:  clamp(2.10rem, 1.45rem + 3.20vw, 3.75rem);

    --lh-tight: 1.25;
    --lh-snug: 1.4;
    --lh-body: 1.75;

    --fw-regular: 400;
    --fw-medium: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* --- Space (4px base) --------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --section-y: clamp(3rem, 1.5rem + 6vw, 6.5rem);
    --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

    /* --- Shape -------------------------------------------------------- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* --- Elevation ---------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-brand: 0 10px 28px rgba(4, 120, 87, 0.22);

    /* --- Motion ------------------------------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.25s;

    /* Minimum comfortable tap target. */
    --tap: 44px;
}

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

/* Every interactive element gets a visible focus ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}