/* =========================================================================
   Watily — Design Tokens
   Source of truth for the visual identity. Loaded BEFORE base.css.
   Colors are derived directly from assets/img/logo.png (sampled values).
   Logo primary: #F06C14  | Logo light: #FA903A  | Logo deep: #B74D0D
   ========================================================================= */
:root {
    /* ----- Brand: Orange scale (from logo) ----- */
    --wt-orange-50:  #FFF4EC;
    --wt-orange-100: #FFE4D0;
    --wt-orange-200: #FDC9A1;
    --wt-orange-300: #FBA66A;
    --wt-orange-400: #FA903A;  /* logo highlight */
    --wt-orange-500: #F06C14;  /* logo primary  */
    --wt-orange-600: #DC5A0E;  /* logo hover    */
    --wt-orange-700: #B74D0D;  /* logo deep     */
    --wt-orange-800: #8C3A09;
    --wt-orange-900: #602706;

    /* Accent: warm amber (complement) */
    --wt-amber-300: #FCD34D;
    --wt-amber-400: #FBBF24;
    --wt-amber-500: #FFB703;

    /* ----- Neutrals (ink) ----- */
    --wt-ink-50:  #F8FAFC;
    --wt-ink-100: #F1F5F9;
    --wt-ink-200: #E2E8F0;
    --wt-ink-300: #CBD5E1;
    --wt-ink-400: #94A3B8;
    --wt-ink-500: #64748B;
    --wt-ink-600: #475569;
    --wt-ink-700: #334155;
    --wt-ink-800: #1E293B;
    --wt-ink-900: #0F172A;

    /* ----- Surfaces ----- */
    --wt-surface:           #FFFFFF;
    --wt-surface-elevated:  #FFFFFF;
    --wt-surface-soft:      #FAF8F5;
    --wt-surface-warm:      #FFFCFA;
    --wt-bg:                #F4F6F8;
    --wt-page-bg:           linear-gradient(180deg, #FAF8F5 0%, #F1F5F9 45%, #F8FAFC 100%);
    --wt-bg-soft:           #FAF8F5;
    --wt-tint-warm:         #FFF7F0;
    --wt-tint-success:      #F0FDF4;
    --wt-border:            rgba(15, 23, 42, 0.08);
    --wt-border-strong:     rgba(15, 23, 42, 0.16);

    /* ----- Semantic ----- */
    --wt-success: #10B981;
    --wt-success-soft: #D1FAE5;
    --wt-warning: #F59E0B;
    --wt-warning-soft: #FEF3C7;
    --wt-danger:  #EF4444;
    --wt-danger-soft: #FEE2E2;
    --wt-info:    #0EA5E9;
    --wt-info-soft: #E0F2FE;

    /* ----- Typography (Watily brand identity)
       Single canonical pair, IBM Plex family for SaaS-grade consistency:
       • LTR (English): IBM Plex Sans
       • RTL (Arabic):  IBM Plex Sans Arabic (same family, perfect Latin pairing)
       Used for body, headings, navigation, buttons — everything. ----- */
    --wt-font-ltr: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --wt-font-rtl: 'Almarai', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --wt-font-display-rtl: 'Almarai', system-ui, sans-serif;
    --wt-font-display-ltr: 'IBM Plex Sans', system-ui, sans-serif;
    --wt-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --wt-text-xs:   0.75rem;   /* 12 */
    --wt-text-sm:   0.875rem;  /* 14 */
    --wt-text-base: 1rem;      /* 16 */
    --wt-text-lg:   1.125rem;  /* 18 */
    --wt-text-xl:   1.25rem;   /* 20 */
    --wt-text-2xl:  1.5rem;    /* 24 */
    --wt-text-3xl:  1.875rem;  /* 30 */
    --wt-text-4xl:  2.25rem;   /* 36 */
    --wt-text-5xl:  3rem;      /* 48 */
    --wt-text-6xl:  clamp(2.4rem, 4vw, 3.75rem);

    --wt-leading-tight:  1.15;
    --wt-leading-snug:   1.35;
    --wt-leading-normal: 1.6;

    --wt-weight-regular: 400;
    --wt-weight-medium:  500;
    --wt-weight-semi:    600;
    --wt-weight-bold:    700;
    --wt-weight-black:   800;

    /* ----- Spacing (4pt grid) ----- */
    --wt-space-1:  4px;
    --wt-space-2:  8px;
    --wt-space-3:  12px;
    --wt-space-4:  16px;
    --wt-space-5:  20px;
    --wt-space-6:  24px;
    --wt-space-8:  32px;
    --wt-space-10: 40px;
    --wt-space-12: 48px;
    --wt-space-16: 64px;
    --wt-space-20: 80px;
    --wt-space-24: 96px;

    /* ----- Radius ----- */
    --wt-radius-xs:  6px;
    --wt-radius-sm:  10px;
    --wt-radius-md:  14px;
    --wt-radius-lg:  20px;
    --wt-radius-xl:  28px;
    --wt-radius-2xl: 36px;
    --wt-radius-pill: 999px;
    --wt-radius-full: 9999px;

    /* ----- Shadows (warm tinted) ----- */
    --wt-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05);
    --wt-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
    --wt-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.08);
    --wt-shadow-4: 0 18px 55px rgba(15, 23, 42, 0.12);
    --wt-shadow-5: 0 32px 65px rgba(15, 23, 42, 0.20);
    --wt-shadow-orange-sm: 0 8px 24px rgba(240, 108, 20, 0.20);
    --wt-shadow-orange-md: 0 12px 32px rgba(240, 108, 20, 0.28);

    /* ----- Focus ring ----- */
    --wt-focus-ring: 0 0 0 3px rgba(240, 108, 20, 0.35);
    --wt-focus-ring-thin: 0 0 0 2px rgba(240, 108, 20, 0.45);

    /* ----- Motion ----- */
    --wt-duration-fast: 150ms;
    --wt-duration-base: 250ms;
    --wt-duration-slow: 400ms;
    --wt-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --wt-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);

    /* ----- Z-index scale ----- */
    --wt-z-base:    1;
    --wt-z-raised:  10;
    --wt-z-sticky:  100;
    --wt-z-header:  200;
    --wt-z-overlay: 1000;
    --wt-z-drawer:  10050;
    --wt-z-modal:   10100;
    --wt-z-toast:   10200;

    /* ============================================================
       Legacy aliases — keep backward compatibility with existing CSS.
       New code should reference the --wt-* tokens above.
       ============================================================ */
    --wt-brand-orange:      var(--wt-orange-500);
    --wt-brand-orange-dark: var(--wt-orange-700);
    --wt-brand-amber:       var(--wt-amber-500);

    --font-family-ar:   var(--wt-font-rtl);
    --font-family-en:   var(--wt-font-ltr);
    --font-family-base: var(--wt-font-rtl);

    --color-bg:        var(--wt-bg);
    --color-surface:   var(--wt-surface);
    --color-text:      var(--wt-ink-900);
    --color-muted:     var(--wt-ink-500);
    --color-accent:    var(--wt-orange-500);
    --color-accent-dark: var(--wt-orange-700);
    --accent-primary:  var(--wt-orange-500);
    --text-primary:    var(--wt-ink-900);
    --text-muted:      var(--wt-ink-500);
    --color-page-bg:   var(--wt-page-bg);
    --header-bg:       rgba(255, 255, 255, 0.88);

    --wt-header-bg: #FFFCFA;
    --wt-header-glass: rgba(255, 252, 250, 0.78);
    --spacing-unit: clamp(12px, 1.5vw, 18px);
    --radius-lg: var(--wt-radius-2xl);
    --radius-md: var(--wt-radius-lg);
    --radius-sm: var(--wt-radius-sm);
    --shadow-soft: var(--wt-shadow-4);
    --focus-ring: var(--wt-focus-ring);
}

