/*
 * Sakeefa theme for the demo copy (switched on by BRAND_CSS in .env.demo).
 * The storefront is built on Tailwind's stone scale, so remapping those variables to a
 * Limestone-to-Ink scale re-themes every page without touching templates.
 * Palette: Clay #B5532E · Limestone #EDE4D3 · Cypress #2F3A2C · Brass #C49A4A · Ink #1B1A17
 */
:root {
    --color-stone-50: #f8f4ec;
    --color-stone-100: #ede4d3;
    --color-stone-200: #e2d6c0;
    --color-stone-300: #cdbda1;
    --color-stone-400: #776a54;
    --color-stone-500: #66594a;
    --color-stone-600: #5d5244;
    --color-stone-700: #433b31;
    --color-stone-800: #2b2722;
    --color-stone-900: #1b1a17;

    --color-amber-50: #f8ece5;
    --color-amber-500: #c49a4a;
    --color-amber-600: #b5532e;
    --color-amber-700: #9a4425;

    --color-emerald-600: #2f3a2c;
    --color-emerald-800: #232b21;
}

::selection { background: #b5532e; color: #f8f4ec; }

/* The lockup is wider than the old square logo. */
#global-header-logo img { width: 6.5rem; height: auto; }
@media (min-width: 768px) { #global-header-logo img { width: 10rem; } }

/* Backgrounds the templates hardcode instead of using the stone scale. */
.bg-\[\#f5f5f4\] { background-color: #ede4d3; }
.bg-\[\#fafaf9\], .bg-\[\#fcfcfc\] { background-color: #f8f4ec; }
.bg-\[\#e7e5e4\] { background-color: #e2d6c0; }
.bg-\[\#d6d3d1\] { background-color: #cdbda1; }
.bg-white { background-color: #fbf8f2; }
body { background-color: #ede4d3; }

/* The Our Story artwork is the brand mark: show it whole, not cropped. */
img[src$="sakeefa-mark.png"] { object-fit: contain; padding: 14%; }

/* Deposit controls use indigo on the live site; here the whole scale becomes Cypress. */
:root {
    --color-emerald-700: #2f3a2c;
    --color-indigo-50: #e6e9df;
    --color-indigo-100: #d5dbcb;
    --color-indigo-200: #b9c2ac;
    --color-indigo-500: #556450;
    --color-indigo-600: #2f3a2c;
    --color-indigo-700: #2f3a2c;
    --color-indigo-900: #1d241b;
}

/* Display type: a calligraphic naskh for Arabic, a high-contrast serif for Latin. Both OFL,
 * subset and self-hosted in /fonts/sakeefa. Cairo stays the text face. */
/* Same weight descriptors for both scripts: Chrome only merges faces by unicode-range
 * when their descriptors match exactly. */
@font-face {
    font-family: "Sakeefa Display";
    src: url("/fonts/sakeefa/NotoNaskhArabic-Variable.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
    font-family: "Sakeefa Display";
    src: url("/fonts/sakeefa/NotoNaskhArabic-Variable.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}
@font-face {
    font-family: "Sakeefa Display";
    src: url("/fonts/sakeefa/NotoSerifDisplay-Latin-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+00D7;
}
@font-face {
    font-family: "Sakeefa Display";
    src: url("/fonts/sakeefa/NotoSerifDisplay-Latin-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+00D7;
}

:root { --font-serif: "Sakeefa Display", "Cairo", Georgia, serif; }
/* html[lang] lifts this above the layout's per-language h1-h6 font rules. */
html[lang] .font-serif { font-family: "Sakeefa Display", "Cairo", Georgia, serif; letter-spacing: -0.01em; }
/* Naskh needs room above and below its letters; tight leading clips the dots. */
html[dir="rtl"] .font-serif { line-height: 1.4; letter-spacing: 0; }