/*
|--------------------------------------------------------------------------
| daralkaf brand tokens
|--------------------------------------------------------------------------
|
| Loaded immediately AFTER new-assets/css/theme.css, which defines the whole
| --site-* contract. This file redefines only the values, so every component
| already written against those tokens — the storefront chrome, the shared
| footer, the account hub's pa-* shell — turns green and gold without being
| touched, and theme.css stays byte-identical to upstream for future syncing.
|
| The palette is sampled from the approved mockups, not eyeballed:
|
|   #1f4e3d  primary green   the brand, buttons, headings   (294,763 px)
|   #101c17  ink             footer ground, body copy       (219,491 px)
|   #163a2d  deep green      the promo bar above the header  (25,610 px)
|   #b8894a  gold            accents, badges, the one CTA    (10,185 px)
|   #f7f9f8  wash            alternating sections
|   #e4eae7  line            hairlines and card borders
|
| The design is light-only. A dark ramp is still defined because siteTheme()
| offers light/dark/auto and the shared components read these tokens in either
| mode — without it, dark mode renders unreadable rather than merely different.
*/

:root {
    /* Surfaces */
    --site-bg:            #ffffff;
    --site-bg-alt:        #f7f9f8;
    --site-bg-sunken:     #f2f5f4;
    --site-surface:       #ffffff;
    --site-surface-2:     #fbfcfc;
    --site-overlay:       rgba(16, 28, 23, .55);

    /* Text */
    --site-ink:           #101c17;
    --site-ink-strong:    #0a1310;
    --site-ink-invert:    #ffffff;
    --site-muted:         #5b6b64;
    --site-muted-2:       #6d7c75;
    --site-faint:         #a3b0aa;

    /* Lines */
    --site-border:        #e4eae7;
    --site-border-soft:   #eef2f0;
    --site-border-strong: #cbd6d1;

    /* Brand */
    --site-brand:         #1f4e3d;
    --site-brand-strong:  #163a2d;
    --site-brand-soft:    #eef3f1;
    --site-brand-contrast:#ffffff;
    --site-accent:        #b8894a;

    /* Status. Success is deliberately NOT the brand green: "in stock" and
       "your order is confirmed" must read as a state, not as chrome. */
    --site-success:       #1a7f45;
    --site-success-soft:  #e9f6ee;
    --site-danger:        #b42318;
    --site-danger-soft:   #fdecec;
    --site-warning:       #8a5f20;
    --site-warning-soft:  #fcf5e8;

    /* Elevation — flatter than upstream; the mockups lean on hairlines. */
    --site-shadow-sm:     0 1px 2px rgba(16, 28, 23, .05);
    --site-shadow:        0 6px 20px rgba(16, 28, 23, .08);
    --site-shadow-lg:     0 18px 48px rgba(16, 28, 23, .12);

    /* ── daralkaf's own tokens, for the components the mockups add ───────── */
    --dk-green-deep:      #163a2d;   /* promo bar, logo mark                   */
    --dk-green:           #1f4e3d;
    --dk-green-ink:       #101c17;
    --dk-gold:            #b8894a;
    --dk-gold-soft:       #f7efe3;   /* the free-shipping notice ground        */
    --dk-gold-strong:     #97702f;
    --dk-wash:            #f7f9f8;
    --dk-line:            #e4eae7;

    --dk-radius:          10px;
    --dk-radius-sm:       6px;
    --dk-radius-lg:       16px;

    /* Alexandria is already in the layout's single Google Fonts request; it is
       the closest match to the mockups' geometric Arabic and costs no extra
       round trip. */
    --dk-font:            "Alexandria", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    --site-bg:            #0d1714;
    --site-bg-alt:        #11201b;
    --site-bg-sunken:     #0a1210;
    --site-surface:       #14241e;
    --site-surface-2:     #182a23;
    --site-overlay:       rgba(0, 0, 0, .66);

    --site-ink:           #e8efec;
    --site-ink-strong:    #ffffff;
    --site-ink-invert:    #0d1714;
    --site-muted:         #9fb0a9;
    --site-muted-2:       #8b9d96;
    --site-faint:         #5f7169;

    --site-border:        #23342d;
    --site-border-soft:   #1b2a24;
    --site-border-strong: #33463e;

    /* Lightened: the primary green is unreadable as text on a dark ground. */
    --site-brand:         #6fa88f;
    --site-brand-strong:  #8fc0aa;
    --site-brand-soft:    #16261f;
    --site-brand-contrast:#0d1714;
    --site-accent:        #d3a86a;

    --site-success-soft:  #10261a;
    --site-danger-soft:   #2a1512;
    --site-warning-soft:  #2a2114;

    --dk-gold:            #d3a86a;
    --dk-gold-soft:       #241d12;
    --dk-wash:            #11201b;
    --dk-line:            #23342d;
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --site-bg:            #0d1714;
        --site-bg-alt:        #11201b;
        --site-bg-sunken:     #0a1210;
        --site-surface:       #14241e;
        --site-surface-2:     #182a23;
        --site-overlay:       rgba(0, 0, 0, .66);

        --site-ink:           #e8efec;
        --site-ink-strong:    #ffffff;
        --site-ink-invert:    #0d1714;
        --site-muted:         #9fb0a9;
        --site-muted-2:       #8b9d96;
        --site-faint:         #5f7169;

        --site-border:        #23342d;
        --site-border-soft:   #1b2a24;
        --site-border-strong: #33463e;

        --site-brand:         #6fa88f;
        --site-brand-strong:  #8fc0aa;
        --site-brand-soft:    #16261f;
        --site-brand-contrast:#0d1714;
        --site-accent:        #d3a86a;

        --site-success-soft:  #10261a;
        --site-danger-soft:   #2a1512;
        --site-warning-soft:  #2a2114;

        --dk-gold:            #d3a86a;
        --dk-gold-soft:       #241d12;
        --dk-wash:            #11201b;
        --dk-line:            #23342d;
    }
}

