/* Dev Crow Egg · theme "coast" (Gulf Coast): the same shop in bright, cool UAE coastal daylight.
   Sunlit limestone plaster, deep-sea navy blocks (header, footer, seller band), reef-teal actions, Gulf turquoise
   accents and a coral for deals. The palette runs like the Gulf seen from the air: deep water, reef, shallows, sandbar.
   Type: Archivo SemiExpanded (display) with IBM Plex Sans (UI); Noto Kufi Arabic (Arabic display) with
   IBM Plex Sans Arabic (Arabic text). Linked after the core's site.css; the 3D scenes are in ./theme.js.
   Every token is listed in ../combined/THEMES.md. Text-bearing turquoise and coral use darker shades (AA). */
:root {
  /* ---------- the coast's own blocks (used by the overrides at the end of this file) ---------- */
  --c-navy: #0f2c49;            /* deep sea: header, footer */
  --c-navy-rgb: 15 44 73;
  --c-shore: #3cc0b8;           /* the turquoise shoreline edge under the header, over the footer */
  --c-on-navy: #f2f6f4;
  --c-on-navy-muted: #a9c0c9;
  --c-on-navy-accent: #7fddd3;  /* links, focus and highlights on navy */
  --c-cart: #6fd6cc;            /* the cart pill in the navy header (navy text on it) */

  /* ---------- palette ---------- */
  --bg: #e9efec;            /* sunlit limestone plaster, cool */
  --bg-2: #dbe5e1;          /* plaster in shade: segmented controls, pressed chips */
  --surface: #f6f8f5;       /* bars, sheets, the map button, raised surfaces */
  --card: #fcfcf9;          /* whitewash, never stark white */
  --wood: #36b3ac;          /* shoreline turquoise: rules, eyebrow lines, hover rings */
  --wood-soft: #f0e5cf;     /* sandbar: material chips (PLA), step dots */
  --wood-ink: #0a6870;      /* reef teal: eyebrow text, small icons on light */
  --ink: #10263a;           /* deep-sea ink: main text, dark fills */
  --ink-2: #2d4459;         /* secondary text */
  --muted: #4c5f70;         /* captions, hints */
  --line: #d3ddd9;          /* hairlines */
  --line-2: #b9c7c3;        /* stronger hairlines, input borders */
  --accent: #2fb3ac;        /* Gulf turquoise (fills and art, never small text) */
  --accent-ink: #0b6a72;    /* reef teal: primary buttons, links, focus ring */
  --accent-hover: #075760;  /* hovered accent, current rail item text */
  --accent-deep: #0e3550;   /* deep-sea panels (seller summary) */
  --accent-soft: #d3efeb;   /* shallow-water fill: current rail item, soft buttons */
  --accent-soft-2: #bce6e0; /* soft button pressed / hovered */
  --warm: #f08468;          /* coral (fills and art) */
  --warm-ink: #b13e2b;      /* deep coral: sale badges, cart badge, live dot, studio label */
  --warm-soft: #fce6de;     /* coral blush */
  --leaf: #3f7d5a;          /* palm green */
  --ok: #1c7350;            /* success */
  --bad: #ad3626;           /* errors */
  --bad-bg: #fbe4de;        /* error background */
  --bad-ring: #e9a99a;      /* error button outline */
  --on-accent: #fff;        /* text and icons on accent, ink and other strong fills */
  --field: #fff;            /* input and field backgrounds */
  --hover-bg: #fff;         /* hover fill of light buttons */
  --mat-ink: #5f4417;       /* text on material chips */
  --warn-ink: #8a560e;      /* warning icon */
  --rates-bg: #f6e8c4;      /* "example rates" badge */
  --rates-ink: #5f400f;
  /* text on dark fills (toast, "Start selling" band, seller summary) */
  --on-dark: #dde9ec;
  --on-dark-muted: #c3d4da;
  --on-dark-soft: #b8e5e0;
  --on-dark-accent: #7fddd3;
  --on-dark-figure: #ffd9a6;
  --on-dark-error: #ffb8a7;
  --band-from: #0a5262;     /* "Start selling" band: reef teal sinking into deep sea */
  --band-to: #0f2c49;
  /* the same colours as space-separated RGB channels, for translucent uses */
  --bg-rgb: 233 239 236;
  --bg-2-rgb: 219 229 225;
  --surface-rgb: 246 248 245;
  --shadow-rgb: 18 44 64;          /* soft shadows: cool sea-shadow, never brown */
  --shadow-2-rgb: 16 40 60;        /* header shadow */
  --shadow-3-rgb: 10 28 44;        /* deep shadows */
  --ring-rgb: 16 38 58;            /* hairline rings around swatches, the viewer toast */
  --scrim-rgb: 9 27 44;            /* dim behind sheets and dialogs */
  --accent-shadow-rgb: 7 80 88;    /* glow under primary buttons */
  --warm-ink-rgb: 177 62 43;       /* live-dot pulse */
  --on-dark-accent-rgb: 127 221 211; /* light on water in the "Start selling" band */
  --dark-rgb: 0 0 0;
  --light-rgb: 255 255 255;
  --globe-glow-rgb: 210 241 236;   /* sea-glass glow behind the globe */
  --egg-stage-rgb: 218 242 238;    /* the glow behind the egg in its dialog */

  /* ---------- components ---------- */
  --map-plan: #e0e9e5;      /* souq map: the plan's ground (plaster) */
  --map-walk: #dccaa6;      /* souq map: the walkway (sand) */
  --map-lamp: #e06b51;      /* souq map: coral lantern dots on the walkway */
  --alley-sky: #6fb5e2;     /* alley box before its poster/3D draws: clear sky, haze, limestone */
  --alley-glow: #e6f3f3;
  --alley-ground: #d6c7a6;
  --sign-focus: #fff;
  --room-bg: #e1ecea;
  --viewer-bg-1: #fbfcfa;   /* lantern stage: cool plaster in clean light */
  --viewer-bg-2: #e7eeeb;
  --viewer-bg-3: #d6e1dd;
  --viewer-lamp-on-bg: #0f2c49;
  --viewer-lamp-on-ink: #ffd27a;
  --part-dot: #7fddd3;
  --egg-tag: #b13e2b;       /* "Deal" tag on the egg: deep coral */
  --egg-tag-ink: #fff8f4;
  --sale-ring: #e89a86;     /* deal card in the egg dialog: coral blush */
  --sale-from: #fff8f4;
  --sale-to: #fdece5;

  /* ---------- type ---------- */
  --f-body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --w-display: 600;
  --lh-display: 1.08;
  --f-serif: "Archivo", "Noto Kufi Arabic", system-ui, sans-serif;   /* Latin display: wordmark and product names */
  --f-latin: "IBM Plex Sans";                                        /* prices and figures (also in Arabic) */
  --f-arabic: "Noto Kufi Arabic";                                    /* small Arabic labels in Latin contexts */

  /* ---------- shape, depth, motion, focus, texture ---------- */
  --r-xs: 8px; --r-s: 12px; --r: 16px; --r-l: 22px; --r-xl: 28px;
  /* crisp plaster edges: a faint hairline plus a soft, cool, high-sun shadow */
  --sh-1: 0 0 0 1px rgba(16, 38, 58, .045), 0 1px 2px rgba(16, 38, 58, .05), 0 10px 24px -16px rgba(16, 38, 58, .3);
  --sh-2: 0 0 0 1px rgba(16, 38, 58, .05), 0 2px 6px rgba(16, 38, 58, .06), 0 24px 50px -26px rgba(16, 38, 58, .42);
  --sh-3: 0 4px 12px rgba(10, 28, 44, .1), 0 32px 72px -22px rgba(10, 28, 44, .4);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
  --focus: var(--accent-ink);
  --focus-w: 3px;
  --focus-offset: 2px;
  /* lime plaster: a faint, large-grained mottle (a 0.4 KB SVG noise tile) */
  --bg-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0125' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .2 0 0 0 0 .24 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23p)'/%3E%3C/svg%3E");

  /* ---------- drawn product art and scene vignettes (art.js) ---------- */
  --art-shade-dark: #142433;     /* what shade() darkens toward: cool sea shadow */
  --art-shade-light: #ffffff;
  --art-paper: #fafaf6;
  --art-white: #fff;
  --art-black: #000;
  --art-wood: #cdb08a;           /* bleached driftwood */
  --art-leaf: #4f8a63;
  --art-leaf-light: #68a37a;
  --art-leaf-dark: #3e7151;
  --art-glow: #ffe3b0;
  --art-glow-2: #ffd08f;
  --art-sand: #d8bf94;           /* the lantern and printed parts: the Sand filament */
  --art-cream: #faf8f2;
  --art-putty: #e5e8e2;
  --art-linen-wall: #e5ece9;     /* "linen" tone becomes plaster */
  --art-linen-light: #f5f8f6;
  --art-linen-deep: #d4dfdb;
  --art-mist-wall: #d1e8e8;      /* "mist" tone becomes sea mist */
  --art-mist-light: #eaf5f4;
  --art-mist-deep: #b9dadb;
  --art-blush-wall: #f6ded5;     /* "blush" tone becomes coral blush */
  --art-blush-light: #fbefea;
  --art-blush-deep: #ecc6b9;
  --art-oat-wall: #eee5d2;       /* "oat" tone becomes sandbar */
  --art-oat-light: #f7f1e4;
  --art-oat-deep: #dfd2b8;
  --art-oak: #dcc4a0;
  --art-oak-edge: #c6a87e;
  --art-oak-dark: #a98a62;
  --art-ink: #1b2a38;
  --art-blue: #2e8790;           /* sea-teal props, and the majlis in the room poster (matches the 3D sofa) */
  --art-clay: #ec9a83;           /* coral props */
  --art-pearl: #f1ede5;
  --art-charcoal: #3b3a3c;
  --art-shadow: #1c3346;
  --art-lantern-light: #ffe7b8;
  --art-paper-edge: #d6dfdb;
  --art-box-edge: #b99467;
  --art-box: #dcbf95;
  --art-mustard: #e9c46a;
  --art-rug: #cbe5e1;
  --art-cushion: #eef1ec;
  --art-blue-soft: #8cc3d6;
  --art-graphite: #4e5560;
  --art-tile-line: #cdd7d3;
  --art-globe: #c9ece8;
  --art-button: #0b6a72;
  --art-knob: #e9c46a;
  --art-nameplate-edge: #d6dcd7;
  --art-soil: #6e5038;
  --art-water: #8fd0d8;
  --art-falcon-1: #d7bb93;
  --art-falcon-2: #c3a37a;
  --art-falcon-3: #ad8d64;
  --art-falcon-4: #e6d1b0;
  --art-falcon-5: #9a7b55;
  --art-falcon-beak: #5b4a36;
  --art-vase: #d9b48f;
  --art-stem: #c2a878;
  --art-pod: #ece0c6;
  --art-picture: #2a8fa0;
  --art-picture-hill: #8dd0cf;
  --art-dhow-post: #dcd8ce;
  --art-dhow-hull: #f2eee6;
  --art-dhow-mast: #c9bfae;
  --art-book-pale: #e3ded1;
  --art-crow-tail: #2a292b;
  --art-crow-outline: #262528;
  --art-crow-wing: #5a585e;
  --art-crow-beak: #4a4846;
  --art-pencup: #e58a70;
  --art-stand: #e3d7c2;
  --art-phone-screen: #12304d;
  --art-phone-sun: #ffd9a6;
  --art-honey-1: #f1f1eb;
  --art-honey-2: #e1e5df;
  --art-honey-3: #e9ebe5;
  --art-flame: #f5b25f;
  --art-pale-blue: #cde3e9;
  --art-window-sky: #bfe5f0;     /* the planter's window looks out to sea */
  --art-window-hill: #6fc4cc;
  --art-sky-top: #98cfec;
  --art-sky-bottom: #e4f4f2;
  --art-skyline: #b4cfd9;
  --art-board: #e8e2d4;
  --art-lamp-beam: #fff6de;
  --art-balcony-wall: #f3efe6;
  --art-balcony-light: #bfe3ee;
  --art-skyline-2: #bcd4dd;
  --art-skyline-3: #a6c5d1;
  --art-terrace: #e6dece;
  --art-glow-soft: #ffe6bd;
  --art-terracotta: #c0673f;     /* terracotta lantern (step 2): the Terracotta filament */
  --art-nozzle: #ff9f6b;
  --art-door: #2a6d9e;           /* the blue door */
  /* ---------- logo mark (sits on navy in the header and footer) ---------- */
  --logo-house: #3cc0b8;
  --logo-egg: #f4f6f2;
  --logo-shine: #e56f55;

  /* ---------- SVG posters shown before each 3D scene (keep in step with theme.js) ---------- */
  --poster-globe-lit: #bcece6;
  --poster-globe-sea: #45bcbb;
  --poster-globe-shade: #1b7f93;
  --poster-globe-grid: #ffffff;
  --poster-globe-land: #e3be84;
  --poster-globe-arc: #f2775b;
  --poster-globe-ring: #ffffff;
  /* ---------- the drawn egg (pale sea-blue, speckled) ---------- */
  --egg-shell-lit: #dcf0f3;
  --egg-shell: #98cde0;
  --egg-shell-shade: #6fa3b2;
  --egg-speck: #2f5568;
  --egg-speck-dark: #1e3a4c;
  --egg-speck-deal: #d0573f;     /* coral specks when there's a deal */
  --egg-crack: #24435a;
  /* ---------- souq map button (phones) ---------- */
  --mapfab-walk: #d8c7a3;
  --mapfab-ring: #10263a;
  --mapfab-gate: #0b6a72;
  /* ---------- material guide (Sell page) ---------- */
  --mat-pla: #cfab76;
  --mat-petg: #2fb3ac;
  --mat-ring: #fff;

  /* ---------- "See it in your room" viewer (shared/room-view) ---------- */
  --rv-bg: #e9efec; --rv-surface: #f6f8f5; --rv-text: #10263a; --rv-muted: #4c5f70; --rv-line: #cfdad6;
  --rv-accent: #0b6a72; --rv-accent-text: #ffffff; --rv-radius: 18px; --rv-font: var(--f-body); --rv-font-display: var(--f-display);
}
html[lang="ar"] {
  --f-body: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --f-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --w-display: 700;
  --lh-display: 1.5;
}

