saezuri/shared/theme.css at main · vrwrts/saezuri · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/* ===========================================================================
   Saezuri design tokens — the single source of truth for the palette, shadow
   recipes, and system font stacks. Shared by the app (src/index.css) and the
   landing site (site/). Reproduced (NOT copied) from the AvianVisitors palette.
   The kachō-e look is carried by the illustration PNGs; the CSS is just flat
   warm-paper fills and a few layered box-shadow recipes that stand in for flat
   borders. No textures, no bundled fonts.
   =========================================================================== */
:root {
  color-scheme: light;
  --paper: #fcfcfb; /* near-white, faint warm undertone */
  --paper-2: #f3f2ee; /* recessed track */
  --paper-3: #e8e6df; /* placeholder fill */
  --ink: #1a1612;
  --ink-2: #4a3f31;
  --ink-soft: #908576;
  --accent: #4a3f31;
  --hairline: rgba(26, 22, 18, 0.14);
  --pill: #fcfcfb;
  --live: #c44a3b; /* muted vermilion — live/recording dot */
  --ok: #2d5d3a;
  /* Depth recipes — replace flat 1px borders. */
  --edge: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(26, 22, 18, 0.04);
  --edge-lg: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(26, 22, 18, 0.06),
    0 8px 28px rgba(26, 22, 18, 0.06);
  --recess: inset 0 1px 2px rgba(26, 22, 18, 0.06), inset 0 0 0 1px rgba(26, 22, 18, 0.04);
  --raised: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(26, 22, 18, 0.05),
    0 1px 2px rgba(26, 22, 18, 0.07);
  --tile-shadow: drop-shadow(0 2px 6px rgba(26, 22, 18, 0.1));
  /* Hover: a deeper shadow + a touch of saturation lifts the bird off the plate. */
  --tile-shadow-hover: drop-shadow(0 3px 10px rgba(26, 22, 18, 0.26)) saturate(1.1);
  /* Selected: lifted further still, and it stays there — a held state rather
     than the passing acknowledgement hover gives. */
  --tile-shadow-selected: drop-shadow(0 7px 20px rgba(26, 22, 18, 0.34)) saturate(1.14);

  /* System font stacks (no bundled fonts). */
  --font-serif: ui-serif, 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Charcoal dark theme. A switcher writes data-theme on <html>; an inline
   pre-paint script applies the saved choice before first paint. Everything is
   variable-driven, so ink<->paper inverts cleanly and transparent-PNG cutouts
   sit directly on the charcoal. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #17181c;
  --paper-2: #212329;
  --paper-3: #2c2f36;
  --ink: #ece8e1;
  --ink-2: #b7afa2;
  --ink-soft: #837c70;
  --accent: #d8d2c6;
  --hairline: rgba(236, 232, 225, 0.2);
  --pill: #3a3e48;
  --live: #d9705f;
  --ok: #6faf7f;
  --edge: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.4);
  --edge-lg: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 10px 30px rgba(0, 0, 0, 0.5);
  --recess: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --raised: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.5);
  --tile-shadow: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
  --tile-shadow-hover: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6)) saturate(1.1);
  --tile-shadow-selected: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.75)) saturate(1.14);
}