/* Dev Crow Egg · theme "night": Night Souq. The same shop after sunset: deep ink-blue and charcoal, lantern gold and
   copper, warm light pooling on surfaces. Marcellus (inscriptional Roman capitals, like the lettering over a souq gate)
   and Jost for Latin; El Messiri and Readex Pro for Arabic.
   Linked after the core stylesheet (../combined/css/site.css). It sets every token listed in ../combined/THEMES.md,
   then a short block of restyle-only overrides for the places where the core assumed a light page.
   The 3D scenes, canvas textures and lane colours come from ./theme.js. */
:root {
  color-scheme: dark;

  /* ---------- palette ---------- */
  --bg: #0d1322;            /* night ink: page background */
  --bg-2: #222a3b;          /* secondary fill: segmented controls, pressed chips */
  --surface: #141b2a;       /* bars, sheets, the map button, raised surfaces */
  --card: #1a202c;          /* charcoal cards */
  --wood: #b98d4f;          /* brass: rules, eyebrows, hover rings */
  --wood-soft: #3a2f1f;     /* material chips (PLA), step dots */
  --wood-ink: #e2bd7c;      /* eyebrow text, small icons */
  --ink: #f3eadb;           /* ivory: main text; light fills (pressed chip, map pin) */
  --ink-2: #d9cfbe;         /* secondary text */
  --muted: #a9b1c1;         /* moon silver: captions, hints */
  --line: #283042;          /* hairlines */
  --line-2: #847966;        /* stronger hairlines, input borders (3:1 on every surface) */
  --accent: #d9ab55;        /* lantern gold */
  --accent-ink: #e5b862;    /* primary buttons, links, focus ring */
  --accent-hover: #f3cf88;  /* hovered accent, current rail item text */
  --accent-deep: #1d2844;   /* deep indigo panels (seller summary) */
  --accent-soft: #352816;   /* umber glow: current rail item, soft buttons, selected options */
  --accent-soft-2: #47351c; /* soft button pressed / hovered */
  --warm: #c98a63;          /* copper */
  --warm-ink: #ee9f7a;      /* sale badges, cart badge, live dot, studio label (dark text on it) */
  --warm-soft: #3a231b;     /* soft copper fill */
  --leaf: #8cb58f;          /* green accent */
  --ok: #7cc89f;            /* success fill (dark icon on it) */
  --bad: #ffa08a;           /* errors */
  --bad-bg: #3a1d1b;        /* error background */
  --bad-ring: #b5604c;      /* error button outline */
  --on-accent: #10172a;     /* text and icons on gold, copper, ivory and other strong fills */
  --field: #0f1524;         /* input and field backgrounds */
  --hover-bg: #262f42;      /* hover fill of light buttons */
  --mat-ink: #f0cf94;       /* text on material chips */
  --warn-ink: #f2b653;      /* warning icon */
  --rates-bg: #3b2f17;      /* "example rates" badge */
  --rates-ink: #f3d08a;
  /* text on dark fills (toast, "Start selling" band, seller summary) */
  --on-dark: #e9e0d0;
  --on-dark-muted: #c9c1b3;
  --on-dark-soft: #c3cde0;
  --on-dark-accent: #f2c483;
  --on-dark-figure: #f6d79f;
  --on-dark-error: #ffb4a2;
  --band-from: #233159;     /* "Start selling" band gradient */
  --band-to: #121a30;
  /* the same colours as space-separated RGB channels, for translucent uses: rgb(var(--x-rgb) / .5) */
  --bg-rgb: 13 19 34;
  --bg-2-rgb: 34 42 59;
  --surface-rgb: 20 27 42;
  --shadow-rgb: 2 4 10;            /* soft shadows */
  --shadow-2-rgb: 2 4 10;          /* header shadow */
  --shadow-3-rgb: 0 2 8;           /* deep shadows */
  --ring-rgb: 240 228 206;         /* hairline rings around swatches (light, so Charcoal shows), the viewer toast */
  --scrim-rgb: 3 6 14;             /* dim behind sheets and dialogs */
  --accent-shadow-rgb: 229 184 98; /* the lantern glow under primary buttons */
  --warm-ink-rgb: 238 159 122;     /* live-dot pulse */
  --on-dark-accent-rgb: 242 196 131; /* glow in the "Start selling" band */
  --dark-rgb: 0 0 0;               /* dark overlays */
  --light-rgb: 255 255 255;        /* light overlays on dark */
  --globe-glow-rgb: 26 37 66;      /* the moonlit pool behind the globe */
  --egg-stage-rgb: 70 50 26;       /* the warm glow behind the egg in its dialog */

  /* ---------- components ---------- */
  --map-plan: #0f1626;      /* souq map: the plan's ground */
  --map-walk: #2c261c;      /* souq map: the walkway (cobbles at night) */
  --map-lamp: #f0bd5f;      /* souq map: lantern dots on the walkway */
  --alley-sky: #0a1020;     /* alley box before its poster/3D draws (sky, glow, ground) */
  --alley-glow: #3b2c2a;
  --alley-ground: #2a2019;
  --sign-focus: #fff;       /* focus ring on the alley's sign buttons */
  --room-bg: #1b1e2d;       /* "Shop the room" stage before its 3D draws */
  --viewer-bg-1: #2b3146;   /* product viewer: a dark stage, lifted where the lantern stands */
  --viewer-bg-2: #171d2d;
  --viewer-bg-3: #0b101c;
  --viewer-lamp-on-bg: #f0c069;  /* lamp toggle when on: lit gold */
  --viewer-lamp-on-ink: #1a1408;
  --part-dot: #b8612f;      /* exploded view parts list (on an ivory label) */
  --egg-tag: #ecc068;       /* "Deal" tag on the egg: gold leaf */
  --egg-tag-ink: #1a1408;
  --sale-ring: #b48a46;     /* deal card in the egg dialog */
  --sale-from: #2c2418;
  --sale-to: #1c1c22;

  /* ---------- type ---------- */
  --f-body: "Jost", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Marcellus", Georgia, "Times New Roman", serif;
  --w-display: 400;
  --lh-display: 1.12;
  --f-serif: "Marcellus", Georgia, serif;  /* Latin display face: wordmark and product names (also in Arabic) */
  --f-latin: "Jost";                       /* Latin text face for prices and figures (also in Arabic) */
  --f-arabic: "Readex Pro";                /* Arabic face for small Arabic labels in Latin contexts */

  /* ---------- shape, depth, motion, focus, texture ---------- */
  --r-xs: 6px; --r-s: 10px; --r: 16px; --r-l: 22px; --r-xl: 28px;
  /* a brass hairline and a faint top highlight, like a lit edge, then a soft deep shadow */
  --sh-1: inset 0 1px 0 rgb(255 232 196 / .05), 0 0 0 1px rgb(255 222 176 / .07), 0 12px 26px -16px rgb(0 2 8 / .8);
  --sh-2: inset 0 1px 0 rgb(255 232 196 / .07), 0 0 0 1px rgb(255 214 150 / .16), 0 24px 46px -22px rgb(0 2 8 / .9);
  --sh-3: inset 0 1px 0 rgb(255 232 196 / .06), 0 0 0 1px rgb(255 222 176 / .09), 0 32px 70px -18px rgb(0 2 8 / .85);
  --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;
  /* lantern light pooling at the top of the page, and the cool night sky at the start corner */
  --bg-texture: radial-gradient(1200px 560px at 78% -140px, rgb(214 158 78 / .11), rgb(214 158 78 / 0) 70%),
                radial-gradient(900px 640px at -10% -80px, rgb(64 88 150 / .16), rgb(64 88 150 / 0) 70%);

  /* ---------- drawn product art and scene vignettes (art.js): rooms at night, lit by lamps ---------- */
  --art-shade-dark: #090c15;     /* what shade() darkens toward */
  --art-shade-light: #fff3dc;    /* what shade() lightens toward */
  --art-paper: #efe6d4;          /* paper white: papers, screens, sails, frames */
  --art-white: #fff0d4;          /* highlights, lamp and moon beams, stars (usually with opacity) */
  --art-black: #000;             /* dark overlays (always with opacity) */
  --art-wood: #c9a063;           /* brass and wood accents: frames, rules, pencils */
  --art-leaf: #6f9a78;           /* plant leaves */
  --art-leaf-light: #8cb58f;     /* plant leaves, lit side */
  --art-leaf-dark: #4f7a5c;      /* plant leaves, shade side */
  --art-glow: #ffcf86;           /* warm lamp glow */
  --art-glow-2: #ffb35c;         /* warm lamp glow, outer */
  --art-sand: #d8bf94;           /* sand: the lantern and printed parts (the Sand filament) */
  --art-cream: #e6d8bf;          /* window frames, planter, house walls */
  --art-putty: #cbbfa9;          /* printer body, honeycomb pads */
  --art-linen-wall: #20263a;     /* wall: night indigo (the room scene's walls) */
  --art-linen-light: #403f58;    /* wall highlight: dusk; phone screen */
  --art-linen-deep: #161a29;     /* floor/table front */
  --art-mist-wall: #1b2e36;      /* wall: moonlit teal */
  --art-mist-light: #36535c;     /* wall highlight; laptop screen */
  --art-mist-deep: #13222a;      /* floor/table front */
  --art-blush-wall: #2b2034;     /* wall: aubergine dusk */
  --art-blush-light: #5c3e4e;    /* wall highlight */
  --art-blush-deep: #1d1625;     /* floor/table front */
  --art-oat-wall: #322a27;       /* wall: umber */
  --art-oat-light: #6b5440;      /* wall highlight */
  --art-oat-deep: #221c1b;       /* floor/table front; printer base */
  --art-oak: #8c6440;            /* walnut table and shelf tops */
  --art-oak-edge: #6a4a2f;       /* table and shelf edges, floor planks */
  --art-oak-dark: #523822;       /* shelf brackets, stands */
  --art-ink: #262a36;            /* dark props: pens, phone, frames, eyes */
  --art-blue: #7d9cc8;           /* blue props: books, sofa, pens, outlines */
  --art-clay: #d98f6c;           /* clay props: clips, cushions, pots */
  --art-pearl: #efe9df;          /* pearl props: planter, candle, cushions */
  --art-charcoal: #46454d;       /* charcoal props: crow, laptop, lamp */
  --art-shadow: #000;            /* contact shadows (with opacity) */
  --art-lantern-light: #ffe2a6;  /* light through the lit lantern */
  --art-paper-edge: #b9ab93;     /* paper card outlines */
  --art-box-edge: #9a7048;       /* parcel edges */
  --art-box: #c99a6a;            /* parcel */
  --art-mustard: #e2bd6a;        /* mustard props */
  --art-rug: #33405f;            /* rugs */
  --art-cushion: #c9b79c;        /* sofa back cushions */
  --art-blue-soft: #6f87ad;      /* globe lines, pictures */
  --art-graphite: #3a3b44;       /* laptop and keyboard bases */
  --art-tile-line: #4a4256;      /* balcony tile lines */
  --art-globe: #1d2c4c;          /* drawn globe: the night side */
  --art-button: #e5b862;         /* order button on the phone */
  --art-knob: #e9c77a;           /* door knob */
  --art-nameplate-edge: #b8ab95; /* name plate base */
  --art-soil: #4a3526;           /* planter soil */
  --art-water: #8fb0d8;          /* planter water window */
  --art-falcon-1: #d7bb93;       /* low-poly falcon facets */
  --art-falcon-2: #c3a37a;
  --art-falcon-3: #ad8d64;
  --art-falcon-4: #e6d1b0;
  --art-falcon-5: #9a7b55;
  --art-falcon-beak: #4a3a2a;    /* falcon beak */
  --art-vase: #d9b48f;           /* Dune Wave vase */
  --art-stem: #b8995e;           /* dried stems */
  --art-pod: #e4d3b0;            /* dried seed heads */
  --art-picture: #2d4470;        /* picture in the clip frame: a night view */
  --art-picture-hill: #5d79a8;   /* picture in the clip frame, hills */
  --art-dhow-post: #d8cbb4;      /* dhow bookend post */
  --art-dhow-hull: #ece3d2;      /* dhow bookend hull */
  --art-dhow-mast: #b9ab92;      /* dhow bookend mast */
  --art-book-pale: #ddd0b8;      /* pale book */
  --art-crow-tail: #24232a;      /* crow tail */
  --art-crow-outline: #15141a;   /* crow segment outlines */
  --art-crow-wing: #6d6b75;      /* crow wing line */
  --art-crow-beak: #5e5a55;      /* crow beak */
  --art-pencup: #d98f6c;         /* faceted pen cup */
  --art-stand: #e3d2b8;          /* phone stand */
  --art-phone-screen: #1c2a48;   /* phone screen */
  --art-phone-sun: #f3c47a;      /* moon on the phone screen */
  --art-honey-1: #e9e1d2;        /* honeycomb shelf cells */
  --art-honey-2: #d4c8b4;        /* honeycomb shelf cells, inner */
  --art-honey-3: #dfd5c4;        /* honeycomb shelf cells, back */
  --art-flame: #ffb54d;          /* candle flame */
  --art-pale-blue: #8ea4c6;      /* pale blue props */
  --art-window-sky: #1a2848;     /* window sky (planter scene): night */
  --art-window-hill: #34466c;    /* window hills (planter scene) */
  --art-sky-top: #15204a;        /* room scene sky, top: dusk */
  --art-sky-bottom: #d48a68;     /* room scene sky, bottom: the last of the sunset */
  --art-skyline: #1c2441;        /* room scene skyline */
  --art-board: #3c3326;          /* pin board */
  --art-lamp-beam: #ffe3a8;      /* desk lamp beam */
  --art-balcony-wall: #262839;   /* balcony scene wall */
  --art-balcony-light: #46507a;  /* balcony scene light */
  --art-skyline-2: #222c4a;      /* balcony skyline, near */
  --art-skyline-3: #2f3a5c;      /* balcony skyline, far */
  --art-terrace: #37303e;        /* balcony floor */
  --art-glow-soft: #ffd08a;      /* soft glow behind the step-2 lantern */
  --art-terracotta: #c0673f;     /* terracotta lantern (step 2) */
  --art-nozzle: #ffb36b;         /* printer nozzle light */
  --art-door: #2f4670;           /* front door */
  /* ---------- logo mark: a gold house, the egg dark inside it ---------- */
  --logo-house: #e5b862;
  --logo-egg: #0d1322;
  --logo-shine: #e5b862;

  /* ---------- SVG posters shown before each 3D scene (keep in step with theme.js) ---------- */
  --poster-globe-lit: #22345c;    /* globe: the moonlit side of the sea */
  --poster-globe-sea: #142039;
  --poster-globe-shade: #090f1d;
  --poster-globe-grid: #8f744a;   /* latitude/longitude lines */
  --poster-globe-land: #7a5e38;   /* land dots */
  --poster-globe-arc: #ecc068;    /* design arcs and the studio marker */
  --poster-globe-ring: #fff2d6;   /* ring around the studio marker */
  /* ---------- the drawn egg: a dark crow's egg with gold specks ---------- */
  --egg-shell-lit: #5a7b84;
  --egg-shell: #2d4651;
  --egg-shell-shade: #16232b;
  --egg-speck: #c99a4e;
  --egg-speck-dark: #0d151b;
  --egg-speck-deal: #f3cf7a;      /* bright gold specks when there's a deal */
  --egg-crack: #a07838;           /* the hairline crack: brass, brighter as it opens */
  /* ---------- souq map button (phones) ---------- */
  --mapfab-walk: #3a3224;
  --mapfab-ring: #f3eadb;         /* the stall or gate you're at */
  --mapfab-gate: #d9ab55;
  /* ---------- material guide (Sell page) ---------- */
  --mat-pla: #d8b47a;
  --mat-petg: #84a8d8;
  --mat-ring: #10172a;

  /* ---------- "See it in your room" viewer (shared/room-view) ---------- */
  --rv-bg: #0d1322; --rv-surface: #161d2d; --rv-text: #f3eadb; --rv-muted: #a9b1c1; --rv-line: #2c3446;
  --rv-accent: #e5b862; --rv-accent-text: #10172a; --rv-radius: 18px; --rv-font: var(--f-body); --rv-font-display: var(--f-display);
}
html[lang="ar"] {
  --f-body: "Readex Pro", "Jost", system-ui, sans-serif;
  --f-display: "El Messiri", "Readex Pro", system-ui, sans-serif;
  --w-display: 600;
  --lh-display: 1.4;
}

