/* ==========================================================================
   6ty.Plus — Design Tokens
   One Place. Many Rooms. — change the atmosphere, not the identity.

   Sources: VISUAL_SYSTEM §08–09, §29 · MOTION_SYSTEM §25 · WEB_IMPLEMENTATION §08
   WordPress: these map 1:1 to theme.json
     color      → settings.color.palette
     typography → settings.typography.fontFamilies / fontSizes
     spacing    → settings.spacing.spacingSizes
     motion     → settings.custom.motion
   Rooms/lights are attribute-scoped so any element can carry a room's light.
   ========================================================================== */

:root {
  /* ── Color · the house (Window Side · late afternoon) ─────────────────── */
  --paper:        #F3EEE6;
  --paper-deep:   #EAE3D8;
  --surface:      #F8F5EF;
  --ink:          #2A2521;
  --ink-body:     #37302A;
  --ink-muted:    #6B6157;
  --line:         rgb(42 37 33 / 0.14);
  --accent:       #82634A;

  /* scene light — used only by .scene (the image layer) */
  --wall:         #E8DDCC;
  --wall-shade:   #D3C3AA;
  --light:        #FFE1AC;
  --light-strength: 0.78;
  --shadow-tone:  rgb(70 48 26 / 0.22);

  /* scene geometry — where the window throws its light */
  --win-x: 44%;  --win-y: 8%;  --win-w: 34%;
  --light-skew: -20deg;  --light-rotate: -5deg;  --light-blur: 9px;

  /* the house paper, captured once so tinted sections can fade back into it */
  --house-paper: var(--paper);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-text: "Noto Serif Thai", "Trirong", Georgia, serif;
  --font-title: "Sarabun", "IBM Plex Sans Thai Looped", system-ui, sans-serif;   /* titles and headlines (owner, from the early 6ty+ Music cover) */
  --brand-green: #009925;   /* the logo's green — the one vivid colour, now also the + before a story's title (owner) */
  --brand-green-text: #007A1E;   /* the same green as words on light paper: #009925 holds only 3.3:1 there, this 4.8:1 (owner, 25 Sep 2026) */
  --font-meta: "IBM Plex Sans Thai Looped", "Noto Sans Thai Looped", system-ui, sans-serif;

  --fs-display:  clamp(1.75rem, 1.15rem + 2.4vw, 2.875rem);
  --fs-title:    clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem);
  --fs-subtitle: clamp(1.3125rem, 1.15rem + 0.65vw, 1.625rem);
  --fs-body:     clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --fs-nav:      0.9375rem;
  --fs-meta:     clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-caption:  0.875rem;

  /* Thai needs vertical room for stacked vowels and tone marks */
  --lh-display: 1.62;
  --lh-title:   1.5;
  --lh-body:    1.95;
  --lh-meta:    1.6;

  --fw-light: 300;  --fw-regular: 400;  --fw-medium: 500;
  --tracking-label: 0.14em;   /* Latin labels only — never letterspace Thai */

  /* ── Spacing · space is the first visual language ────────────────────── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-section: clamp(6rem, 3.5rem + 10vw, 12rem);
  --space-page:    clamp(1.25rem, 0.6rem + 3.6vw, 4.5rem);

  --measure:      36rem;   /* reading column */
  --measure-wide: 66rem;
  --paragraph-gap: 1.45em;

  /* ── Radius · Shadow — restrained ────────────────────────────────────── */
  --radius-subtle: 2px;
  --radius-medium: 4px;
  --radius-large:  10px;
  --shadow-none:  none;
  --shadow-soft:  0 1px 2px rgb(42 37 33 / 0.06), 0 10px 28px -14px rgb(42 37 33 / 0.22);
  --shadow-atmos: 0 40px 80px -40px var(--shadow-tone);

  /* ── Motion · felt, not noticed ──────────────────────────────────────── */
  --dur-instant:    120ms;
  --dur-fast:       240ms;
  --dur-gentle:     700ms;
  --dur-atmos:      1800ms;
  --dur-transition: 900ms;
  --dur-ambient:    64s;

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.35, 0.95);
  --ease-atmos:  cubic-bezier(0.33, 0, 0.2, 1);

  --move-micro:  2px;
  --move-small:  8px;
  --move-medium: 16px;
  --move-large:  32px;

  /* ── Texture ─────────────────────────────────────────────────────────── */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: 0.16;

  color-scheme: light;
}

