/* =============================================================
   TIQAN — VISUAL IDENTITY SYSTEM
   Design tokens · Light/Dark · RTL · Motion · Advertising
   =============================================================

   HOW TO USE:
   Upload to: /wp-content/themes/tiqan-child/assets/tiqan-identity.css
   Then add ONE line to functions.php (inside wp_enqueue_scripts):
       wp_enqueue_style('tiqan-identity',
           get_stylesheet_directory_uri().'/assets/tiqan-identity.css',
           [], '1.0.0');

   It is ADDITIVE — it layers on top of the existing theme.
   It never removes existing styles.
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
    /* Brand — TIQAN approved palette */
    --tiq-green:      #1a6b3c;   /* government services */
    --tiq-blue:       #1e4d8c;   /* hardware */
    --tiq-purple:     #7a3a9e;   /* digital transformation */
    --tiq-orange:     #c46a00;   /* packages */
    --tiq-cyan:       #0e7490;   /* support */
    --tiq-brown:      #7c2d12;   /* supply */

    /* Neutrals */
    --tiq-bg:         #ffffff;
    --tiq-surface:    #f8fafc;
    --tiq-surface-2:  #f1f5f9;
    --tiq-border:     #e2e8f0;
    --tiq-text:       #0f172a;
    --tiq-text-muted: #64748b;

    /* Accent */
    --tiq-accent:     var(--tiq-green);
    --tiq-accent-soft: rgba(26, 107, 60, 0.08);

    /* Typography */
    --tiq-font: "Segoe UI", Tahoma, "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;

    /* Spacing */
    --tiq-s1: 4px;  --tiq-s2: 8px;  --tiq-s3: 12px;
    --tiq-s4: 16px; --tiq-s5: 24px; --tiq-s6: 32px;
    --tiq-s7: 48px; --tiq-s8: 64px;

    /* Radius */
    --tiq-r-sm: 8px;  --tiq-r-md: 12px;
    --tiq-r-lg: 18px; --tiq-r-full: 999px;

    /* Depth — layered surfaces, premium feel */
    --tiq-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --tiq-shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
    --tiq-shadow-lg: 0 18px 40px rgba(15, 23, 42, .12);

    /* Motion */
    --tiq-ease: cubic-bezier(.22, .61, .36, 1);
    --tiq-fast: 160ms;
    --tiq-med:  280ms;
    --tiq-slow: 520ms;
}

/* ---------- 2. DARK MODE ---------- */
/* Not a naive inversion — surfaces are re-derived for contrast. */
[data-theme="dark"] {
    --tiq-bg:         #0b1220;
    --tiq-surface:    #111a2b;
    --tiq-surface-2:  #17233a;
    --tiq-border:     #24334d;
    --tiq-text:       #e8eef7;
    --tiq-text-muted: #94a8c4;
    --tiq-accent-soft: rgba(96, 200, 140, 0.14);
    --tiq-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --tiq-shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
    --tiq-shadow-lg: 0 22px 48px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tiq-bg:         #0b1220;
        --tiq-surface:    #111a2b;
        --tiq-surface-2:  #17233a;
        --tiq-border:     #24334d;
        --tiq-text:       #e8eef7;
        --tiq-text-muted: #94a8c4;
        --tiq-accent-soft: rgba(96, 200, 140, 0.14);
    }
}

/* ---------- 3. BASE ---------- */
body {
    font-family: var(--tiq-font);
    background: var(--tiq-bg);
    color: var(--tiq-text);
    transition: background-color var(--tiq-med) var(--tiq-ease),
                color var(--tiq-med) var(--tiq-ease);
    -webkit-font-smoothing: antialiased;
}

/* ---------- 4. PREMIUM CARD (layered depth) ---------- */
.tiq-card {
    background: var(--tiq-surface);
    border: 1px solid var(--tiq-border);
    border-radius: var(--tiq-r-lg);
    box-shadow: var(--tiq-shadow-sm);
    transition: transform var(--tiq-med) var(--tiq-ease),
                box-shadow var(--tiq-med) var(--tiq-ease),
                border-color var(--tiq-med) var(--tiq-ease);
    overflow: hidden;
    position: relative;
}
.tiq-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--tiq-shadow-lg);
    border-color: var(--tiq-accent);
}
/* subtle top accent line — the "layered" premium cue */
.tiq-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--tiq-accent), transparent);
    opacity: .85;
}

