/* ============================================================
   SENSE · Semantic Token System  (light / dark)
   ------------------------------------------------------------
   Tokens are stored as SPACE-SEPARATED RGB CHANNELS so Tailwind
   opacity modifiers keep working, e.g.  bg-surface/50.

   Tailwind config (paste inside each index.html <script> BEFORE
   loading Tailwind CDN):

   tailwind.config = {
     theme: { extend: {
       colors: {
         // theme-aware (flip on [data-theme])
         bg:             'rgb(var(--bg) / <alpha-value>)',
         'bg-soft':      'rgb(var(--bg-soft) / <alpha-value>)',
         surface:        'rgb(var(--surface) / <alpha-value>)',
         'surface-2':    'rgb(var(--surface-2) / <alpha-value>)',
         text:           'rgb(var(--text) / <alpha-value>)',
         muted:          'rgb(var(--muted) / <alpha-value>)',
         line:           'rgb(var(--border) / <alpha-value>)',
         accent:         'rgb(var(--accent) / <alpha-value>)',
         'accent-deep':  'rgb(var(--accent-deep) / <alpha-value>)',
         'accent-strong':'rgb(var(--accent-strong) / <alpha-value>)',
         invert:         'rgb(var(--invert-bg) / <alpha-value>)',
         'invert-text':  'rgb(var(--invert-text) / <alpha-value>)',
         // static brand hues (never flip)
         cream:'#F5EFE6', ivory:'#FAF7F2', sand:'#E6D5C1', beige:'#C9A78C',
         clay:'#B08968', terra:'#8B6F4E', ink:'#2B2420', smoke:'#6B5F54',
       },
       fontFamily: {
         display: ['"Cormorant Garamond"','serif'],
         sans: ['Inter','system-ui','sans-serif'],
       },
     }},
   };
   ============================================================ */

:root,
[data-theme="light"] {
  --bg:            245 239 230;  /* cream  #F5EFE6 */
  --bg-soft:       250 247 242;  /* ivory  #FAF7F2 */
  --surface:       255 253 250;  /* warm white card */
  --surface-2:     230 213 193;  /* sand   #E6D5C1 */
  --text:          43 36 32;     /* ink    #2B2420 */
  --muted:         107 95 84;    /* smoke  #6B5F54 */
  --border:        227 216 203;  /* warm hairline #E3D8CB */
  --accent:        201 167 140;  /* beige  #C9A78C */
  --accent-deep:   176 137 104;  /* clay   #B08968 */
  --accent-strong: 139 111 78;   /* terra  #8B6F4E */
  --invert-bg:     43 36 32;     /* ink block (dark CTA in light mode) */
  --invert-text:   245 239 230;  /* cream text on ink */
  --on-accent:     43 36 32;     /* text on beige buttons */
  --shadow-color:  43 36 32;     /* warm shadow base */
  --grain-opacity: 0.04;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:            26 21 18;     /* warm near-black #1A1512 */
  --bg-soft:       34 28 24;     /* #221C18 */
  --surface:       42 35 32;     /* #2A2320 */
  --surface-2:     53 44 39;     /* #352C27 */
  --text:          242 234 224;  /* warm off-white #F2EAE0 */
  --muted:         183 168 153;  /* #B7A899 */
  --border:        61 51 44;     /* #3D332C */
  --accent:        209 178 152;  /* beige slightly lifted for contrast */
  --accent-deep:   197 167 140;  /* clay lifted */
  --accent-strong: 209 178 152;  /* terra too dark on black -> lift */
  --invert-bg:     245 239 230;  /* cream block (light CTA in dark mode) */
  --invert-text:   43 36 32;     /* ink text on cream */
  --on-accent:     26 21 18;     /* dark text on beige buttons */
  --shadow-color:  0 0 0;
  --grain-opacity: 0.05;
  color-scheme: dark;
}

/* Smooth theme crossfade (respect reduced motion) */
html { transition: background-color .45s ease, color .45s ease; }
@media (prefers-reduced-motion: reduce) {
  html, html * { transition-duration: .001ms !important; }
}

/* Base mapped to tokens so naked elements follow the theme */
body {
  background-color: rgb(var(--bg));
  color: rgb(var(--text));
}

/* Reusable theme-aware utility helpers (optional, framework-agnostic) */
.sense-bg        { background-color: rgb(var(--bg)); }
.sense-bg-soft   { background-color: rgb(var(--bg-soft)); }
.sense-surface   { background-color: rgb(var(--surface)); }
.sense-text      { color: rgb(var(--text)); }
.sense-muted     { color: rgb(var(--muted)); }
.sense-accent    { color: rgb(var(--accent)); }
.sense-border    { border-color: rgb(var(--border)); }

/* Selection */
::selection { background: rgb(var(--accent) / .35); color: rgb(var(--text)); }