/* =========================================================================
   Utility primitives — opt-in classes that work with the token system.
   ========================================================================= */
.wt-text-balance { text-wrap: balance; }
.wt-text-pretty  { text-wrap: pretty; }

/* Visually-hidden but accessible to screen readers (SEO/a11y) */
.wt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Iconography — wt-icon (Lucide stroke + Simple Icons brands)
   Icons reference /assets/img/icons/sprite.svg via <use>.
   They inherit currentColor; use tone classes to color them in context.
   ========================================================================= */
.wt-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1.125em;          /* tracks the parent's font-size by default */
    height: 1.125em;
    vertical-align: -0.15em;
    line-height: 1;
    color: inherit;
    fill: currentColor;       /* Simple-Icons (brand) symbols use fill        */
    /* Lucide stroke symbols already declare stroke="currentColor" inside */
    -webkit-user-select: none;
    user-select: none;
}

/* Sizes — explicit, in pixels */
.wt-icon-xs { width: 14px; height: 14px; }
.wt-icon-sm { width: 16px; height: 16px; }
.wt-icon-md { width: 20px; height: 20px; }
.wt-icon-lg { width: 24px; height: 24px; }
.wt-icon-xl { width: 32px; height: 32px; }
.wt-icon-2xl { width: 40px; height: 40px; }