/* ---------- 5. PRODUCT GRID ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--tiq-surface);
    border: 1px solid var(--tiq-border);
    border-radius: var(--tiq-r-lg);
    box-shadow: var(--tiq-shadow-sm);
    transition: transform var(--tiq-med) var(--tiq-ease),
                box-shadow var(--tiq-med) var(--tiq-ease);
    overflow: hidden;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: var(--tiq-shadow-lg);
}
.woocommerce ul.products li.product img {
    transition: transform var(--tiq-slow) var(--tiq-ease);
}
.woocommerce ul.products li.product:hover img {
    transform: scale(1.06);
}

/* ---------- 6. BUTTONS ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.tiq-btn {
    background: var(--tiq-accent);
    color: #fff;
    border-radius: var(--tiq-r-full);
    padding: var(--tiq-s3) var(--tiq-s5);
    font-weight: 700;
    border: none;
    box-shadow: var(--tiq-shadow-sm);
    transition: transform var(--tiq-fast) var(--tiq-ease),
                box-shadow var(--tiq-fast) var(--tiq-ease),
                filter var(--tiq-fast) var(--tiq-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.tiq-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--tiq-shadow-md);
    filter: brightness(1.08);
    color: #fff;
}
.woocommerce a.button:active,
.tiq-btn:active {
    transform: translateY(0) scale(.98);
}

/* ---------- 7. MOTION — scroll reveal ---------- */
.tiq-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--tiq-slow) var(--tiq-ease),
                transform var(--tiq-slow) var(--tiq-ease);
}
.tiq-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- 8. MOTION — shimmer (advertising / promo) ---------- */
@keyframes tiq-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
.tiq-shimmer {
    background: linear-gradient(90deg,
        var(--tiq-surface) 0%,
        var(--tiq-surface-2) 40%,
        var(--tiq-surface) 80%);
    background-size: 1200px 100%;
    animation: tiq-shimmer 2.2s linear infinite;
}

/* ---------- 9. MOTION — gentle pulse for CTA ---------- */
@keyframes tiq-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(26, 107, 60, .45); }
    70%      { box-shadow: 0 0 0 14px rgba(26, 107, 60, 0); }
}
.tiq-pulse { animation: tiq-pulse 2.4s infinite; }

/* ---------- 10. MOTION — floating (hero accents) ---------- */
@keyframes tiq-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
.tiq-float { animation: tiq-float 5s ease-in-out infinite; }

/* ---------- 11. BADGES (service / device / package) ---------- */
.tiq-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--tiq-r-full);
    font-size: 12px;
    font-weight: 700;
    background: var(--tiq-accent-soft);
    color: var(--tiq-accent);
    border: 1px solid currentColor;
    white-space: nowrap;
}
.tiq-badge--service  { color: var(--tiq-green);  background: rgba(26,107,60,.10); }
.tiq-badge--device   { color: var(--tiq-blue);   background: rgba(30,77,140,.10); }
.tiq-badge--package  { color: var(--tiq-orange); background: rgba(196,106,0,.10); }
.tiq-badge--new      { color: #b91c1c;           background: rgba(185,28,28,.10); }

/* ---------- 12. SECTION HEADERS ---------- */
.tiq-section-title {
    position: relative;
    font-size: 1.6rem;
    font-weight: 800;
    margin-block-end: var(--tiq-s5);
    padding-block-end: var(--tiq-s2);
    color: var(--tiq-text);
}
.tiq-section-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: var(--tiq-r-full);
    background: var(--tiq-accent);
}

/* ---------- 13. RTL FIXES ---------- */
[dir="rtl"] .tiq-section-title::after { inset-inline-start: auto; inset-inline-end: 0; }
[dir="rtl"] .tiq-card::before {
    background: linear-gradient(270deg, var(--tiq-accent), transparent);
}

/* ---------- 14. STICKY WHATSAPP CTA ---------- */
.tiq-wa-float {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 20px;
    z-index: 9999;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: var(--tiq-shadow-lg);
    transition: transform var(--tiq-fast) var(--tiq-ease);
}
.tiq-wa-float:hover { transform: scale(1.09); color: #fff; }

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

/* ---------- 16. FOCUS (keyboard accessibility) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--tiq-accent);
    outline-offset: 2px;
    border-radius: var(--tiq-r-sm);
}

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 768px) {
    .tiq-section-title { font-size: 1.3rem; }
    .woocommerce ul.products li.product { border-radius: var(--tiq-r-md); }
    :root { --tiq-s7: 32px; --tiq-s8: 40px; }
}