/* Design tokens — docs/design-01-illustrated-world.md §3.4.
   Nothing outside this file may use a raw hex value. The palette is the world's
   identity (§8.1) and a stray colour is how a second style starts. */

:root {
  /* base palette */
  --ink: #1F2C26;
  --ink-soft: #3A4B41;
  --canvas: #F6EFE1;
  --canvas-deep: #EDE3CE;
  --tile-teal: #1E7A72;
  --tile-teal-deep: #155A54;
  --tile-pink: #E38DA0;
  --gold: #C89A48;
  --clay: #B5583A;

  /* ---- illustration palette ----
     Sampled from the Koon Seng Rd references (docs/delivery-plan.md §3.2). The row is
     not pastel: it is saturated, every unit different, and each unit is a body/trim
     PAIR with the trim carried through cornice, pilasters, frames and shutters. The
     pairing is as much a recognition signature as the hues. */

  --facade-pink: #DE5B93;
  --facade-cream: #E4D7BB;
  --facade-lime: #C3D394;
  --facade-slate: #8A939A;
  --facade-clay: #D98D6B;
  --facade-cyan: #46BAD6;
  --facade-lilac: #C1ACD2;
  --facade-gold: #DFB055;

  --trim-cyan: #44C0D8;
  --trim-blue: #2C6FA6;
  --trim-cream: #F1EADA;
  --trim-white: #F7F4EA;
  --trim-brown: #6E4130;
  --trim-plum: #8E4666;

  /* The Red House, from the reference photographs. It is not a dark brick red — it is
     a warm CORAL, and the whole building wears it: walls, arches, pilasters, balusters,
     finials and the perforated screen, all one colour. That single-colour massing is
     the recognition anchor, more than any individual feature. */
  --facade-red: #DD5744;
  --facade-red-deep: #B8412F;
  --facade-red-shade: #9A3626;
  --trim-mint: #7FB7A6;

  /* Chin Mee Chin, from the reference photographs. The sky blue IS the recognition
     anchor — it is the first thing anyone describes about the building — and the sign
     red is the second. Both sampled from the photos rather than guessed. */
  --facade-sky: #86C9E0;
  --facade-sky-deep: #5FA8C4;
  --sign-red: #C9283C;

  /* shared architectural tones */
  --relief: #F4F0E4;          /* the white plaster relief, on every unit */
  --relief-shade: #CFC7B4;
  --roof-tile: #C4562F;
  --roof-tile-deep: #9E4223;
  --porch-dark: #2A332E;
  --glass: #46534E;
  --iron: #EFEADC;            /* the gates are white-painted ironwork */

  /* day is the DEFAULT variant: evening desaturates the recognition anchor
     (docs/delivery-plan.md §3.2). Evening stays a variant, not the front door. */
  --sky-high: #6FB4DA;
  --sky-mid: #A8D2E8;
  --sky-low: #DDEAEF;
  --cloud: #FBFAF5;
  /* THE WEATHER — cycle 23. Named tokens because code-quality forbids a raw hex in a
     rule, and named HERE because the rain is skin over the whole street rather than a
     part of any one scene's palette (design-05 §10.6: skin is derivable, structure is
     authored). Cool and desaturated: rain in Singapore darkens a street towards grey-green
     rather than towards blue, and a blue wash would read as a filter — which is the exact
     failure this cycle's risk list names first. */
  --rain-streak: rgba(233, 241, 244, .62);
  /* Round 4 — lighter, so that the storm's veil is the heavy one. A shower and a
     thunderstorm were separated by almost nothing before this. */
  --rain-veil: rgba(56, 72, 78, .18);
  --rain-sheen: rgba(214, 228, 232, .3);
  /* Review round 1 — four weathers rather than two. The storm is the rain's veil taken
     further and colder.

     THERE IS NO CLOUD VEIL, AND ITS ABSENCE IS ROUND 2. There was one — a flat grey that
     took the warmth out — and the human's verdict was *"I can't accept the cloudy version,
     it looks gloomy."* `cloudy` is the street as drawn now. The authored palette is already
     a mild, slightly hazy daylight, which is the same observation that made `clear` need a
     lift: this artwork's natural state IS an overcast Singapore afternoon, so painting one
     on top of it was painting it twice. */
  --storm-veil: rgba(38, 52, 62, .44);
  /* The flash. A raw rgba() in the rule was the first version and code-quality §5 forbids it
     for the reason it forbids every other one — a colour nobody can find from the palette. */
  --storm-flash: rgba(238, 244, 250, .26);

  /* THE SUN — round 2, and the human asked for it by name: "change the sunny same CSS but
     having a big sun in the sky."

     It is `--facade-gold` warmed and lifted rather than a new yellow, because this world has
     a gold already (§3.4's palette is the world's identity, and a stray colour is how a
     second style starts). Flat core, one soft halo, no rays: the art is flat vector with soft
     edges, and drawn rays would be the one element on the screen doing cartoon. */
  --sun-core: #FFE9A8;
  --sun-rim: #FFD265;
  --sun-halo: rgba(255, 214, 122, .34);

  /* THE INSIDE — cycle 24, drawn from the human's six photographs of Chin Mee Chin.
     design-06 §6.1: an interior is darker, warmer and lit from its openings rather than
     from the sky, so §3.4's daylight limewash palette cannot be used unchanged — it would
     read as a lit shopfront rather than as a room. RE-LIT, NOT RE-COLOURED: every value
     below is an existing token moved, not a new hue. The dado is `--relief` cooled, the
     batten is `--trim-brown`, the counter is `--trim-brown` deepened, and the floor's two
     tiles are `--canvas` and a green drawn off `--tile-teal`. The one genuinely new
     quantity is the depth wash, which is how a room gets further away.

     design-01 §8.1 is where the locked style parameters live and this block is the
     interior's entry in it.

     SOFTENED 2026-09-02 on the human's note — "can the colour / palette be softer?". Every
     value moved in one direction: the darks lifted (counter #4A2E22 -> #6E5040, batten
     #6E4130 -> #8C6553), the floor's green lightened (#7F8A6E -> #A3AC93), and the depth
     wash cut from .30 to .16. The hues did not move; the CONTRAST did. That is the same
     correction cycle 23 round 2 made to the weather veils, arriving indoors. */
  --room-wall: #F3EEE3;        /* plaster above the dado — canvas, a shade warmer */
  --room-wall-shade: #E6DDCC;
  --room-dado: #F0EDE5;        /* the patterned tile wainscot, to about 1.2m */
  --room-dado-mark: #CBC5B7;   /* its fine print, and the dark band at its head */
  --room-ceiling: #FAF7F0;     /* the coffered panels */
  --room-batten: #8C6553;      /* the timber grid over them — trim-brown exactly */
  --room-floor-a: #EEE9DA;     /* mosaic, the pale tile */
  --room-floor-b: #A3AC93;     /* mosaic, the green — off tile-teal, toward olive */
  --room-counter: #6E5040;     /* dark stained timber */
  --room-counter-lit: #8A6853;
  --room-depth: rgba(42, 51, 46, .16);  /* the wash that carries distance */
  --room-lamp: rgba(255, 226, 160, .26);/* fluorescent tube and pendant, not a glow */
  --room-table-edge: #C2836A;  /* the band round a marble top — --clay, lifted and softened */
  --paving: #DCD6C6;
  --paving-line: #C4BCA8;
  --kerb: #C9C2AE;
  --road-far: #6E6E68;
  --road-near: #5C5C57;

  /* The mount a record photograph sits on — cycle 12. Warm album paper, a shade off
     --canvas so a print reads as an object placed on the world rather than as part of it.
     A token rather than a hex in app.css because §8.1 is that the palette IS the world's
     identity, and the one place a stray colour starts is a surface nobody had a token for. */
  --print-paper: #EFE6D2;

  /* mkv's bubble — cycle 17. A token rather than a hex because §8.1 is that the palette IS
     the world's identity, and this one is used twice: the card, and the border-colour of
     the tail triangle that points out of it. Two copies of a colour are two things to
     forget to change together. */
  --companion-bg: color-mix(in srgb, var(--ink) 93%, transparent);

  /* Reveal mode. Deliberately NOT a scene colour: this dot is interface, and it has
     to read as sitting on top of the world rather than being part of it. */
  --reveal-dot: #E24B33;

  /* micro-motion — slow, ambient, never competing with a pulsing marker */
  --sway-duration: 7s;
  --drift-duration: 90s;

  /* content tiers — design-01 §6.1. Gold pulses; commercial never does. */
  --tier-social: var(--gold);
  --tier-heritage: var(--gold);
  --tier-foodie: var(--gold);
  --tier-civic: var(--gold);
  --tier-commercial: var(--tile-teal);

  /* type — design-01 §3.4 */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* geometry */
  --tap-min: 44px;            /* design-01 §9 — never smaller */
  --radius: 14px;
  --radius-sm: 8px;
  --pulse-budget: 3;          /* design-01 §6.2 — documented here, enforced in js */
  --slot-cap: 7;              /* design-01 §5.5 */
}