/*
|--------------------------------------------------------------------------
| The --purple-* ramp, re-pointed
|--------------------------------------------------------------------------
|
| marketplace.css and storefront-header.css carry a ten-step magenta scale and
| read it 185 times between them: the search button, the mega-menu trigger, the
| language pill, the active nav underline, the account shell.
|
| Two scopes, not one. marketplace.css declares the scale on :root, but
| storefront-header.css declares it on `.sh` — and a value set on a descendant
| beats one set on :root for that subtree whatever the specificity, which is why
| overriding only :root left the whole header magenta.
|
| Every step is mixed from --site-brand rather than written as a literal, so the
| ramp follows both the theme (--site-brand and --site-bg are themed on :root)
| and whatever colour an admin picks in Website settings → Colors, which
| _brand-vars.blade.php emits after this file. One definition, no per-theme
| copies to keep in step.
*/
:root,
.sh {
    --purple-50:  color-mix(in srgb, var(--site-brand)  6%, var(--site-bg));
    --purple-100: color-mix(in srgb, var(--site-brand) 14%, var(--site-bg));
    --purple-200: color-mix(in srgb, var(--site-brand) 30%, var(--site-bg));
    --purple-300: color-mix(in srgb, var(--site-brand) 48%, var(--site-bg));
    --purple-400: color-mix(in srgb, var(--site-brand) 74%, var(--site-bg));
    --purple-500: var(--site-brand);
    --purple-600: var(--site-brand-strong);
    --purple-700: var(--site-brand-strong);
    --purple-800: color-mix(in srgb, var(--site-brand-strong) 70%, var(--site-ink));
    --purple-900: var(--site-ink);

    /* marketplace.css keeps these as fixed fills so white label text on a brand
       button stays readable whatever the theme does to the ramp. Same intent,
       daralkaf's colour. */
    --purple-500-solid:  #1f4e3d;
    --brand-hover-solid: #163a2d;

    /* The gradient both files build from the brand pair. */
    --brand-grad: linear-gradient(135deg, var(--site-brand) 0%, var(--site-brand-strong) 100%);
}

/*
| The header's own neutral scale.
|
| storefront-header.css declares --ink-* / --gray-* / --border on `.sh` as fixed
| light-theme greys, so the promo bar came out near-black (#1D1D1B) instead of
| the design's deep green, and the header stayed light in dark mode. Pointed at
| the shared tokens so both follow.
|
| --ink-900 is the exception: the mockups put the deep green behind the promo
| bar, which is a brand surface rather than a neutral one.
*/
.sh {
    --ink-900:  var(--dk-green-deep);
    --ink-800:  var(--site-ink);
    --gray-600: var(--site-muted);
    --gray-500: var(--site-muted-2);
    --gray-300: var(--site-border-strong);
    --gray-200: var(--site-border);
    --gray-100: var(--site-bg-alt);
    --gray-50:  var(--site-surface-2);
    --border:   var(--site-border);

    --radius:    var(--dk-radius-sm);
    --radius-lg: var(--dk-radius);

    color: var(--site-ink);
}