:root{
  /* ---- Brand base (client-supplied) ---- */
  --twilight-indigo:#243279;
  --camel:#b89358;
  --pale-oak:#d6c1a3;
  --white:#ffffff;
  --black:#000000;

  /* ---- Ember ramp ----
     The heart of the palette. Lamplight, tea, copper, brick — the range the
     illustrations actually live in. Reach here first. */
  --ember-900:#4a2413;
  --ember-800:#6b3418;
  --ember-700:#8f4a20;
  --ember-600:#b4622a;
  --ember-500:#d1502a;
  --ember-400:#dd9348;
  --ember-300:#f0a94a;
  --ember-200:#f2c78a;
  --ember-100:#f7dfbc;
  --ember-50:#fdf3e4;

  /* ---- Camel ramp (gold leaf, calligraphy, the sacred register) ---- */
  --camel-800:#5f4a29;
  --camel-700:#7d6338;
  --camel-600:#9a7a46;
  --camel-500:#b89358;
  --camel-400:#c8a97a;
  --camel-300:#d6c1a3;
  --camel-200:#e6d8c3;
  --camel-100:#f2eadd;
  --camel-50:#faf6ef;

  /* ---- Indigo ramp — night, distance, interaction. A supporting voice: it barely
     appears in the artwork, so it should not dominate anything built beside it. ---- */
  --indigo-900:#0b1130;
  --indigo-800:#131b47;
  --indigo-700:#1b2560;
  --indigo-600:#243279;
  --indigo-500:#33438f;
  --indigo-400:#4d5ba7;
  --indigo-300:#7b86c2;
  --indigo-200:#b2b9dd;
  --indigo-100:#dee1f0;
  --indigo-50:#f1f2f9;

  /* ---- Warm neutrals (paper, dust, soot). Nothing here is blue-grey. ---- */
  --ink-900:#181209;
  --ink-800:#2a2114;
  --ink-700:#463928;
  --ink-600:#65563f;
  --ink-500:#6d5f49;
  --ink-400:#ab9c83;   /* borders, dividers, decorative only — fails AA as text */
  --ink-300:#cdc0a8;
  --ink-200:#e5dac4;
  --ink-100:#f2ebdd;
  --ink-50:#faf5ea;

  /* ---- Semantic status (earthy — never a bright UI green/red) ---- */
  --status-success:#5b7245;
  --status-warning:#a9761f;
  --status-danger:#a33a22;
  --status-info:var(--indigo-500);

  /* ---- Semantic surfaces ----
     NIGHT IS THE DEFAULT. A story is told in a dark room: the paintings are lamplit
     scenes, and a bright page bleaches the light out of them. Light surfaces still
     exist — forms, documents, the booklet — but they are the exception, named
     explicitly, never assumed. */
  --surface-page:#14120c;           /* the dark room — body default */
  --surface-deeper:#0c0b07;         /* recessed, behind the scene */
  --surface-night:#1f1c15;          /* the poster ground */
  --surface-raised:#241f16;         /* a panel lifted out of the dark */
  --surface-deep:var(--indigo-900); /* the cold night, for distance */

  /* Light surfaces — opt in by name */
  --surface-paper:#fdf7ec;
  --surface-card:#fffefa;
  --surface-sunken:#f7eddc;
  --surface-warm:#f7dfbc;
  --surface-gold:var(--camel-500);
  --surface-gold-soft:var(--camel-100);

  /* ---- Semantic text ----
     Defaults are for the dark room. The --on-paper-* set is for light surfaces. */
  --text-body:#e8e0d0;              /* 12.6:1 on --surface-page */
  --text-strong:#fdf6e6;            /* 15.3:1 */
  --text-muted:#b0a48c;             /* 6.7:1 */
  --text-faint:#8d8371;             /* 4.6:1 — the floor; nothing lighter carries text */
  --text-accent:var(--ember-300);   /* lamplight — the only colour text on night */
  --text-link:var(--ember-300);
  --text-link-hover:var(--ember-200);

  /* On light surfaces */
  --text-on-paper:var(--ink-800);
  --text-on-paper-strong:var(--ink-900);
  --text-on-paper-muted:var(--ink-600);   /* 5.50:1 on --surface-warm */
  --text-on-paper-faint:var(--ink-500);   /* 4.80:1 on --surface-warm */
  --text-on-paper-accent:var(--ember-700);
  --text-on-gold:var(--ink-900);
  --text-on-deep:#f4f0e6;
  --text-on-deep-muted:#b8ad97;

  /* ---- Borders & lines ----
     On night, a line is light at very low opacity — never a solid grey rule. */
  --border-hairline:rgba(232,220,192,.13);
  --border-strong:rgba(232,220,192,.26);
  --border-gold:rgba(240,169,74,.45);
  --border-on-paper:#e5dac4;
  --border-on-paper-strong:#cdc0a8;
  --border-on-deep:rgba(214,193,163,.28);

  /* ============================================================
     LIGHT — the atmospheric layer.
     The illustrations are lit by one warm source. Reach for a bloom before you
     reach for a shadow: depth on this brand comes from glow, not a drop shadow.
     ============================================================ */

  /* Bloom: light spilling OUT of an image, off its edges */
  --bloom-sm:0 0 40px -8px rgba(240,169,74,.28);
  --bloom-md:0 0 90px -16px rgba(240,169,74,.36);
  --bloom-lg:0 0 170px -30px rgba(240,169,74,.44);
  --bloom-ember:0 0 120px -20px rgba(209,80,42,.34);
  --bloom-cool:0 0 110px -22px rgba(143,169,189,.3);

  /* Haze: the warm air a section sits in */
  --haze-dawn:radial-gradient(120% 90% at 50% 0%,#fff6e4 0%,#fdf7ec 46%,#f7eddc 100%); /* @kind color */
  --haze-lamp:radial-gradient(90% 70% at 50% 30%,rgba(255,199,109,.3) 0%,rgba(255,170,70,.1) 45%,rgba(253,247,236,0) 78%); /* @kind color */
  --haze-dusk:radial-gradient(110% 80% at 50% 100%,#3a2a17 0%,#241d12 52%,#1f1c15 100%); /* @kind color */
  --haze-ember:radial-gradient(80% 60% at 50% 100%,rgba(209,80,42,.22) 0%,rgba(31,28,21,0) 70%); /* @kind color */

  /* Veil: what makes type legible over artwork. ALWAYS warm — a neutral grey
     scrim drains the lamplight out of the picture underneath it. */
  --veil-up:linear-gradient(to top,rgba(24,18,9,.86) 0%,rgba(24,18,9,.42) 34%,rgba(24,18,9,0) 72%); /* @kind color */
  --veil-down:linear-gradient(to bottom,rgba(24,18,9,.78) 0%,rgba(24,18,9,0) 60%); /* @kind color */
  --veil-side:linear-gradient(to left,rgba(24,18,9,.8) 0%,rgba(24,18,9,.3) 44%,rgba(24,18,9,0) 78%); /* @kind color */
  --veil-flat:rgba(24,18,9,.42);
  --vignette:radial-gradient(120% 100% at 50% 45%,rgba(24,18,9,0) 52%,rgba(24,18,9,.34) 100%); /* @kind color */

  /* Overlays */
  --overlay-scrim:rgba(24,18,9,.66);
  --overlay-protect:var(--veil-up);

  /* ---- The curtain ----
     پرده‌خوانی means "curtain reading": the storyteller draws a cloth aside to show
     the next scene. That ritual IS this system's reveal. A scene arrives by the
     curtain opening from the centre, never by a fade-in or a slide-up.
     Use with --duration-curtain and --ease-curtain from layout.css. */
  --curtain-closed:inset(0 50% 0 50%); /* @kind other */
  --curtain-open:inset(0 0 0 0); /* @kind other */
  --curtain-cloth:linear-gradient(100deg,rgba(31,28,21,.96) 0%,rgba(58,42,23,.9) 48%,rgba(31,28,21,.96) 100%); /* @kind color */

  /* Grain is NOT used — the paint already carries texture; an overlay muddies it. */

  /* ============================================================
     POSTER — colours transcribed from the supplied sheets (assets/comics/).
     Geometry for these lives in layout.css.
     ============================================================ */
  --poster-ground:#1f1c15;          /* Persian / Arabic editions — warm near-black */
  --poster-ground-olive:#221f14;    /* Latin editions — a shade greener */
  --poster-title-gold:#f0a92a;
  --poster-title-tan:#d9b877;
  --poster-rule:#f0a92a;
  --poster-text:#e6e2d6;
  --poster-text-muted:#a89f8b;
  --poster-matte:#c9bb92;           /* the ayah bar — muted khaki, not bright */
  --poster-matte-soft:#e8dcc0;
  --poster-hairline:rgba(232,220,192,.55);

  /* Speech-bubble fills, lifted off the sheets. Light fills take ink; the loud
     ones (brick, red, moss, steel, ochre) take cream. */
  --bubble-cream:#e8dcc0;
  --bubble-tan:#d9b98f;
  --bubble-sand:#cbab7e;
  --bubble-amber:#f0a94a;
  --bubble-ochre:#dd9348;
  --bubble-brick:#d1502a;
  --bubble-red:#c33a1e;
  --bubble-slate:#8fa9bd;
  --bubble-steel:#6f8aa3;
  --bubble-olive:#9aa176;
  --bubble-moss:#6f7f56;
  --bubble-clay:#c08a76;
  --bubble-ink:#241f16;
  --bubble-on-loud:#fdf6e6;

  /* Lamplight — for a surface that should feel lit rather than raised */
  --lamp-core:#ffd489;
  --lamp-glow:radial-gradient(ellipse at 50% 40%,rgba(255,199,109,.34) 0%,rgba(255,170,70,.14) 42%,rgba(31,28,21,0) 74%); /* @kind color */
  --lamp-wash:linear-gradient(to top,rgba(255,183,84,.14),rgba(31,28,21,0) 60%); /* @kind color */

  /* Key-art / cover surface (assets/posters/) */
  --parchment:#f4e0c3;
  --parchment-light:#f1dec0;
  --parchment-warm:#e7ca9d;
  --parchment-glow:#f7e1a5;
  --parchment-ink:#4a3520;
  --parchment-ink-soft:#6b5236;
  --parchment-rule:#c9a86f;
}

/* ---- Base element reset. Lives here so the whole system reaches consumers
     within the import budget; keep it last in this file. ---- */
html{-webkit-text-size-adjust:100%}
body{margin:0;direction:rtl;background:var(--surface-page);color:var(--text-body);font:var(--type-body);font-feature-settings:"ss01","kern";text-wrap:pretty;-webkit-font-smoothing:antialiased}
::selection{background:var(--ember-500);color:#fdf6e6}
h1,h2,h3,h4,p,figure{margin:0}
img{max-width:100%}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring)}