/* ======================================================================================================
   Restyle-only overrides. Colours, borders, shadows and decoration; no layout, nothing hidden or moved.
   ====================================================================================================== */

::selection { background: rgb(229 184 98 / .32); color: var(--ink); }

/* Warm light pooling on the raised surfaces, as if a lantern hangs just above each card. */
.card, .pc, .stall, .trust li, .buy__card, .specs dl, .note, .srow, .spotcard, .co__card {
  background-image: radial-gradient(130% 70% at 50% -12%, rgb(255 206 132 / .055), rgb(255 206 132 / 0) 62%);
}
.hdr.is-scrolled { box-shadow: 0 1px 0 rgb(var(--accent-shadow-rgb) / .13), 0 12px 26px -20px rgb(0 2 8 / .9); }
.tabbar { box-shadow: 0 -1px 0 rgb(var(--accent-shadow-rgb) / .12); }
.buybar { box-shadow: 0 -1px 0 rgb(var(--accent-shadow-rgb) / .14), 0 -10px 26px rgb(0 2 8 / .4); }

/* Eyebrows open with a small eight-point lantern star instead of a rule. */
.eyebrow::before, .eggd__kick::before {
  width: 11px; height: 11px; border-radius: 0;
  clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
}
.band .eyebrow::before { background: var(--on-dark-accent); }

