/* Hill City Express, Christmas edition. Candlelight: colors, type, light and the drawing's palette.

   A Christmas card in red velvet and gold. Two looks, one card:
   - Evening (sunset to sunrise in Gillette): the page is wine velvet lit by candles. A warm glow
     falls from the top, a few gold lights sit out of focus behind the bar, cards are a shade lighter
     velvet with a gold-leaf edge, titles are champagne gold, words are candlelit cream, and the
     main button is a gold foil seal.
   - Day: the same card printed on warm cream stock. Titles in holly green, the italic in claret,
     words in espresso ink, gold hairlines, and the main button in cranberry velvet with a gold foil
     edge.
   Holly green is the small third color: done marks, the focus ring by day, the pines and the
   people's marks. Akshay's notes are the one paper object: cream card stock and navy ink in both
   looks, closed with a red wax seal.

   The accent is gold in the evening and cranberry by day: the main button, the picked option, the
   current step, the train in the timeline, the progress bar and the active tab. Pills, labels and
   status never wear it.

   :root and [data-look="evening"] hold the evening look (the first paint after sunset);
   [data-look="day"] redefines the colors for daylight. Type, shape and spacing are shared.
   The old token names stay defined at the end, mapped onto these roles.

   Type: Playfair Display (the card's display serif; its italic carries the special moments),
   Figtree (the interface: warm, round, effortless at phone sizes), Kalam (Akshay's hand, with
   Devanagari for his Marathi words). All three are SIL Open Font License 1.1; see fonts/LICENSE-*. */

/* ---------- Fonts: self-hosted latin subsets; Kalam also carries Devanagari ---------- */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/playfair-display-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-display-latin-wght-italic.woff2") format("woff2-variations"), url("fonts/playfair-display-latin-wght-italic.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/figtree-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/kalam-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/kalam-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/kalam-devanagari-400-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Kalam"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/kalam-devanagari-700-normal.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* ---------- Shared by both looks ---------- */
:root {
  --font-display: "Playfair Display", "Iowan Old Style", Didot, Georgia, serif;
  --font-ui: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-hand: "Kalam", "Segoe Print", "Bradley Hand", cursive;

  --r-s: 10px;
  --r-m: 14px;
  --r-l: 22px;
  --r-xl: 30px;
  --tap: 48px;

  --gutter: 20px;
  --col: 680px;
  --bar-h: 60px;
  --tabbar-h: 64px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Akshay's notes: cream card stock and navy ink, the same in both looks */
  --note-paper: #FBF2E1;
  --note-ink: #1D2E5C;
  --note-ink-2: #4A5470;
  --note-line: rgba(160, 112, 40, .3);
  /* the focus ring on Akshay's paper, in either look (gold would vanish on cream) */
  --note-focus: #23553D;
  /* card stock: a faint grain, on Akshay's paper only */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .29 0 0 0 0 .14 0 0 0 .154 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Holly: the small third color, the same on every cream tile */
  --holly: #1E5B3E;

  /* Christmas lights: the bulbs are the same in both looks; only their glow changes */
  --bulb-red: #E8434F;
  --bulb-amber: #FFB547;
  --bulb-gold: #FFE2A0;
  --bulb-green: #4FB173;

  /* the glow of the string of lights along the app bar (its bulbs are --bar-lights in each look) */
  --bar-glow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='22' viewBox='0 0 148 22'%3E%3Cdefs%3E%3CradialGradient id='g0'%3E%3Cstop offset='0' stop-color='%23E8434F' stop-opacity='.62'/%3E%3Cstop offset='.45' stop-color='%23E8434F' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23E8434F' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g1'%3E%3Cstop offset='0' stop-color='%23F6C54E' stop-opacity='.62'/%3E%3Cstop offset='.45' stop-color='%23F6C54E' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23F6C54E' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g2'%3E%3Cstop offset='0' stop-color='%234FB173' stop-opacity='.62'/%3E%3Cstop offset='.45' stop-color='%234FB173' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%234FB173' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='g3'%3E%3Cstop offset='0' stop-color='%23FFB547' stop-opacity='.62'/%3E%3Cstop offset='.45' stop-color='%23FFB547' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23FFB547' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='18.5' cy='10.4' r='11.5' fill='url(%23g0)'/%3E%3Ccircle cx='55.5' cy='13.2' r='11.5' fill='url(%23g1)'/%3E%3Ccircle cx='92.5' cy='13.2' r='11.5' fill='url(%23g2)'/%3E%3Ccircle cx='129.5' cy='10.4' r='11.5' fill='url(%23g3)'/%3E%3C/svg%3E");

  /* Small drawings used as masks, so they take any color */
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}

