/*
 * Umrah2Go — Design Tokens v2
 * Single source of truth. Enqueue FIRST before any U2G stylesheet.
 * File: assets/css/u2g-tokens.css
 *
 * v2 changes:
 *  - Tighter typographic scale: 11/12/13/14/16/20/28/36
 *  - Subtler shadow scale (Shadcn-inspired)
 *  - Animation / easing tokens
 *  - RTL override section
 *  - Price alert colour added
 *  - Hijri display colour added
 */

:root {
    /* ── Brand colours ──────────────────────────────────────────── */
    --u2g-green:          #1E963C;
    --u2g-green-dark:     #166B2B;
    --u2g-green-deeper:   #0F4A1E;
    --u2g-green-bg:       #EBF7EF;
    --u2g-green-border:   #A8D8B4;
    --u2g-gold:           #C4963C;
    --u2g-gold-dark:      #A07820;
    --u2g-gold-bg:        #FBF4E8;
    --u2g-gold-border:    #E8C87A;
    --u2g-whatsapp:       #25D366;
    --u2g-whatsapp-dark:  #1DAA54;

    /* ── Semantic colours ────────────────────────────────────────── */
    --u2g-danger:         #DC2626;
    --u2g-danger-dark:    #B91C1C;
    --u2g-danger-bg:      #FEF2F2;
    --u2g-danger-border:  #FCA5A5;
    --u2g-warn:           #B45309;
    --u2g-warn-bg:        #FFF8E7;
    --u2g-warn-border:    #F0D090;
    --u2g-info:           #2563EB;
    --u2g-info-bg:        #EFF6FF;
    --u2g-info-border:    #BFDBFE;
    --u2g-success:        #059669;
    --u2g-success-bg:     #ECFDF5;
    --u2g-success-border: #A7F3D0;

    /* ── Hijri / Islamic calendar accent ─────────────────────────── */
    --u2g-hijri:          #7C5A2A;
    --u2g-hijri-bg:       #FBF4E8;

    /* ── Neutral palette ─────────────────────────────────────────── */
    --u2g-dark:           #1A1A1A;
    --u2g-mid:            #4A4A4A;
    --u2g-muted:          #737373;
    --u2g-light:          #A3A3A3;
    --u2g-lighter:        #D4D4D4;
    --u2g-border:         #E5E7EB;
    --u2g-border-focus:   #1E963C;
    --u2g-bg:             #F9FAFB;
    --u2g-bg-alt:         #F3F4F6;
    --u2g-white:          #FFFFFF;

    /* ── Typography — Outfit is enqueued by templates ────────────── */
    --u2g-font:           'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --u2g-font-mono:      'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;

    /* Tighter typographic scale: 11 / 12 / 13 / 14 / 16 / 20 / 28 / 36 */
    --u2g-text-2xs:   11px;
    --u2g-text-xs:    12px;
    --u2g-text-sm:    13px;
    --u2g-text-base:  14px;
    --u2g-text-md:    16px;
    --u2g-text-lg:    20px;
    --u2g-text-xl:    28px;
    --u2g-text-2xl:   36px;

    /* Legacy aliases — kept for backward compatibility */
    --u2g-font-size-xs:   12px;
    --u2g-font-size-sm:   12px;
    --u2g-font-size-base: 14px;
    --u2g-font-size-md:   16px;
    --u2g-font-size-lg:   20px;
    --u2g-font-size-xl:   28px;
    --u2g-font-size-2xl:  36px;

    /* ── Spacing ─────────────────────────────────────────────────── */
    --u2g-space-1:  4px;
    --u2g-space-2:  8px;
    --u2g-space-3:  12px;
    --u2g-space-4:  16px;
    --u2g-space-5:  20px;
    --u2g-space-6:  24px;
    --u2g-space-8:  32px;
    --u2g-space-10: 40px;
    --u2g-space-12: 48px;
    --u2g-space-16: 64px;

    /* ── Border radius ───────────────────────────────────────────── */
    --u2g-radius-sm:   5px;
    --u2g-radius-md:   8px;
    --u2g-radius-lg:   10px;
    --u2g-radius-xl:   12px;
    --u2g-radius-2xl:  16px;
    --u2g-radius-3xl:  20px;
    --u2g-radius-pill: 9999px;
    --u2g-radius-full: 50%;

    /* ── Shadows — Shadcn-inspired: subtle by default, stronger on hover ── */
    --u2g-shadow-xs:   0 1px 2px rgba(0,0,0,.04);
    --u2g-shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --u2g-shadow-md:   0 3px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
    --u2g-shadow-lg:   0 8px 24px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.05);
    --u2g-shadow-xl:   0 16px 40px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.06);
    --u2g-shadow-2xl:  0 24px 60px rgba(0,0,0,.16);
    --u2g-shadow-green:0 4px 16px rgba(30,150,60,.18);
    --u2g-shadow-card: 0 1px 3px rgba(0,0,0,.06);
    --u2g-shadow-card-hover: 0 6px 20px rgba(0,0,0,.10);

    /* ── Transitions & easing ────────────────────────────────────── */
    --u2g-ease:         cubic-bezier(.16,1,.3,1);
    --u2g-ease-out:     cubic-bezier(0,0,.2,1);
    --u2g-ease-in:      cubic-bezier(.4,0,1,1);
    --u2g-ease-spring:  cubic-bezier(.34,1.56,.64,1);

    --u2g-duration-fast:   120ms;
    --u2g-duration-base:   180ms;
    --u2g-duration-slow:   280ms;
    --u2g-duration-slower: 400ms;

    --u2g-transition:      var(--u2g-duration-base) var(--u2g-ease-out);
    --u2g-transition-slow: var(--u2g-duration-slow) var(--u2g-ease-out);
    --u2g-transition-fast: var(--u2g-duration-fast) var(--u2g-ease-out);

    /* ── Z-index scale ───────────────────────────────────────────── */
    --u2g-z-base:     1;
    --u2g-z-dropdown: 100;
    --u2g-z-sticky:   200;
    --u2g-z-overlay:  500;
    --u2g-z-modal:    1000;
    --u2g-z-toast:    2000;
    --u2g-z-lightbox: 9000;
    --u2g-z-top:      9999;

    /* ── Layout ──────────────────────────────────────────────────── */
    --u2g-max-width:      1280px;
    --u2g-content-width:  760px;
    --u2g-sidebar-width:  320px;
    --u2g-header-height:  64px;
}

/* ── RTL support ─────────────────────────────────────────────────── */
/* Add dir="rtl" to <html> or the .u2g-* wrapper to activate */
[dir="rtl"] {
    --u2g-dir:         rtl;
    --u2g-start:       right;
    --u2g-end:         left;
    --u2g-text-align:  right;
}

[dir="ltr"],
:root:not([dir]) {
    --u2g-dir:         ltr;
    --u2g-start:       left;
    --u2g-end:         right;
    --u2g-text-align:  left;
}

/* Mirror flex/padding for RTL inside any u2g component */
[dir="rtl"] .u2g-archive-body,
[dir="rtl"] .u2g-hs-body,
[dir="rtl"] .u2g-cb-body {
    direction: rtl;
}

[dir="rtl"] .u2g-hs-breadcrumb-sep svg {
    transform: scaleX(-1);
}

/* ── Utility classes ─────────────────────────────────────────────── */
.u2g-hidden     { display: none !important; }
.u2g-sr-only    {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}
.u2g-icon       {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    line-height: 1;
}

/* ── Focus ring ──────────────────────────────────────────────────── */
.u2g-focusable:focus-visible {
    outline: 2px solid var(--u2g-green);
    outline-offset: 2px;
    border-radius: var(--u2g-radius-sm);
}