/* ==========================================================================
   The house at different times of day (homepage arrival only)
   ========================================================================== */

:root[data-light="morning"] {        /* Morning Coffee */
  --paper: #F4F1EA;  --paper-deep: #EAE6DD;
  --wall: #ECE6DA;   --wall-shade: #D9D1C2;
  --light: #FFF3D9;  --light-strength: 0.7;
  --win-x: 18%;  --win-y: 4%;  --win-w: 30%;
  --light-skew: 16deg;  --light-rotate: 3deg;  --light-blur: 16px;
}

:root[data-light="evening"] {        /* Sunset Balcony */
  --paper: #F2EBE2;  --paper-deep: #E8DED1;
  --wall: #E7D6C3;   --wall-shade: #CDB396;
  --light: #FFC994;  --light-strength: 0.72;
  --shadow-tone: rgb(92 50 30 / 0.24);
  --win-x: 52%;  --win-y: 22%;  --win-w: 42%;
  --light-skew: -34deg;  --light-rotate: -9deg;  --light-blur: 14px;
}

:root[data-light="night"] {          /* Night Reading */
  --brand-green-text: var(--brand-green);   /* 4.6:1 on the dark paper — the logo's own green */
  --paper: #1C1A17;  --paper-deep: #151310;  --surface: #25221E;
  --ink: #EEE7DC;    --ink-body: #DED6CA;    --ink-muted: #A89E91;
  --line: rgb(238 231 220 / 0.14);
  --accent: #CDAB82;
  --wall: #221E1A;   --wall-shade: #161310;
  --light: #F2C688;  --light-strength: 0.5;
  --shadow-tone: rgb(0 0 0 / 0.5);
  --grain-opacity: 0.1;
  color-scheme: dark;
}

/* ==========================================================================
   Rooms — six emotional states. Tokens only; surfaces opt in via .tint / html.
   Directions, not fixed palettes (VISUAL_SYSTEM §09).
   ========================================================================== */

[data-room] { --accent: var(--room-accent); }

[data-room="inner-quiet"] {           /* warm neutrals, charcoal, soft shadow */
  --room-accent: #5E5249;
  --paper: #EFEBE5;  --paper-deep: #E4DED5;
  --wall: #D8CFC3;   --wall-shade: #BFB3A4;
  --light: #F6D9A6;  --light-strength: 0.6;
}

[data-room="near-nature"] {          /* natural greens, faded blue, daylight */
  --room-accent: #55664A;
  --paper: #F0F0E8;  --paper-deep: #E4E6DA;
  --wall: #DCE1D2;   --wall-shade: #C0C9B3;
  --light: #FFF6D6;  --light-strength: 0.78;
  --shadow-tone: rgb(46 60 38 / 0.22);
}

[data-room="in-between"] {           /* cooler neutrals, road / sky tones */
  --room-accent: #55667A;
  --paper: #EEEFED;  --paper-deep: #E2E5E4;
  --wall: #D7DDDF;   --wall-shade: #B9C3C7;
  --light: #F6F2E6;  --light-strength: 0.7;
  --shadow-tone: rgb(40 52 62 / 0.2);
}

[data-room="objects-memory"] {       /* paper, wood, faded brown, warm gray */
  --room-accent: #82603F;
  --paper: #F3ECE1;  --paper-deep: #E9DFD0;
  --wall: #E3D4BE;   --wall-shade: #C9B394;
  --light: #FFDDA2;  --light-strength: 0.82;
}

[data-room="time-seasons"] {         /* seasonal tones, low saturation */
  --room-accent: #72613A;
  --paper: #F2EDE3;  --paper-deep: #E7E0D2;
  --wall: #E1D7C6;   --wall-shade: #C8BAA1;
  --light: #FFE4BA;  --light-strength: 0.74;
}

[data-room="the-middle"] {           /* neutral, ambiguous, restrained contrast */
  --room-accent: #66625C;
  --paper: #EFEEEB;  --paper-deep: #E5E3DF;
  --wall: #DEDBD5;   --wall-shade: #C8C4BD;
  --light: #F6F2E9;  --light-strength: 0.55;
}