/* =====================================================================================================
   Overrides: restyling only (colour blocks, edges, type details). No layout, order or visibility changes.
   ===================================================================================================== */

/* Latin display: Archivo SemiExpanded wants a hair of negative tracking at headline sizes (never on Arabic:
   the core already forces letter-spacing 0 under html[lang="ar"]). */
html:not([lang="ar"]) :is(h1, h2, .sec__title, .stall__name, .sheet__title, .smap__lanetitle) { letter-spacing: -.012em; }
html:not([lang="ar"]) .hero h1, html:not([lang="ar"]) .sh h1 { letter-spacing: -.02em; }
/* SemiExpanded is wider than linen's serif: 2px less on the desktop hero keeps "Designed anywhere." on one line at 1440 */
@media (min-width: 1100px) { html:not([lang="ar"]) .hero h1 { font-size: 50px; } }
.logo__word { font-weight: 600; letter-spacing: -.005em; }

/* ---------- Deep-sea blocks: header and footer ----------
   The tokens are re-scoped inside them, so every core rule that reads --ink, --muted, --line, --surface,
   --focus etc. turns light-on-navy by itself. Focus stays visible: a light turquoise ring on navy. */
.hdr, .foot {
  --bg: var(--c-navy); --bg-rgb: var(--c-navy-rgb);
  --bg-2: rgb(255 255 255 / .12); --bg-2-rgb: 40 64 88;
  --surface: rgb(255 255 255 / .08); --surface-rgb: 39 64 89;
  --card: rgb(255 255 255 / .1);
  --ink: var(--c-on-navy); --ink-2: #d3e1e4; --muted: var(--c-on-navy-muted);
  --line: rgb(255 255 255 / .14); --line-2: rgb(255 255 255 / .26);
  --wood: var(--c-on-navy-accent); --wood-ink: var(--c-on-navy-accent);
  --accent-ink: var(--c-on-navy-accent); --accent-hover: #a9ece4;
  --hover-bg: rgb(255 255 255 / .12);
  --focus: var(--c-on-navy-accent);
  color: var(--ink);
}
.hdr { background: rgb(var(--c-navy-rgb) / .97); box-shadow: inset 0 -2px 0 var(--c-shore); }
.hdr.is-scrolled { box-shadow: inset 0 -2px 0 var(--c-shore), 0 12px 28px -18px rgb(var(--shadow-3-rgb) / .55); }
.foot { background: var(--c-navy); box-shadow: inset 0 2px 0 var(--c-shore); }
.hdr .seg button[aria-pressed="true"], .foot .seg button[aria-pressed="true"] { background: var(--c-on-navy); color: var(--c-navy); box-shadow: none; }
.hdr .seg button:not([aria-pressed="true"]), .foot .seg button:not([aria-pressed="true"]) { color: var(--c-on-navy-muted); }
@media (min-width: 1100px) {
  .hdr .hdr-cart { background: var(--c-cart); color: var(--c-navy); }
  .hdr .hdr-cart .badge { box-shadow: none; }
  .hdr .hdr-cart .badge.is-zero { background: rgb(var(--c-navy-rgb) / .14); color: var(--c-navy); }
  .hdr .sbtn .ico { color: var(--c-on-navy-muted); }
}
@media (hover: hover) and (pointer: fine) {
  .hdr .hdr-cart:hover { background: #95e3db; }
  .hdr .iconbtn:not(.hdr-cart):hover { background: rgb(255 255 255 / .12); }
  .hdr .sbtn:hover { background: rgb(255 255 255 / .12); }
  .foot ul a:hover { color: var(--c-on-navy-accent); }
}

/* Phones and tablets: the body's bottom padding (room for the tab bar or buy bar) continues the navy footer
   instead of showing a strip of plaster under it. Paint only; the padding itself is the core's. */
@media (max-width: 1099.98px) {
  body { background-image: linear-gradient(to top, var(--c-navy) 120px, transparent 120px), var(--bg-texture); }
}

/* ---------- Dark panels elsewhere: the focus ring and links switch to light turquoise ---------- */
.band, .sum, .toast, .skip { --focus: var(--c-on-navy-accent); }   /* .skip appears over the navy header */
/* room hotspots sit on a canvas that is light by day and dark in the evening: a white halo inside the
   teal ring keeps the focus indicator visible on both (two-colour indicator) */
.spot:focus-visible { box-shadow: 0 0 0 2px #fff; }
/* the seller band: reef teal sinking into deep sea, with sunlight on the water */
.band { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), var(--sh-2); }
.band::after { background: radial-gradient(circle, rgb(var(--on-dark-accent-rgb) / .14), transparent 68%); }
.ex { background: rgb(4 20 34 / .26); }

/* ---------- Light surfaces ---------- */
/* the desktop rail: a lighter plaster wall beside the page */
.rail { background: rgb(var(--surface-rgb) / .9); }
/* primary buttons get a crisp highlight edge, like sun on a painted door */
.btn--primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 6px 16px -8px rgb(var(--accent-shadow-rgb) / .7); }
/* filament swatches: a firmer ring so Pearl White and Sand hold their edge on whitewash (3:1 boundary at 50%) */
.swatch__c { box-shadow: inset 0 0 0 1.5px rgb(var(--ring-rgb) / .5); }
.opt__sw { box-shadow: inset 0 0 0 1.5px rgb(var(--ring-rgb) / .5); }
.bb-sw { box-shadow: inset 0 0 0 1.5px rgb(var(--ring-rgb) / .5), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--line-2); }
/* struck-through prices stay readable: a slightly stronger strike in the muted ink */
.pr__was { text-decoration-color: rgb(var(--ring-rgb) / .7); }
/* the step that's ours ("We print it in the UAE") stays teal; the others are sand dots with teal icons */
.how__step::before { opacity: .9; }