/* Tokens: the only place for colours, z-index layers, families, durations
   and shared offsets. Seasons and grounds redefine tokens here and nowhere
   else; the ground comes after the seasons so its grain wins. */

/* The season's light and the ghost kanji's lift are registered, so the
   browser interpolates them: a season change dissolves colours and
   positions (gradients themselves do not interpolate). --pt-* stay
   unregistered: the particle field reads them as written, at once. */
@property --sky-a { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --sky-b { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --sky-a-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --sky-a-y { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --sky-a-w { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --sky-a-h { syntax: '<percentage>'; inherits: true; initial-value: 80%; }
@property --sky-b-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --sky-b-y { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --sky-b-w { syntax: '<percentage>'; inherits: true; initial-value: 100%; }
@property --sky-b-h { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --vignette { syntax: '<number>'; inherits: true; initial-value: 0.5; }
@property --poem-light { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --kanji-alpha { syntax: '<number>'; inherits: true; initial-value: 0.034; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #F3D7E2; }
@property --glyph-lift { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  /* base ink / paper */
  --ink-void: #0B0B0D;
  --ink-deep: #14141A;
  --ink-soft: #1F2026;
  --ink-black: #000000;   /* the dark half of the ground disc, on both grounds */
  --ink-raised: #16161D;  /* a tile lifted under the pointer */
  --paper: #EDE8DF;
  --paper-dim: #9A968C;
  --paper-faint: #888477;  /* recessive but readable: ≥4.5:1 over every season's light pool (WCAG AA) */

  /* seasonal (overridden per data-season) */
  --bg: #0E0B0D;
  --accent: #E6A9C4;
  --glow: #F3D7E2;
  --text: #F2E9EC;

  /* veils and shadows over the room */
  --veil-panel: rgba(10, 11, 14, 0.72);
  --veil-sheet: rgba(6, 7, 9, 0.78);
  --shadow-lift: 0 8px 30px rgba(0, 0, 0, 0.32);

  /* the room's light, one stack for every season: a vignette over a high
     pool (--sky-a) and a low one (--sky-b) on the ground. The high pool
     stays high and the low one low, so in a season change each slides
     along its own edge and none crosses the poem */
  --atmosphere:
    radial-gradient(140% 110% at 50% 46%, transparent 52%, rgb(0 0 0 / var(--vignette)) 100%),
    radial-gradient(var(--sky-a-w) var(--sky-a-h) at var(--sky-a-x) var(--sky-a-y), var(--sky-a), transparent 70%),
    radial-gradient(var(--sky-b-w) var(--sky-b-h) at var(--sky-b-x) var(--sky-b-y), var(--sky-b), transparent 70%),
    var(--ink-void);
  --grain-opacity: 0.045;
  --glyph-halo: none;  /* the glow on the brand glyph and the season word */
  /* --season-glyph is left undefined here: without a season, no kanji is drawn */

  /* quiet inks: recessive text without opacity, at AA on every season and
     ground (docs/frontend.md lists the contrasts) */
  --paper-soft: color-mix(in srgb, var(--paper) 92%, var(--ink-void));
  --accent-quiet: color-mix(in srgb, var(--accent) 82%, var(--ink-void));

  /* families (identity.md 4) */
  --font-verse: 'EB Garamond', serif;
  --font-label: 'Inter', sans-serif;
  --font-glyph: 'Shippori Mincho', serif;
  /* the label scale (Inter): nothing smaller than --type-1 */
  --type-1: 11px;   /* labels, buttons, the menu */
  --type-2: 12px;   /* mode titles, counts, the toast */
  --type-3: 13px;   /* rōmaji, the intro's name */
  --type-4: 15px;   /* the brand's name */

  /* motion */
  --ease-breath: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ink: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-exit: 0.35s;    /* the verse leaving on navigation */
  --dur-hover: 0.5s;
  --dur-state: 0.6s;
  --dur-panel: 0.9s;    /* the readings panel */
  --dur-hush: 1.2s;     /* chrome fading with the cursor hush */
  --dur-reveal: 1.4s;   /* a verse line breathing in */
  --dur-season: 2.2s;   /* the room changing season */

  /* layers (docs/frontend.md) */
  --z-behind: -1;
  --z-ground: 0;
  --z-grain: 1;
  --z-above: 1;         /* above its siblings inside a panel: the read intro */
  --z-particles: 2;
  --z-panel: 5;
  --z-chrome: 12;
  --z-chrome-over: 13;
  --z-menu: 14;
  --z-readings: 40;
  --z-toast: 50;
  --z-sheet: 60;

  /* shared offsets */
  --edge-x: 38px;       /* the left edge of the corner chrome on wide screens */

  /* the registered light dissolves with the season (reduced motion: below) */
  transition-property: --sky-a, --sky-b, --sky-a-x, --sky-a-y, --sky-a-w, --sky-a-h,
    --sky-b-x, --sky-b-y, --sky-b-w, --sky-b-h, --vignette, --poem-light, --kanji-alpha, --glow, --glyph-lift;
  transition-duration: var(--dur-season);
  transition-timing-function: var(--ease-breath);
}

/* the four seasons: palette; the light of the room (its two pools, the
   vignette, the light behind the poem); the grain; the halo on the glyphs;
   the season kanji, how faint its ghost is and how far it is lifted; the
   particles' light, mid and deep tones (hex or rgb: particle-shapes.js
   parses them). Unqualified, so a tile or an archive section carrying
   data-season takes its own season's tokens */

/* haru / spring: dawn, a rose sky high right, a warm haze low left, soft vignette */
[data-season="haru"] {
  --bg: #170E14; --accent: #E89DBE; --glow: #F7D4E3; --text: #F4ECEE;
  --sky-a: rgb(70 26 52 / 0.55);   --sky-a-x: 80%; --sky-a-y: -6%;  --sky-a-w: 95%;  --sky-a-h: 75%;
  --sky-b: rgb(120 60 72 / 0.16);  --sky-b-x: 18%; --sky-b-y: 104%; --sky-b-w: 120%; --sky-b-h: 50%;
  --vignette: 0.5; --poem-light: rgb(247 212 227 / 0.05); --kanji-alpha: 0.034;
  --pt-1: #FCE6EF; --pt-2: #E89DBE; --pt-3: #B9718F;
  --grain-opacity: 0.04;
  --glyph-halo: 0 0 14px rgba(247,212,227,0.30);
  --season-glyph: "春";
}
/* natsu / summer: night, deep green from above, a warm glow off the grass, denser vignette */
[data-season="natsu"] {
  --bg: #06110D; --accent: #A8DC95; --glow: #F2F4C2; --text: #E7F0E6;
  --sky-a: rgb(16 46 36 / 0.5);    --sky-a-x: 50%; --sky-a-y: -12%; --sky-a-w: 130%; --sky-a-h: 70%;
  --sky-b: rgb(130 120 50 / 0.13); --sky-b-x: 50%; --sky-b-y: 108%; --sky-b-w: 100%; --sky-b-h: 45%;
  --vignette: 0.6; --poem-light: rgb(242 244 194 / 0.045); --kanji-alpha: 0.03;
  --pt-1: #F7F9CF; --pt-2: #D5EC8C; --pt-3: #A8DC95;
  --grain-opacity: 0.05;
  --glyph-halo: 0 0 12px rgba(242,244,194,0.22);
  --season-glyph: "夏";
  --glyph-lift: 6vh;  /* the kanji's inner strokes would sit right behind the verse */
}
/* aki / autumn: dusk, the sun just set low right in amber, violet-brown above, heavy vignette */
[data-season="aki"] {
  --bg: #160C06; --accent: #DC9046; --glow: #F0BC6C; --text: #F3E7D6;
  --sky-a: rgb(48 22 30 / 0.45);   --sky-a-x: 12%; --sky-a-y: -5%;  --sky-a-w: 90%;  --sky-a-h: 60%;
  --sky-b: rgb(150 72 24 / 0.18);  --sky-b-x: 76%; --sky-b-y: 106%; --sky-b-w: 100%; --sky-b-h: 70%;
  --vignette: 0.7; --poem-light: rgb(240 188 108 / 0.045); --kanji-alpha: 0.034;
  --pt-1: #C0432A; --pt-2: #D97A38; --pt-3: #E6B458;
  --grain-opacity: 0.065;
  --glyph-halo: 0 0 16px rgba(240,188,108,0.34);
  --season-glyph: "秋";
}
/* fuyu / winter: blue-grey light diffused from above, a snow glow below, lightest vignette (most ma) */
[data-season="fuyu"] {
  --bg: #0C1116; --accent: #A7C2D6; --glow: #EEF6FB; --text: #EAF1F6;
  --sky-a: rgb(52 66 82 / 0.55);   --sky-a-x: 50%; --sky-a-y: -18%; --sky-a-w: 150%; --sky-a-h: 85%;
  --sky-b: rgb(80 96 112 / 0.12);  --sky-b-x: 50%; --sky-b-y: 112%; --sky-b-w: 140%; --sky-b-h: 45%;
  --vignette: 0.35; --poem-light: rgb(238 246 251 / 0.04); --kanji-alpha: 0.038;
  --pt-1: #F4F8FB; --pt-2: #C6D7E4; --pt-3: #A7C2D6;
  --grain-opacity: 0.055;
  --glyph-halo: 0 0 18px rgba(238,246,251,0.40);
  --season-glyph: "冬";
}

/* a tile or an archive section with its own season mixes its own quiet accent */
[data-season] { --accent-quiet: color-mix(in srgb, var(--accent) 82%, var(--ink-void)); }

/* the void ground: the surround goes true black so the seasonal light pools
   read as illumination; surfaces deepen, the grain eases. Without the
   attribute the ground is slate (the :root inks) */
[data-ground="amoled"] {
  --ink-void: #000000;
  --ink-deep: #070709;
  --ink-soft: #15151A;
  --paper-faint: #827E71;
  --ink-raised: #0C0C10;
  --grain-opacity: 0.03;
}

/* reduced motion: a short plain dissolve instead of the slow one */
@media (prefers-reduced-motion: reduce) {
  :root { transition-duration: 0.5s; transition-timing-function: linear; }
}