/* ---------- Evening: wine velvet by candlelight ---------- */
:root,
[data-look="evening"] {
  color-scheme: dark;
  --bg: #2E0A13;
  --bg-elev: #3E111C;
  --surface: #40121D;
  --surface-2: #52192A;
  --text: #FCEFDF;
  --text-2: #E8CBBB;
  --text-3: #CDA394;
  --line: rgba(240, 196, 140, .15);
  --accent: #E9BE6E;
  --accent-press: #CC9C4C;
  --accent-ring: #EDC679;
  --accent-soft: rgba(233, 190, 110, .12);
  --on-accent: #3A0B15;
  --gold: #E2B66A;
  --gold-ink: #F2CF8A;
  --good: #9FD3A7;
  --wait: #F3C673;
  --focus: #F7D78F;
  /* a destructive action is never dressed as the festive main action */
  --danger: #E86A76;
  --on-danger: #2E0A13;
  --shadow-1: 0 1px 2px rgba(12, 0, 3, .4), 0 8px 22px -10px rgba(12, 0, 3, .7);
  --shadow-2: 0 2px 6px rgba(12, 0, 3, .42), 0 28px 54px -20px rgba(8, 0, 2, .85);
  --ticket-shadow: drop-shadow(0 1px 1px rgba(10, 0, 3, .4)) drop-shadow(0 18px 26px rgba(10, 0, 3, .5));

  /* Titles: champagne gold leaf with a little candle glow; the italic moments a warmer gold */
  --heading: #F3D79E;
  --heading-glow: 0 0 26px rgba(255, 176, 92, .3);
  --flourish: #F0C982;

  /* private to ui.css */
  --edge: rgba(255, 210, 150, .1);
  --edge-strong: rgba(255, 210, 150, .22);
  --glass: rgba(46, 10, 19, .84);
  --tile: #F7E6C9;
  --tile-glow: 0 0 0 1px rgba(255, 214, 150, .35), 0 0 24px -4px rgba(255, 180, 96, .5);
  --scrim: rgba(18, 2, 6, .64);
  --step-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E0A13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  /* the light in the room: a candle glow from above and a few gold lights out of focus, behind the
     bar or out at the very edges, never under a word. Gradients only, nothing blurred, all of it gone
     by 230 px so the snow drift of a hero and every dot painted in --bg still meet the page exactly. */
  --page-light:
    radial-gradient(ellipse 82% 300px at 50% 0, rgba(206, 84, 70, .26), rgba(206, 84, 70, 0) 74%),
    radial-gradient(circle 28px at calc(100% - 22px) 34px, rgba(255, 196, 112, .22), rgba(255, 196, 112, .11) 64%, rgba(255, 196, 112, 0) 100%),
    radial-gradient(circle 10px at calc(100% - 70px) 13px, rgba(255, 222, 150, .26), rgba(255, 222, 150, 0) 100%),
    radial-gradient(circle 20px at 16px 26px, rgba(255, 214, 140, .15), rgba(255, 214, 140, .07) 62%, rgba(255, 214, 140, 0) 100%),
    radial-gradient(circle 9px at 70px 9px, rgba(255, 186, 104, .22), rgba(255, 186, 104, 0) 100%);
  /* the string of lights along the top of the app bar, and over the next step's picture band */
  --bar-lights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='22' viewBox='0 0 148 22'%3E%3Cpath d='M0 1.2 Q74 12.2 148 1.2' fill='none' stroke='%231A070C' stroke-width='.9'/%3E%3Cg transform='translate(18.5 3.6) rotate(-6) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23E8434F'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(55.5 6.4) rotate(4) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23F6C54E'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(92.5 6.4) rotate(-4) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%234FB173'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(129.5 3.6) rotate(6) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23FFB547'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3C/svg%3E");
  --lights-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='36' viewBox='0 0 160 36'%3E%3Cdefs%3E%3CradialGradient id='b0'%3E%3Cstop offset='0' stop-color='%23E8434F' stop-opacity='0.95'/%3E%3Cstop offset='.4' stop-color='%23E8434F' stop-opacity='0.33'/%3E%3Cstop offset='1' stop-color='%23E8434F' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b1'%3E%3Cstop offset='0' stop-color='%23FFB547' stop-opacity='0.95'/%3E%3Cstop offset='.4' stop-color='%23FFB547' stop-opacity='0.33'/%3E%3Cstop offset='1' stop-color='%23FFB547' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b2'%3E%3Cstop offset='0' stop-color='%234FB173' stop-opacity='0.95'/%3E%3Cstop offset='.4' stop-color='%234FB173' stop-opacity='0.33'/%3E%3Cstop offset='1' stop-color='%234FB173' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b3'%3E%3Cstop offset='0' stop-color='%23FFE2A0' stop-opacity='0.95'/%3E%3Cstop offset='.4' stop-color='%23FFE2A0' stop-opacity='0.33'/%3E%3Cstop offset='1' stop-color='%23FFE2A0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='14.940000000000001' r='15' fill='url(%23b0)'/%3E%3Ccircle cx='60' cy='19.439999999999998' r='15' fill='url(%23b1)'/%3E%3Ccircle cx='100' cy='19.439999999999998' r='15' fill='url(%23b2)'/%3E%3Ccircle cx='140' cy='14.940000000000001' r='15' fill='url(%23b3)'/%3E%3Cpath d='M0 3 Q80 21 160 3' fill='none' stroke='%2312040A' stroke-width='1'/%3E%3Cg transform='translate(20 6.54) rotate(-5) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23E8434F'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(60 11.04) rotate(3) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23FFB547'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(100 11.04) rotate(-3) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%234FB173'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(140 6.54) rotate(5) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23FFE2A0'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3C/svg%3E");
  /* cards: a little light on the top of the pile */
  --sheen: linear-gradient(180deg, rgba(255, 222, 184, .06), rgba(255, 222, 184, 0) 44%);
  /* the main button: gold foil, lit */
  --btn-fill: linear-gradient(180deg, #F7DD9E 0%, #EBC173 46%, #D4A14D 100%);
  --btn-finish: inset 0 1px 0 rgba(255, 250, 232, .75), inset 0 -1px 0 rgba(110, 62, 8, .35), 0 0 0 1px rgba(255, 214, 140, .28), 0 12px 30px -12px rgba(244, 172, 72, .72), 0 0 46px -16px rgba(255, 196, 110, .62);
  --accent-glow: 0 0 22px -4px rgba(240, 184, 96, .55);
  --tab-glow: 0 0 6px rgba(240, 184, 96, .6);
  /* how brightly the string of lights along the app bar glows, and whether lights breathe and twinkle */
  --string-glow: 1;
  --art-twinkle: running;
  /* the picked segment (the day you are on): a lighter velvet at night */
  --seg-on: var(--surface-2);

  /* The drawing: a plum-wine night over the Black Hills, gold stars, the real moon, lit windows */
  --art-sky-1: #1C0611;
  --art-sky-2: #3A0F22;
  --art-sky-3: #6A2433;
  --art-glow: #FFB070;
  --art-glow-op: .2;
  --art-sun: #FFFCF4;
  --art-sun-op: 0;
  --art-moon: #FBEBCB;
  --art-moon-dark: #3D1428;
  --art-moon-halo: #F2C17A;
  --art-moon-op: 1;
  --art-star-op: 1;
  --art-ridge-far: #4C1A2C;
  --art-ridge: #3A1324;
  --art-ridge-pine: #2A0D1A;
  --art-shelf: #6E3844;
  --art-shelf-pine: #142118;
  --art-cap: #F6DCCB;
  --art-cap-op: .62;
  --art-near-cap-op: .8;
  --art-snow: #643140;
  --art-snow-shade: #43192A;
  --art-near: #0F1D16;
  --art-rail: #1C0710;
  --art-loco: #13090C;
  --art-loco-hi: #3C2A2E;
  --art-brass: #D9A85A;
  --art-lamp: #FFE2A0;
  --art-coach: #B92B40;
  --art-coach-dark: #6E1424;
  --art-roof: #150A0D;
  --art-stripe: #E3B862;
  --art-window: #FFD27F;
  --art-steam: #E8CFC4;
  --art-steam-op: .5;
  --art-cabin: #6A2A22;
  --art-cabin-dark: #3A1712;
  --art-cabin-window: #FFC86E;
  --art-smoke: #B9928C;
  --art-lit-op: 1;
  --art-flake-op: .9;
  --art-wire: #12040A;
  --art-bulb-glow: #FFC57A;
  --art-bulb-glow-op: 1;
  /* Brex's bell on the gold button: a claret bell */
  --art-bell: #8E1B2E;
  --art-bell-edge: #5A0F1E;
}

/* ---------- Day: the card printed on warm cream stock ---------- */
[data-look="day"] {
  color-scheme: light;
  --bg: #F8EEDC;
  --bg-elev: #FFFAF1;
  --surface: #FFFAF1;
  --surface-2: #F3E4CC;
  --text: #2B1715;
  --text-2: #5F4640;
  --text-3: #75574F;
  --line: #EADAC1;
  --accent: #A51C34;
  --accent-press: #85132A;
  --accent-ring: #A51C34;
  --accent-soft: rgba(165, 28, 52, .07);
  --on-accent: #FFF7EA;
  --gold: #C39548;
  --gold-ink: #7A4F0C;
  --good: #29633F;
  --wait: #7A4F0C;
  --focus: #1E6B47;
  --danger: #A51C34;
  --on-danger: #FFF7EA;
  --shadow-1: 0 1px 1px rgba(96, 46, 20, .05), 0 4px 14px -6px rgba(96, 46, 20, .18);
  --shadow-2: 0 1px 2px rgba(96, 46, 20, .06), 0 20px 42px -18px rgba(96, 46, 20, .34);
  --ticket-shadow: drop-shadow(0 1px 1px rgba(96, 46, 20, .08)) drop-shadow(0 12px 18px rgba(96, 46, 20, .13));

  /* holly titles and a claret italic: the day card is red and green, and the cranberry button is the
     only bright red on it */
  --heading: #1E4A34;
  --heading-glow: none;
  --flourish: #8E1B2E;
  /* the gold bulb, deepened so it reads on cream stock */
  --bulb-gold: #F6C54E;

  --edge: rgba(130, 76, 30, .1);
  --edge-strong: rgba(130, 76, 30, .2);
  --glass: rgba(248, 238, 220, .86);
  --tile: #F7E9D3;
  --tile-glow: 0 0 0 1px rgba(195, 149, 72, .32);
  --scrim: rgba(43, 18, 14, .36);
  --step-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8EEDC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  /* morning light through a window: a warm wash from above and the sun's glow in the corner */
  --page-light:
    radial-gradient(ellipse 84% 300px at 50% 0, rgba(255, 204, 138, .44), rgba(255, 204, 138, 0) 74%),
    radial-gradient(circle 160px at 100% 0, rgba(255, 188, 116, .24), rgba(255, 188, 116, 0) 72%);
  --bar-lights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='148' height='22' viewBox='0 0 148 22'%3E%3Cpath d='M0 1.2 Q74 12.2 148 1.2' fill='none' stroke='%235A4232' stroke-width='.9'/%3E%3Cg transform='translate(18.5 3.6) rotate(-6) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23E8434F'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(55.5 6.4) rotate(4) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23F6C54E'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(92.5 6.4) rotate(-4) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%234FB173'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(129.5 3.6) rotate(6) scale(0.68)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23FFB547'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3C/svg%3E");
  --lights-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='36' viewBox='0 0 160 36'%3E%3Cdefs%3E%3CradialGradient id='b0'%3E%3Cstop offset='0' stop-color='%23E8434F' stop-opacity='0.55'/%3E%3Cstop offset='.4' stop-color='%23E8434F' stop-opacity='0.19'/%3E%3Cstop offset='1' stop-color='%23E8434F' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b1'%3E%3Cstop offset='0' stop-color='%23FFB547' stop-opacity='0.55'/%3E%3Cstop offset='.4' stop-color='%23FFB547' stop-opacity='0.19'/%3E%3Cstop offset='1' stop-color='%23FFB547' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b2'%3E%3Cstop offset='0' stop-color='%234FB173' stop-opacity='0.55'/%3E%3Cstop offset='.4' stop-color='%234FB173' stop-opacity='0.19'/%3E%3Cstop offset='1' stop-color='%234FB173' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b3'%3E%3Cstop offset='0' stop-color='%23FFE2A0' stop-opacity='0.55'/%3E%3Cstop offset='.4' stop-color='%23FFE2A0' stop-opacity='0.19'/%3E%3Cstop offset='1' stop-color='%23FFE2A0' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='14.940000000000001' r='15' fill='url(%23b0)'/%3E%3Ccircle cx='60' cy='19.439999999999998' r='15' fill='url(%23b1)'/%3E%3Ccircle cx='100' cy='19.439999999999998' r='15' fill='url(%23b2)'/%3E%3Ccircle cx='140' cy='14.940000000000001' r='15' fill='url(%23b3)'/%3E%3Cpath d='M0 3 Q80 21 160 3' fill='none' stroke='%234A3326' stroke-width='1'/%3E%3Cg transform='translate(20 6.54) rotate(-5) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23E8434F'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(60 11.04) rotate(3) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23FFB547'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(100 11.04) rotate(-3) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%234FB173'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3Cg transform='translate(140 6.54) rotate(5) scale(0.82)'%3E%3Crect x='-2.6' y='.2' width='5.2' height='4.8' rx='.9' fill='%232C5A40'/%3E%3Cpath d='M-2.6 4.4 C-4.9 6.2 -4.9 10.2 -2.2 13.6 C-1.2 14.9 -.5 15.9 0 16.8 C.5 15.9 1.2 14.9 2.2 13.6 C4.9 10.2 4.9 6.2 2.6 4.4 Z' fill='%23FFE2A0'/%3E%3Cellipse cx='-1.3' cy='8.4' rx='.9' ry='2.2' fill='%23fff' fill-opacity='.62'/%3E%3C/g%3E%3C/svg%3E");
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 40%);
  --btn-fill: linear-gradient(180deg, #BD2B42 0%, #A51C34 50%, #8D152B 100%);
  --btn-finish: inset 0 1px 0 rgba(255, 206, 196, .42), inset 0 0 0 1px rgba(236, 190, 116, .38), 0 10px 24px -12px rgba(150, 20, 45, .75);
  --accent-glow: 0 0 0 0 transparent;
  --tab-glow: 0 0 0 transparent;
  --string-glow: .6;
  --art-twinkle: paused;

  /* The drawing: a clear winter morning, warm and low: apricot sky, rosy hills, cream snow,
     a red cabin with lit windows and the Holiday Express in cranberry */
  --art-sky-1: #ECC6B0;
  --art-sky-2: #F6DCC4;
  --art-sky-3: #FCEFDA;
  --art-glow: #FFE3AA;
  --art-glow-op: .95;
  --art-sun: #FFF8E4;
  --art-sun-op: 1;
  --art-moon: #FFFFFF;
  --art-moon-dark: #F6DCC4;
  --art-moon-halo: #FFFFFF;
  --art-moon-op: 0;
  --art-star-op: 0;
  --art-ridge-far: #E6C6B6;
  --art-ridge: #D1AC9C;
  --art-ridge-pine: #B78F81;
  --art-shelf: #FBF2E6;
  --art-shelf-pine: #2D5E45;
  --art-cap: #FFFBF4;
  --art-cap-op: 1;
  --art-near-cap-op: 1;
  --art-snow: #FFF8EE;
  --art-snow-shade: #F0DDC9;
  --art-near: #1F4A35;
  --art-rail: #8A6E62;
  --art-loco: #241A18;
  --art-loco-hi: #4A3A35;
  --art-brass: #C9973F;
  --art-lamp: #FFD27A;
  --art-coach: #A51C34;
  --art-coach-dark: #741326;
  --art-roof: #2B201D;
  --art-stripe: #E3BC6C;
  --art-window: #FFDDA0;
  --art-steam: #FFFFFF;
  --art-steam-op: .95;
  --art-cabin: #9E2F2A;
  --art-cabin-dark: #5E211C;
  --art-cabin-window: #FFD48A;
  --art-smoke: #FFFFFF;
  --art-lit-op: .3;
  --art-flake-op: 0;
  --art-wire: #4A3326;
  --art-bulb-glow: #FFB860;
  --art-bulb-glow-op: .55;
  --art-bell: #C8963F;
  --art-bell-edge: #6E4A12;
}

/* ---------- Old names, mapped onto Candlelight ----------
   For markup that still uses them. Paper objects become Candlelight cards (warm white by day,
   velvet at dusk) with the look's own ink; the old golds become gold ink that reads on both
   grounds. Declared on every [data-look] so a nested look recomputes them. */
:root,
[data-look] {
  --ground: var(--bg);
  --ground-raised: var(--surface);
  --text-muted: var(--text-2);
  --rule: var(--line);
  --rule-soft: var(--edge-strong);
  --paper: var(--surface);
  --paper-shade: var(--surface-2);
  --paper-rule: var(--line);
  --ink: var(--text);
  --ink-muted: var(--text-2);
  --spruce: var(--tile);
  --spruce-deep: var(--tile);
  --spruce-light: var(--gold);
  --on-spruce: var(--holly);
  --on-spruce-muted: var(--text-2);
  --cranberry: var(--accent);
  --cranberry-deep: var(--accent-press);
  --berry-light: var(--accent);
  --gold-light: var(--gold-ink);
  --gold-deep: var(--gold-ink);
  --marigold: var(--gold);
  --marigold-light: var(--gold-ink);
  --marigold-deep: var(--gold-ink);
  --glow: var(--gold-ink);
  --wood: var(--surface-2);
  --wood-light: var(--surface-2);
  --done: var(--good);
  --halo: var(--shadow-2);
  --foil: linear-gradient(var(--gold), var(--gold));
  --display: var(--font-display);
  --face: var(--font-ui);
  --hand: var(--font-hand);
  --r-window: var(--r-xl);
  --r-ticket: var(--r-l);
  --r-card: var(--r-m);
  --r-button: 999px;
}

/* ---------- Old utility classes, kept so unconverted markup holds together ----------
   They keep their place but lose the costume: no tartan stripes, no foil, no engraving.
   Each is at most a flat 1 px hairline in gold. */
.tartan { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent); }
.foil-ring { position: relative; }
.foil-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent);
  pointer-events: none;
}
.guilloche { background-image: none; }