/* ==========================================================================
   上海情绪地图 · Design tokens  (v0.1)
   One warm afternoon look. This site deliberately has a single theme:
   it does not switch to a dark palette.
   Every colour, font, size and timing on the site must come from here.
   ========================================================================== */
@import url("./fonts/fonts.css");

:root {
  color-scheme: light;

  /* ---- Grounds: paper and light ------------------------------------------ */
  --paper:        #FBF6E9;  /* main watercolour paper */
  --paper-deep:   #F2EBD6;  /* folded edges, card backs, quiet panels */
  --sunlight:     #FBE9D2;  /* warm light falling across the desk */
  --morning-mist: #EEF1D8;  /* the pale green of the reference site's background */
  --flash:        #FFFFFF;  /* the desk camera's flash: a full-screen white blink, about 0.15 s */

  /* ---- Ink: every line drawing ------------------------------------------- */
  --ink:          #3B3226;  /* pen lines, body text */
  --ink-soft:     #7A6A55;  /* captions, secondary text */
  --ink-faint:    rgba(59, 50, 38, .32); /* sketch lines in the background scene */

  /* ---- Pigments: the paint box ------------------------------------------- */
  --plane-green:  #7FA36A;  /* 梧桐绿  plane trees, parks */
  --leaf-deep:    #3E6B3A;  /* 深叶    shadows inside foliage */
  --mint:         #9CCAA6;  /* 薄荷    sky-side greens, the reference header */
  --caladium:     #E58FA2;  /* 叶子粉  the pink of the caladium leaf */
  --rouge:        #D45A6E;  /* 胭脂    deep pink accents */
  --brick:        #D9917A;  /* 砖红    old Shanghai brick, 石库门 */
  --butter:       #F2D58C;  /* 奶油黄  plaster walls, sunlight patches */
  --marigold:     #EDB14A;  /* 金盏    lamps, warm highlights */
  --tangerine:    #EE8442;  /* 橘      small bright objects (the rake in the reference) */
  --sky:          #A9CFE6;  /* 天青    sky, river surface */
  --cobalt:       #3460B8;  /* 钴蓝    one strong blue per scene, never more */
  --lilac:        #B69AD6;  /* 丁香    dusk, shadows on plaster */
  --umber:        #B58A62;  /* 茶褐    wood, paper bags, tea */
  --tin-rose:     #D98A78;  /* 铁皮玫瑰 the biscuit tin and the paint tin; the folded map's cover band, the count tag's border */
  --gilt:         #E6C07A;  /* 描金    the thin gold lines on the tins and on the folded map's cover band */

  /* ---- Emotions: one pigment each, used for objects, postcards and chips ---- */
  --emo-joy:      #EDB14A;  /* 喜悦 */
  --emo-moved:    #E58FA2;  /* 感动 */
  --emo-calm:     #6FB2A0;  /* 平静 */
  --emo-surprise: #A88BD6;  /* 惊讶 */
  --emo-mixed:    #B58A62;  /* 复杂 */
  --emo-sad:      #5A86C8;  /* 悲伤 */
  --emo-anger:    #D8573F;  /* 愤怒 */
  /* darker versions that are safe for small text on --paper */
  --emo-joy-ink:      #9A6A10;
  --emo-moved-ink:    #A83A55;
  --emo-calm-ink:     #2E6E5E;
  --emo-surprise-ink: #6A4BA6;
  --emo-mixed-ink:    #7A5636;
  --emo-sad-ink:      #2E5592;
  --emo-anger-ink:    #A4361F;

  /* ---- Type ------------------------------------------------------------- */
  --font-title: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;             /* 马善政毛笔楷书: titles, names, big moments */
  --font-hand:  "Caveat", "Bradley Hand", "Segoe Print", cursive;      /* English handwriting, notes, arrows */
  /* pen names on English pages: Latin letters in Caveat, Chinese ones in the brush font (Caveat has no Chinese,
     so 别问 fell to the system's bold sans). Use with font-synthesis-weight: none, so the brush font is never
     fake-bolded to match Caveat 600. */
  --font-hand-name: "Caveat", "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
  --font-body-serif: "Noto Serif SC", "Songti SC", "STSong", serif;    /* body option A: 思源宋体 */
  --font-body-xiaowei: "ZCOOL XiaoWei", "Noto Serif SC", "Songti SC", "STSong", serif;  /* Noto fills the few glyphs XiaoWei lacks */  /* body option B: 站酷小薇 */
  --font-body: var(--font-body-xiaowei);                               /* chosen: 站酷小薇 */

  --text-hero:  clamp(48px, 7vw, 88px);  /* site title */
  --text-h1:    clamp(36px, 4.6vw, 56px); /* story name */
  --text-h2:    28px;
  --text-hand:  24px;   /* handwritten notes (Caveat runs small, keep it large) */
  --text-body:  17px;
  --text-small: 14px;
  --leading-body: 1.9;
  --measure: 32em;      /* comfortable line length for Chinese body text */

  /* ---- Space, shape, depth --------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius-card: 6px;           /* postcards and notes: barely rounded, like paper */
  --sticker-edge: 7px;          /* white die-cut border around painted objects */
  --shadow-rest: 2px 4px 6px rgba(110, 70, 40, .18);
  --shadow-lift: 8px 18px 22px rgba(110, 70, 40, .26);
  --shadow-paper: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px rgba(110, 70, 40, .16);
  --map-halo: 0 0 42px 12px rgba(237, 177, 74, .20);   /* a faint warm glow round the open map on the desk */
  --room-dim: rgba(74, 52, 30, .10);
  --map-label: var(--ink);           /* place names over the close-up map; js shows them at about 70%, 60% close up */
  --map-label-water: var(--emo-sad-ink);   /* names of rivers, lakes and the sea: the river's blue */
  /* the room at dusk, while the closing letter is read: a sky of peach and lilac laid over the whole room (window
     side warmer, the far corner bluer), and a deeper warm light round the lamp. Layers of colour, no blend mode. */
  --dusk-wash: linear-gradient(200deg, rgba(246, 150, 80, .30) 0%, rgba(236, 130, 120, .18) 40%, rgba(170, 130, 200, .22) 100%);
  --dusk-shade: rgba(60, 38, 50, .08);   /* how much darker the room is at dusk, under the wash */
  --dusk-lamp: radial-gradient(closest-side, rgba(255, 214, 150, .55), rgba(255, 190, 120, .22) 55%, transparent);
  --envelope:      #FDF8EE;  /* 航空信封  the envelope's paper: whiter than the desk, so it stands out on it */
  --envelope-deep: #EADFCB;  /* its inside and its folds */
  --scrim: rgba(74, 52, 30, .15);   /* behind an open story postcard: a light warm dusk over the map (about 15%) */   /* the room under the open map: a very light warm dusk, so the map stands out without blur */


  /* ---- Motion ----------------------------------------------------------- */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* objects landing, tags swinging */
  --ease-paper:  cubic-bezier(.22, .9, .3, 1);     /* paper sliding and settling */
  --ease-ink:    cubic-bezier(.65, 0, .35, 1);     /* watercolour spreading */
  --dur-quick: 180ms;   /* hover */
  --dur-base:  420ms;   /* most transitions */
  --dur-slow:  900ms;   /* postcard flip, camera moves */
  --dur-long:  1400ms;  /* long, slow moves: the camera leaning in over the map, the tree in the wind */
  --dur-sparkle: 600ms; /* one sparkle in a story object's trail: shrinks, turns and fades */

  /* ---- Line: sketchy, never solid ---------------------------------------- */
  --line: rgba(59, 50, 38, .78);   /* main pen line */
  --line-w: 1.4px;                 /* pen width; draw a second faint pass for a sketch feel */
  --line-ghost: rgba(59, 50, 38, .28);

  /* ---- Grounds: page backgrounds are never flat cream ----------------- */
  --ground-garden: linear-gradient(172deg, #E4EFCF 0%, #EEF1D8 34%, #F8EDCF 70%, #FBE3CC 100%);  /* default, like caladiumcorner */
  --ground-dusk:   linear-gradient(170deg, #F9E2CC 0%, #F3D3CF 45%, #E2D3E6 100%);               /* conclusion, evening */
  --ground-river:  linear-gradient(175deg, #DCEBF0 0%, #E6F0DD 55%, #F6EBD2 100%);               /* riverside stories */

  /* ---- Textures --------------------------------------------------------- */
  --tex-paper: url("./textures/paper.webp");   /* the web copy (tools/make_web_textures.py); paper.png stays for the drawing tools */
}