/* The primary button presses into a deeper gold (the core uses the dark panel colour). */
.btn--primary:active { background: #c99a47; }

/* Toast: a raised dark plate with a brass edge (the core fills it with --ink, which is light here). */
.toast { background: #232a3b; color: var(--ink); box-shadow: 0 0 0 1px rgb(255 214 150 / .16), 0 24px 50px -16px rgb(0 2 8 / .9); }

/* Pressed shop chip: ivory, so its second line needs dark ink. */
.shopchip[aria-pressed="true"] small { color: #4a4f5c; }

/* "Start selling" band: light text on the deep indigo, a gold primary and an ivory outline button. */
.band { color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 232 196 / .08), 0 0 0 1px rgb(255 214 150 / .12); }
.band .btn--light { background: var(--accent-ink); color: var(--on-accent); box-shadow: 0 8px 20px -10px rgb(var(--accent-shadow-rgb) / .8); }
.band .btn--line { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgb(var(--light-rgb) / .38); }
.ex__item { color: var(--on-dark-figure); }
.ex__rows .is-earn { background: var(--accent-ink); }
.ex__rows .is-earn dt, .ex__rows .is-earn dd { color: var(--on-accent); }

/* Seller summary on the Sell page: light text on the deep panel. */
.sum { color: var(--ink); box-shadow: inset 0 1px 0 rgb(255 232 196 / .08), 0 0 0 1px rgb(255 214 150 / .14), 0 16px 36px -18px rgb(0 2 8 / .9); }

/* Room hotspots: small lanterns, gold with a dark heart, so they glow on the dusk and night rooms. */
.spot__dot { background: var(--accent-ink); box-shadow: 0 0 0 5px rgb(var(--accent-shadow-rgb) / .3), 0 4px 12px rgb(0 2 8 / .5); }
.spot__dot::after { background: var(--on-accent); }
.spot[aria-expanded="true"] .spot__dot::after { background: var(--ink); }
@keyframes breathe { 50% { box-shadow: 0 0 0 9px rgb(var(--accent-shadow-rgb) / .14), 0 4px 12px rgb(0 2 8 / .5); } }

/* The floating egg: a faint gold aura so the dark egg separates from the page. */
.eggdock__art { filter: drop-shadow(0 8px 12px rgb(0 2 8 / .55)) drop-shadow(0 0 10px rgb(229 184 98 / .22)); }

/* Swatch rings a little stronger, so the Charcoal filament stays outlined on the dark surfaces. */
.swatch__c, .opt__sw { box-shadow: inset 0 0 0 1px rgb(var(--ring-rgb) / .36); }
.bb-sw { box-shadow: inset 0 0 0 1px rgb(var(--ring-rgb) / .36), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--line-2); }

/* Materials: PLA keeps the brass chip, PETG gets a moonlit blue one (like its spool in the material guide). */
.mat--petg { background: #1e2a45; color: #b9d0f2; }
.mg__h--petg { background: #1b2640; }
.mg__h--petg span { color: #b9d0f2; }

/* The product viewer's dark stage gets a brass edge so it doesn't melt into the page. */
.v3d { box-shadow: inset 0 0 0 1px rgb(255 214 150 / .1); }

/* Search highlight on dark rows. */
.srow__name mark { background: var(--accent-soft-2); color: var(--accent-hover); }

@media (min-width: 1100px) {
  /* Desktop cart: a dark pill with a brass edge, so the gold stays for the primary action. */
  .hdr-cart { background: var(--bg-2); color: var(--ink); box-shadow: inset 0 0 0 1px rgb(var(--accent-shadow-rgb) / .38); }
  .hdr-cart .badge.is-zero { background: rgb(var(--light-rgb) / .12); color: var(--ink); }
}
@media (hover: hover) and (pointer: fine) {
  .band .btn--light:hover { background: var(--accent-hover); }
  .hdr-cart:hover { box-shadow: inset 0 0 0 1px rgb(var(--accent-shadow-rgb) / .7); }
  .chip[aria-pressed="true"]:hover, .shopchip[aria-pressed="true"]:hover { background: #e6dccb; }
  .pc:hover { box-shadow: var(--sh-2), 0 18px 40px -26px rgb(var(--accent-shadow-rgb) / .35); }
}