/* ==========================================================================
   Design tokens — the single source of every colour, font, size, radius,
   shadow and motif on the public site. Components only read these.
   --------------------------------------------------------------------------
   Sumoo Al-Fikr — "Windows / نوافذ" direction. The brand is a monoline
   taupe mark on white with five equal accents; photos sit in windows
   shaped like the logo's letters (ring و, pill م, arches س) wrapped in
   its concentric lines.

   Roles:
     action  booking — the one thing we want clicked (deep ink pill with an
             aqua dot, as in the approved design)
     second  aqua, the lead accent: active states, dots, rings, links, the
             booking folder. -strong carries white text, -text reads on paper
     panel   the warm taupe tint used for alternating bands
     ink     text (a deep taupe — the brand taupe itself is too light for
             text at ≈2.2:1); paper = white, like the stationery
   Brand colours from the stationery file (exact): taupe #B5AEA1,
   aqua #77C8D3, peach #FAC4AB, sage #C3C69A, rose #D87F95, indigo #596197.
   Only indigo and ink carry white text; the others are fills/dots with
   dark text.
   ========================================================================== */

:root {
    /* ── 1. Base colours ─────────────────────────────────────────────────── */
    --action:        #3A3631;   /* booking pill — white text ≈ 12:1 */
    --second:        #77C8D3;   /* brand aqua — dots, rings, folder fill (dark text only) */
    --second-strong: #2F7C87;   /* aqua darkened for white text (4.8:1) */
    --second-text:   #2B6F78;   /* aqua as text on paper (5.5:1) — links, active labels */
    --second-ink:    #596197;   /* brand indigo — footer panel (white text 5.9:1) */
    --panel:         #F6F4F0;   /* warm taupe tint — alternating bands */
    --panel-deep:    #B5AEA1;   /* brand taupe — lines, rings, pattern (never text) */
    --ink:           #3F3B35;   /* derived deep taupe — text (≈ 11:1 on white) */
    --paper:         #FFFFFF;   /* white, as the stationery */
    --whatsapp:      #25D366;

    /* Footer = deep aqua (white text 4.8:1); the CTA band above it = brand aqua
       (dark text). Swap here to recolour. */
    --footer-bg:   #2F7C87;
    --footer-text: rgb(255 255 255 / 0.9);
    --cta-bg:      #77C8D3;

    /* Brand accents — decoration only (dots, folder tabs, country markers) */
    --taupe:  #B5AEA1;
    --aqua:   #77C8D3;
    --peach:  #FAC4AB;
    --sage:   #C3C69A;
    --rose:   #D87F95;
    --indigo: #596197;

    /* ── 2. Derived ─────────────────────────────────────────────────────── */
    --action-deep:        color-mix(in srgb, var(--action) 70%, #000);
    --second-tint:        color-mix(in srgb, var(--second) 14%, #fff);
    --second-tint-strong: color-mix(in srgb, var(--second) 28%, #fff);
    --paper-deep:         var(--panel);
    --card:               #FFFFFF;
    --ink-soft:           color-mix(in srgb, var(--ink) 80%, var(--paper));   /* ≈ 5.5:1 */
    --ink-faint:          color-mix(in srgb, var(--ink) 70%, var(--paper));   /* ≈ 4.6:1 */
    --ink-deep:           #2A2723;   /* text on mid-tone fills (rose, aqua, sky photo) */
    --danger:             #A33A55;   /* deep rose — errors, destructive actions (white text ≈ 6.6:1) */
    --rating:             #DB9A55;   /* a deeper peach — the outline of a chosen rating star */
    --line:               color-mix(in srgb, var(--panel-deep) 34%, var(--paper));   /* hairlines */
    --line-strong:        color-mix(in srgb, var(--panel-deep) 60%, var(--paper));

    --primary:       var(--action);
    --primary-hover: var(--action-deep);
    --on-primary:    #FFFFFF;
    --accent:        var(--second-strong);
    --on-accent:     #FFFFFF;
    --link:          var(--second-text);

    /* ── Typography — self-hosted in css/core/fonts.css ─────────────────────
       Brand fonts are GE SS Two (Arabic, commercial) + Rubik + Montserrat.
       Until GE SS Two is licensed for the web, Alexandria (thin geometric,
       close to the monoline mark) sets display type and IBM Plex Sans
       Arabic sets text. Swap --font-display/--font-body when licensed. */
    --font-display: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --font-body:    "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-latin:   "Montserrat", "IBM Plex Sans Arabic", system-ui, sans-serif;   /* numbers, emails, labels */
    --fw-display:   300;

    --fs-xs:   0.78rem;
    --fs-sm:   0.875rem;
    --fs-base: 1.0625rem;                                   /* Arabic reads better a touch larger */
    --fs-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --fs-xl:   clamp(1.25rem, 1.12rem + 0.55vw, 1.5625rem);
    --fs-2xl:  clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem);
    --fs-3xl:  clamp(2rem, 1.5rem + 2vw, 3.25rem);
    --fs-hero: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    --lh-tight: 1.3;
    --lh-body:  1.85;

    /* ── Space (4px grid) ────────────────────────────────────────────────── */
    --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
    --space-5: 1.25rem;  --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
    --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;
    --section-y: clamp(3rem, 2rem + 3.6vw, 6rem);

    /* ── Layout ──────────────────────────────────────────────────────────── */
    --container:        1200px;
    --container-narrow: 820px;
    --gutter:           clamp(1rem, 0.6rem + 1.6vw, 2rem);
    --header-h:         84px;
    --appbar-h:         60px;
    --tabbar-h:         66px;
    --safe-bottom:      env(safe-area-inset-bottom, 0px);

    /* ── Shape — the brand has no corners: pills, rings, arches ─────────── */
    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
    --edge-radius: 0px;   /* the Windows direction keeps bands square; shape lives in the windows */

    /* ── Depth — used sparingly; the design is flat ─────────────────────── */
    --shadow-sm: 0 1px 0 var(--line);
    --shadow-md: 0 12px 28px -18px color-mix(in srgb, var(--ink) 40%, transparent);
    --shadow-lg: 0 28px 60px -28px color-mix(in srgb, var(--ink) 45%, transparent);
    --shadow-glow-primary: none;

    /* ── Motion ──────────────────────────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 160ms; --dur: 280ms; --dur-slow: 520ms;

    /* ── Layers ──────────────────────────────────────────────────────────── */
    --z-header: 100; --z-tabbar: 110; --z-float: 120; --z-sheet: 200; --z-lightbox: 300;

    /* ── Motifs (see css/core/utilities.css) ─────────────────────────────── */
    /* The logo's seven parallel strokes as a rule: 7 × 1px lines, 4px apart */
    --rule7-gap: 4px;
    --rule7: repeating-linear-gradient(to bottom, var(--line-strong) 0 1px, transparent 1px var(--rule7-gap));
    --rule7-h: calc(var(--rule7-gap) * 6 + 1px);
    /* Window rings: stroke, gap between rings */
    --ring-stroke: 2px;
    --ring-gap: 10px;
    --ring-color: var(--panel-deep);
    /* The brand pattern (the logo tiled, alternate rows rotated 180°) */
    --pattern-taupe: url("../../images/pattern-taupe.png");
    --pattern-white: url("../../images/pattern-white.png");
    --pattern-size: 360px;
}

/* Large screens: a wider stage */
@media (min-width: 1600px) {
    :root { --container: 1360px; }
}

/* Phones: tighter rings so a window with 7 lines still fits 390px */
@media (max-width: 991.98px) {
    :root { --ring-gap: 7px; --ring-stroke: 1.6px; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}