/*
 * 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 now ships in the base stylesheet (resources/css/app.css, "Storefront Display"). */