/* Tones */
.wt-icon-tone-orange { color: var(--wt-orange-500); }
.wt-icon-tone-orange-deep { color: var(--wt-orange-700); }
.wt-icon-tone-ink { color: var(--wt-ink-900); }
.wt-icon-tone-muted { color: var(--wt-ink-500); }
.wt-icon-tone-success { color: var(--wt-success); }
.wt-icon-tone-warning { color: var(--wt-warning); }
.wt-icon-tone-danger { color: var(--wt-danger); }
.wt-icon-tone-info { color: var(--wt-info); }
.wt-icon-tone-white { color: #fff; }

/* Interactive icon buttons */
.wt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--wt-radius-sm);
    background: transparent;
    color: var(--wt-ink-700);
    cursor: pointer;
    transition: background var(--wt-duration-fast) var(--wt-ease-standard),
                color var(--wt-duration-fast) var(--wt-ease-standard);
}
.wt-icon-btn:hover {
    background: var(--wt-ink-100);
    color: var(--wt-orange-500);
}
.wt-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--wt-focus-ring-thin);
}

/* Spinner — works with any SVG icon, but default is loader-2 */
.wt-icon[data-icon="loader-2"],
.wt-icon-spin {
    animation: wt-icon-spin 1s linear infinite;
}
@keyframes wt-icon-spin {
    to { transform: rotate(360deg); }
}

/* RTL flip for direction-sensitive icons.
   Arrows are NOT flipped: every view already picks arrow-left for Arabic and
   arrow-right for English, so mirroring them again pointed Arabic "read more"
   arrows backwards (2026-09-25). Chevrons stay mirrored because carousels and
   pagination use a fixed chevron-left = previous / chevron-right = next. */
[dir="rtl"] .wt-icon[data-icon="chevron-right"],
[dir="rtl"] .wt-icon[data-icon="chevron-left"],
[dir="rtl"] .wt-icon[data-icon="corner-down-right"] {
    transform: scaleX(-1);
}
/* external-link is NOT mirrored: its diagonal arrow is a universal "opens
   elsewhere" glyph, not a reading-direction cue. Flipping it pointed the arrow
   up-left and read as a broken icon in Arabic. */

/* Skip-to-content link (a11y) */
.wt-skip-link {
    position: absolute;
    top: -100px;
    /* Logical, so the a11y skip link lands at the start edge in both
       directions — it used to jump to the far left of the Arabic layout. */
    inset-inline-start: 0;
    background: var(--wt-orange-500);
    color: #fff;
    padding: 12px 18px;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-end-start-radius: 0;
    border-end-end-radius: var(--wt-radius-md);
    font-weight: var(--wt-weight-bold);
    z-index: var(--wt-z-toast);
    text-decoration: none;
    transition: top var(--wt-duration-base) var(--wt-ease-standard);
}
.wt-skip-link:focus { top: 0; }