/* ==========================================================================
   Night — the whole house dims; each room keeps a trace of its accent.
   light.js sets data-theme from the reader's hour, or from the footer lamp (owner, 26 Sep 2026).
   Pages without light.js (the clips) and readers without JS still follow the device.
   Placed last so it wins over room and light blocks.
   ========================================================================== */

:root[data-theme="dark"], [data-theme="dark"] [data-room] {
  --paper: #1C1A17;  --paper-deep: #151310;  --surface: #25221E;
  --ink: #EEE7DC;    --ink-body: #DED6CA;    --ink-muted: #A89E91;
  --line: rgb(238 231 220 / 0.14);
  --wall: #221E1A;   --wall-shade: #161310;
  --light: #F2C688;  --light-strength: 0.46;
  --shadow-tone: rgb(0 0 0 / 0.5);
  --grain-opacity: 0.1;
  color-scheme: dark;
}
:root[data-theme="dark"] { --accent: #CDAB82; --brand-green-text: var(--brand-green); }
:root[data-theme="dark"][data-room], [data-theme="dark"] [data-room] { --accent: color-mix(in oklab, var(--room-accent) 45%, #EFE6D8); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root:not([data-theme]) [data-room] {
    --paper: #1C1A17;  --paper-deep: #151310;  --surface: #25221E;
    --ink: #EEE7DC;    --ink-body: #DED6CA;    --ink-muted: #A89E91;
    --line: rgb(238 231 220 / 0.14);
    --wall: #221E1A;   --wall-shade: #161310;
    --light: #F2C688;  --light-strength: 0.46;
    --shadow-tone: rgb(0 0 0 / 0.5);
    --grain-opacity: 0.1;
    color-scheme: dark;
  }
  :root:not([data-theme]) { --accent: #CDAB82; --brand-green-text: var(--brand-green); }
  :root:not([data-theme])[data-room], :root:not([data-theme]) [data-room] { --accent: color-mix(in oklab, var(--room-accent) 45%, #EFE6D8); }
}

/* the lamp was pressed: colours ease over instead of snapping (site.js adds the class for a moment) */
:root.theme-shift, :root.theme-shift body, :root.theme-shift body * {
  transition: background-color var(--dur-gentle) ease, color var(--dur-gentle) ease, border-color var(--dur-gentle) ease !important;
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-shift, :root.theme-shift body, :root.theme-shift body * { transition: none !important; }
}

/* ==========================================================================
   Breath colours — a piece takes the colour of its category, the colour the reader chose (owner, READING_FLOW.md).
   Only a tint of it reaches the page, so contrast stays as measured; the full colour is the accent.
   Placed after the night block so it wins there too.
   ========================================================================== */

[data-breath="sleepless-nights"] { --breath: #4A5068; }
[data-breath="time-alone"]       { --breath: #7E8B6E; }
[data-breath="tired-days"]       { --breath: #A08A7C; }
[data-breath="life-transitions"] { --breath: #C49A5C; }
[data-breath="quieter-home"]     { --breath: #CFC2AC; }
[data-breath="time-passing"]     { --breath: #8FA2AC; }

[data-breath] {
  --paper: color-mix(in oklab, var(--breath) 8%, #F3EEE6);
  --paper-deep: color-mix(in oklab, var(--breath) 12%, #EAE6DD);
  --accent: color-mix(in oklab, var(--breath) 45%, #2A2521);   /* darkened: the pale colours would fail as text (≥4.5:1) */
}
:root[data-theme="dark"][data-breath], [data-theme="dark"] [data-breath] {
  --paper: color-mix(in oklab, var(--breath) 9%, #1C1A17);
  --paper-deep: color-mix(in oklab, var(--breath) 9%, #151310);
  --accent: color-mix(in oklab, var(--breath) 55%, #EFE6D8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-breath], :root:not([data-theme]) [data-breath] {
    --paper: color-mix(in oklab, var(--breath) 9%, #1C1A17);
    --paper-deep: color-mix(in oklab, var(--breath) 9%, #151310);
    --accent: color-mix(in oklab, var(--breath) 55%, #EFE6D8);
  }
}