/* ==========================================================================
   副業スタック — design tokens
   Light is the default. Dark is applied by [data-theme="dark"] (set by the head
   script from localStorage or the OS setting) and, without JS, by the OS setting.
   "paper" is always the page background and "ink" the foreground, so every
   "ink surface + paper text" component (band, selected tab, primary button)
   inverts by itself in dark mode.
   ========================================================================== */

:root{
  color-scheme:light;

  --paper:#FFFFFF;
  --paper-2:#F4F4F9;        /* quiet panels: table stripes, notes, templates (ink-2 on it: 6.5:1) */
  --ink:#16143A;
  --ink-2:#55547A;          /* secondary text: dates, notes (7.2:1 on paper) */
  --hair:#D6D5E3;           /* light separators, empty cells */
  --ul:#2E3BE6;             /* list numbers */
  --obi-em:#FF4A1C;         /* emphasised words on the band (5.2:1 on ink) */

  /* six layers of every theme, bottom (1) to top (6) — also the six tiers of STACK */
  --l1:#2E3BE6;             /* 基本     */
  --l2:#5A33E0;             /* 向き不向き */
  --l3:#8A2ED0;             /* 比較     */
  --l4:#B92FAE;             /* 費用     */
  --l5:#E33A73;             /* 失敗     */
  --l6:#FF4A1C;             /* 手順     */

  --strata:linear-gradient(90deg,var(--l1) 0 33.4%,var(--l3) 33.4% 66.7%,var(--l6) 66.7%);
  --strata6:linear-gradient(90deg,var(--l1) 0 16.67%,var(--l2) 16.67% 33.34%,var(--l3) 33.34% 50%,var(--l4) 50% 66.67%,var(--l5) 66.67% 83.34%,var(--l6) 83.34%);

  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  --lat:"League Gothic","Arial Narrow",Impact,sans-serif;

  --fv-max:820px;           /* first view never grows taller than an iPad (Air / 10th gen) in landscape */
  --fv-h:min(100svh,var(--fv-max));
  --page-max:1600px;
  --side-max:640px;         /* list column beside STACK */
  --m:16px;
  --gut:40px;
  --bar-h:56px;
  --topbar-h:56px;
  --obi-h:clamp(76px,calc(var(--fv-h) * .115),116px);
  --btn-w:clamp(176px,13.5vw,228px);
  --btn-gap:8px;

  /* reading pages */
  --measure:736px;          /* text column: about 42 full-width characters (17px tablets / 18px from 1024px; median sentence in the posts: 37) */
  --rail:232px;             /* table of contents / theme stack beside the text */
  --head-h:108px;           /* site header on lower pages (bar + category row) */
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0F0E24;
  --paper-2:#191838;
  --ink:#ECEBF6;
  --ink-2:#A3A2C2;
  --hair:#2F2D55;
  --ul:#8C94FF;
  --obi-em:#D9360F;         /* the band turns light in dark mode */
  --l1:#5865FF;
  --l2:#7F5CFF;
  --l3:#A65BF0;
  --l4:#D35AC9;
  --l5:#F2648F;
  --l6:#FF6A42;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0F0E24;
    --paper-2:#191838;
    --ink:#ECEBF6;
    --ink-2:#A3A2C2;
    --hair:#2F2D55;
    --ul:#8C94FF;
    --obi-em:#D9360F;
    --l1:#5865FF;
    --l2:#7F5CFF;
    --l3:#A65BF0;
    --l4:#D35AC9;
    --l5:#F2648F;
    --l6:#FF6A42;
  }
}

@media (min-width:600px){
  :root{--m:24px}
}
@media (min-width:1024px){
  :root{--m:32px;--measure:780px}
}