/*
 * AOUID Website Template — "Émeraude" (Premium Emerald)
 * ------------------------------------------------------
 * A premium, editorial re-skin of AOUID's existing pages. Every rule below
 * targets AOUID's own Tailwind design tokens and existing markup — nothing
 * here assumes or requires a different page structure. Loaded after the
 * site's base stylesheet, so plain CSS cascade order does the overriding —
 * no !important needed anywhere in this file.
 *
 * Palette: deep emerald accent + warm charcoal neutrals + champagne gold
 * for small premium accents (ratings, dividers). Typography: a serif
 * display face for headings (editorial, upscale) paired with a modern
 * geometric sans for body text — deliberately distinct from the Default
 * template's Inter-everywhere look.
 */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    /* ---- Typography ---- */
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
    --font-arabic: 'Tajawal', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Fraunces', 'Plus Jakarta Sans', ui-serif, serif;

    /* ---- Brand ramp: deep emerald (was warm orange) ---- */
    --color-brand-50: #ecfdf5;
    --color-brand-100: #d1fae5;
    --color-brand-200: #a7f3d0;
    --color-brand-300: #6ee7b7;
    --color-brand-400: #34d399;
    --color-brand-500: #0f9d74;
    --color-brand-600: #0b7c5c;
    --color-brand-700: #096148;
    --color-brand-800: #0a4c3a;
    --color-brand-900: #073d2f;

    /* ---- Neutral ramp: warm charcoal (was cool slate) ---- */
    --color-ink-50: #faf9f6;
    --color-ink-100: #f3f0ea;
    --color-ink-200: #e5e0d4;
    --color-ink-300: #d0c8b6;
    --color-ink-400: #a89d86;
    --color-ink-500: #7d7461;
    --color-ink-600: #5c5445;
    --color-ink-700: #423c31;
    --color-ink-800: #2a2620;
    --color-ink-900: #17140f;

    /* ---- Premium accent, used only by this theme (not a base token) ---- */
    --color-gold-400: #d4af6a;
    --color-gold-500: #c19a4b;
}

/* ==========================================================================
   Base surfaces — AOUID's base template uses literal "white" (not an ink
   token) for the page background and every card/panel, so retinting the
   ink ramp alone wouldn't touch them. Swapping the literal utility itself
   is the only way to shift the base surface tone without editing markup.
   ========================================================================== */
.bg-white {
    background-color: #fffdf9;
}

body {
    background-color: #fffdf9;
}

/* ==========================================================================
   Typography — a distinct serif for headings/prominent text, the new sans
   for everything else. Targets both semantic heading tags and the
   font-weight utilities AOUID's own templates already use for prominent
   text, so this reaches every page without needing new markup.
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.font-extrabold,
.font-black {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h1, .text-3xl.font-extrabold, .text-4xl.font-extrabold, .text-5xl.font-extrabold {
    font-weight: 600;
    font-optical-sizing: auto;
}

html[dir='rtl'] h1, html[dir='rtl'] h2, html[dir='rtl'] h3, html[dir='rtl'] h4,
html[dir='rtl'] .font-extrabold, html[dir='rtl'] .font-black {
    /* Fraunces has no Arabic glyphs — fall through to the Arabic sans for
       RTL headings instead of silently rendering tofu/system-default. */
    font-family: var(--font-arabic);
    font-weight: 800;
    letter-spacing: 0;
}

/* ==========================================================================
   Header — a lighter, more refined glass effect than the default's
   bg-white/90, with a hairline gold underline instead of a plain border.
   ========================================================================== */
header.sticky {
    background-color: rgb(255 253 249 / 0.82);
    border-bottom: 1px solid var(--color-gold-400);
    box-shadow: 0 1px 0 0 rgb(23 20 15 / 0.04);
}

/* ==========================================================================
   Hero — the base gradient fades into a literal "orange-400" utility
   (not a theme token), so overriding the brand ramp alone leaves a leftover
   clashing orange at the tail end of the gradient. Redirecting that
   specific utility keeps the gradient coherent with the new palette.
   Deliberately no var(--tw-gradient-to-position) suffix here — Tailwind
   only defines that variable when an explicit position utility (e.g.
   "to-90%") is present, which this element doesn't have; referencing an
   undefined custom property with no fallback makes the *entire*
   containing declaration invalid, silently dropping back to a fully
   transparent gradient stop (confirmed empirically: the hero rendered
   with an invisible white-on-white heading before this fix).
   ========================================================================== */
.to-orange-400 {
    --tw-gradient-to: var(--color-gold-500);
}

section.bg-gradient-to-br h1 {
    font-weight: 600;
    text-shadow: 0 2px 24px rgb(0 0 0 / 0.15);
}

/* ==========================================================================
   Cards & panels — softer, deeper shadow and a touch more radius for an
   editorial-premium feel; a subtle lift on hover for anything already
   marked interactive by the base template's own .shadow-soft convention.
   ========================================================================== */
.shadow-soft {
    box-shadow: 0 1px 2px rgb(23 20 15 / 0.04), 0 12px 32px -12px rgb(23 20 15 / 0.18);
}

a.shadow-soft, button.shadow-soft {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.shadow-soft:hover, button.shadow-soft:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgb(23 20 15 / 0.06), 0 20px 40px -16px rgb(15 157 116 / 0.35);
}

/* ==========================================================================
   Buttons — CTAs get a slightly more deliberate press/hover feel. Scoped to
   the rounded-full + font-semibold combination the button component always
   renders, so this doesn't reach unrelated rounded-full elements (badges,
   avatar frames) that lack that pairing.
   ========================================================================== */
.rounded-full.font-semibold {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rounded-full.font-semibold:hover {
    transform: translateY(-1px);
}

.rounded-full.font-semibold:active {
    transform: translateY(0);
}

/* ==========================================================================
   Links & selection — small, consistent premium touches.
   ========================================================================== */
::selection {
    background-color: var(--color-brand-200);
    color: var(--color-brand-900);
}

a {
    text-underline-offset: 3px;
}

/* ==========================================================================
   Scrollbar — a refined, on-brand scrollbar rather than the OS default
   (falls back silently on browsers without support; nothing breaks).
   ========================================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-ink-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-ink-300);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand-400);
}

/* ==========================================================================
   Scroll-reveal support — plain CSS transition classes toggled by
   theme.js's IntersectionObserver. Elements start visible (opacity: 1) by
   default so nothing depends on JS running for content to be readable —
   theme.js only adds the ".reveal" starting state once it's confirmed it
   can also flip it back, and prefers-reduced-motion skips the effect
   entirely.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}