/* =========================================================================
   CS-THEME-02 — design tokens.

   The whole palette and rhythm of the theme, in one place. Nothing below
   this file hard-codes a colour or a spacing number.

   NOT derived from Bootstrap. The audit found bootstrap.css at 129 KB in
   an RTL site, most of it unused and most of its layout rules written in
   physical directions. None of it is carried over.

   Dark mode is a token swap and nothing else: no component is written
   twice, and no icon changes, because every icon inherits currentColor.
   ========================================================================= */

:root {
    /* ---- colour: light ------------------------------------------------ */
    --color-bg:        #f6f7fb;   /* page */
    --color-surface:   #ffffff;   /* cards, header, menus */
    --color-surface-2: #eef0f7;   /* insets: search field, chips */
    --color-text:      #12141c;   /* body copy */
    --color-muted:     #5b6072;   /* secondary copy, ≥4.6:1 on --color-bg */
    --color-accent:    #4b3bd6;   /* actions; ≥5.9:1 against white */
    --color-accent-ink:#ffffff;   /* text on accent */
    --color-border:    #d9dce8;
    --color-focus:     #ff8a3d;   /* deliberately NOT the accent, so a focus
                                     ring is visible on an accent button */
    --color-overlay:   rgba(10, 12, 20, .55);

    /* ---- radius -------------------------------------------------------- */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    /* ---- spacing: a 4px scale ------------------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* ---- layout -------------------------------------------------------- */
    --container: 1200px;
    --header-height: 60px;

    /* ---- the minimum comfortable touch target --------------------------
       Named rather than repeated. The audit measured 52% of the old game
       page's controls below this, so it is a token the guards can check. */
    --tap-min: 44px;

    /* ---- type ----------------------------------------------------------
       One family. The audit found eight loaded — Tajawal, Cairo, Droid
       Sans, Oswald, two Material Icons faces and two Font Awesome faces —
       two of them Latin-only on an Arabic site.

       This stack is entirely local: it asks the operating system for its
       own Arabic UI face and costs zero bytes and zero requests. There is
       no webfont in the shell, so there is no flash of invisible text and
       nothing to preload. If a brand face is ever wanted it belongs in a
       later phase, measured, not assumed. */
    --font-ui: "Segoe UI", "Noto Sans Arabic", "Noto Kufi Arabic",
               "Dubai", "Geeza Pro", "Tahoma", system-ui, sans-serif;

    /* The audit measured 12px body and 10px card titles. Both are below
       what anyone should read on a phone. */
    --text-xs:   13px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;

    --leading: 1.65;   /* Arabic needs more than Latin defaults */

    --shadow-1: 0 1px 2px rgba(18, 20, 28, .06), 0 2px 8px rgba(18, 20, 28, .05);
    --shadow-2: 0 8px 30px rgba(18, 20, 28, .16);

    --speed: 180ms;
}

/* ---- colour: dark, by system preference -------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:        #0e1016;
        --color-surface:   #161923;
        --color-surface-2: #1e2230;
        --color-text:      #eef0f7;
        --color-muted:     #a3a9bd;   /* ≥5.5:1 on --color-bg */
        --color-accent:    #8f83ff;   /* lifted for contrast on dark */
        --color-accent-ink:#0e1016;
        --color-border:    #2a2f3f;
        --color-focus:     #ffab6b;
        --color-overlay:   rgba(0, 0, 0, .65);
        --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .35);
        --shadow-2: 0 8px 30px rgba(0, 0, 0, .55);
    }
}

/* ---- colour: dark, chosen explicitly ----------------------------------
   Both blocks are needed. The media query alone cannot be overridden by a
   toggle, and the attribute alone ignores a reader who never opens the
   toggle but has set their OS to dark. */
:root[data-theme="dark"] {
    --color-bg:        #0e1016;
    --color-surface:   #161923;
    --color-surface-2: #1e2230;
    --color-text:      #eef0f7;
    --color-muted:     #a3a9bd;
    --color-accent:    #8f83ff;
    --color-accent-ink:#0e1016;
    --color-border:    #2a2f3f;
    --color-focus:     #ffab6b;
    --color-overlay:   rgba(0, 0, 0, .65);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-2: 0 8px 30px rgba(0, 0, 0, .55);
}