/* Lumen tokens shared by moddwyn.com (index.html), SMW.MODD (smw.html) and the
   Taiwan trip page. Each page links this first, then its own lumen-*.css.
   Lumen replaced Clearcoat on 2026-10-24 (Moddwyn's decisions:
   Moddular-Docs/design/LUMEN.md). Moddular keeps its own copy in moddular-src.
   The token names keep their old --cc- prefix so the page files did not have to
   change; the values are Lumen's: content solid and lit from above, a soft wide
   shade, white beads for controls, a blue pill that glows, the frame as real
   glass, and a night that is a deep hue rather than grey.
   Last modified: 2026-10-24 America/Los_Angeles (UTC-07:00) — Claude Opus 5.5 (Anthropic). */
@font-face{font-family:"Figtree";font-style:normal;font-display:swap;font-weight:300 900;src:url(/fonts/figtree.woff2) format("woff2-variations"),url(/fonts/figtree.woff2) format("woff2")}
body{font-family:"Figtree","IBM Plex Sans",system-ui,sans-serif}
:root{
  --cc-r-panel:24px; --cc-r-tile:18px; --cc-r-ctl:12px;
  --cc-atmos-base:#eceef2;
  --cc-glow-a:rgba(255,214,150,.36);   /* warm light, top left */
  --cc-glow-b:rgba(120,170,255,.34);   /* cool, top right */
  --cc-glow-c:rgba(186,160,255,.26);   /* lilac, bottom */
  --cc-face:linear-gradient(180deg,#ffffff 0%,color-mix(in srgb,#0a2a6e 4.5%,#ffffff) 100%);
  --cc-face-flat:#fbfcfe;
  --cc-rim:rgba(255,255,255,.9);
  --cc-hair:rgba(20,28,45,.06);
  --cc-edge:inset 0 1.5px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55);
  --cc-shadow:0 1px 2px rgba(20,28,45,.05),0 14px 34px -10px rgba(20,28,45,.14),0 40px 70px -30px rgba(20,28,45,.16),0 0 0 1px var(--cc-hair);
  --cc-shadow-hi:0 2px 4px rgba(20,28,45,.06),0 22px 48px -14px rgba(20,28,45,.22),0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent);
  --cc-tile:linear-gradient(180deg,#ffffff 0%,#f3f5f8 100%);
  --cc-tile-shadow:0 1px 2px rgba(20,28,45,.05),0 6px 16px -6px rgba(20,28,45,.12),inset 0 1px 0 #fff,0 0 0 1px var(--cc-hair);
  --cc-well:linear-gradient(180deg,#eef1f5 0%,#f6f8fb 100%);
  --cc-well-shadow:inset 0 2px 4px rgba(20,28,45,.08),inset 0 0 0 1px rgba(20,28,45,.07),0 1px 0 #fff;
  /* a bead: white on top, a breath of shade underneath, never see-through */
  --cc-btn:linear-gradient(180deg,#ffffff 0%,#eef1f5 100%);
  --cc-btn-shadow:inset 0 1px 0 #fff,inset 0 -3px 6px rgba(20,28,45,.06),0 1px 2px rgba(20,28,45,.08),0 8px 18px -8px rgba(20,28,45,.22);
  --cc-btn-on:linear-gradient(180deg,color-mix(in srgb,var(--ac) 9%,#fff) 0%,color-mix(in srgb,var(--ac) 16%,#fff) 100%);
  --cc-btn-on-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 40%,transparent),0 6px 16px -6px color-mix(in srgb,var(--ac) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.9);
  --cc-primary:linear-gradient(180deg,#4a8bff 0%,#2a72ff 45%,#0d55ea 100%);
  --cc-primary-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 8px rgba(0,20,90,.2),0 4px 10px -4px rgba(42,114,255,.45),0 16px 30px -14px rgba(42,114,255,.6);
  /* the frame is real glass: the page shows through it with colour */
  --cc-frame:color-mix(in srgb,#ffffff 62%,transparent);
  --cc-frame-edge:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.6),0 1px 0 rgba(20,28,45,.05),0 10px 28px -10px rgba(20,28,45,.12);
  --cc-grid:rgba(18,52,96,.035);
}
:root[data-theme="dark"]{
  /* a deep indigo night, the site's own hue, never grey */
  --cc-atmos-base:#0c0d22;
  --cc-glow-a:rgba(120,96,240,.30);
  --cc-glow-b:rgba(50,110,240,.28);
  --cc-glow-c:rgba(160,96,220,.22);
  --cc-face:linear-gradient(180deg,color-mix(in srgb,#5a64ff 30%,#161829) 0%,color-mix(in srgb,#5a64ff 12%,#080913) 100%);
  --cc-face-flat:#171a35;
  --cc-rim:rgba(255,255,255,.1);
  --cc-hair:rgba(190,196,255,.10);
  --cc-edge:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05);
  --cc-shadow:0 1px 2px rgba(0,0,0,.3),0 18px 40px -16px rgba(0,0,0,.6),0 0 0 1px var(--cc-hair);
  --cc-shadow-hi:0 24px 54px -16px rgba(0,0,0,.6),0 0 40px color-mix(in srgb,#6a74ff 18%,transparent),0 0 0 1px color-mix(in srgb,#6a74ff 50%,transparent);
  --cc-tile:linear-gradient(180deg,color-mix(in srgb,#fff 9%,#1a1c3a) 0%,color-mix(in srgb,#fff 2%,#1a1c3a) 100%);
  --cc-tile-shadow:0 6px 16px -8px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.14);
  --cc-well:linear-gradient(180deg,#0b0c1d 0%,#11132a 100%);
  --cc-well-shadow:inset 0 2px 5px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.05);
  --cc-btn:linear-gradient(180deg,color-mix(in srgb,#fff 14%,#1a1c3a) 0%,color-mix(in srgb,#fff 4%,#1a1c3a) 100%);
  --cc-btn-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.07),0 8px 18px -10px rgba(0,0,0,.6);
  --cc-btn-on:linear-gradient(180deg,color-mix(in srgb,#6a74ff 30%,#1a1c3a) 0%,color-mix(in srgb,#6a74ff 18%,#11132a) 100%);
  --cc-btn-on-shadow:inset 0 0 0 1px color-mix(in srgb,#6a74ff 50%,transparent),inset 0 1px 0 rgba(220,225,255,.35),0 6px 16px -6px color-mix(in srgb,#6a74ff 35%,transparent);
  --cc-primary:linear-gradient(180deg,#5590ff 0%,#2f72f0 50%,#1d5ad6 100%);
  --cc-primary-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 8px rgba(0,0,40,.25),0 16px 30px -14px rgba(60,120,255,.6);
  --cc-frame:color-mix(in srgb,#14163a 62%,transparent);
  --cc-frame-edge:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.06),0 10px 30px -12px rgba(0,0,0,.5);
  --cc-grid:rgba(160,170,255,.03);
}