/* THE SECOND INSIDE — cycle 26, drawn from six photographs of Micro Red House's room.
   design-06 §6.1 makes the interior palette a design-01 §8.1 amendment; this is its second
   entry, and the shape of it is the cycle's own finding.

   THE ROLES ARE SHARED, THE VALUES ARE THE ROOM'S. Every --room-* token above is a ROLE —
   the wall, the ceiling's linework, the floor's two tiles, the counter and its lighter face
   — and a second room overrides the values under its own scene rather than inventing a
   second set of names. Twelve tokens per interior would be twelve times sixty at the world
   design-06 answer 1 now promises; a scoped override is twelve lines and the SVG that draws
   the room does not have to know which room it is.

   IT NEEDED NO JAVASCRIPT. `.scene-frame[data-scene-id]` has existed since cycle 3 and the
   layer SVGs are inlined into the document, so custom properties cascade into the artwork
   for free. That is criterion 2's ledger with one entry that cost nothing.

   TWO ROLES CARRY A DIFFERENT OBJECT HERE AND ARE DOCUMENTED RATHER THAN RENAMED:
   --room-batten is the ceiling's linework, timber battens at Chin Mee Chin and black steel
   track at the Red House; --room-counter / --room-counter-lit are the counter's darker and
   lighter faces, dark stained timber over a lit front there and a wooden top over pale
   brick here. Renaming them would have edited a room that is signed off. */
.scene-frame[data-scene-id="red-house-inside"] {
  --room-wall: #F7F5F1;        /* white-painted brick, cooler than Chin Mee Chin's plaster */
  --room-wall-shade: #E4E0D8;
  --room-dado: #F7F5F1;        /* no dado here — the brick runs to the floor */
  --room-dado-mark: #D8D2C6;   /* the courses showing through the paint */
  --room-ceiling: #FBFAF7;
  --room-batten: #3A3A38;      /* black steel track, where Chin Mee Chin has timber */
  --room-floor-a: #F0E7D5;     /* encaustic cement tile, the cream */
  --room-floor-b: #B4563A;     /* and the terracotta — off --roof-tile-deep, lifted */
  --room-counter: #A98B63;     /* the counter's wooden top */
  --room-counter-lit: #F7F5F1; /* WHITE brick, not cream — the human, draw 5 */
  --room-table-edge: #CFC7B4;  /* pale marble, not Chin Mee Chin's warm band */
}