/* =============================================================
   Bento House — Anime-Japandi colour palette
   Warm cream ground · Bento red accent · warm-grey ink
   -------------------------------------------------------------
   Drop-in for the existing site. Import once, globally:
       <link rel="stylesheet" href="/public/css/bento-house-colors.css" />
   …or from your main CSS:
       @import url("bento-house-colors.css");
   Then reference the tokens anywhere: color: var(--ink); background: var(--accent);

   Colours are authored in oklch (wide gamut, predictable mixing).
   Hex fallbacks are noted in comments for any tooling that needs them.
   ============================================================= */

:root {
  /* ---- Surfaces (warm cream) ---- */
  --bg:    oklch(0.935 0.034 92);   /* page background — warm butter cream   ~#F2E9CE */
  --bg-2:  oklch(0.905 0.044 90);   /* deeper cream — panels, tray, tiles     ~#EBDFBE */
  --paper: oklch(0.968 0.022 93);   /* near-white warm card                   ~#FAF5E6 */

  /* ---- Hairlines / rules ---- */
  --rule:      oklch(0.83 0.030 80);  /* dividers, borders                    ~#D8CBB0 */
  --rule-soft: oklch(0.88 0.026 82);  /* fainter dividers                     ~#E4D9C2 */

  /* ---- Ink (warm grey, not pure black) ---- */
  --ink:      oklch(0.27 0.018 60);   /* primary text                         ~#3A3128 */
  --ink-soft: oklch(0.42 0.016 60);   /* secondary text                       ~#5E5346 */
  --ink-mute: oklch(0.56 0.016 65);   /* captions, meta, labels               ~#867A6A */

  /* ---- Accent (Bento House red) ---- */
  --accent:     oklch(0.57 0.21 33);  /* poppy vermillion-coral (kawaii-bright) ~#E2502E */
  --accent-ink: oklch(0.46 0.20 30);  /* red on light — headings, emphasis     ~#A83A22 */

  /* ---- Support ---- */
  --moss:     oklch(0.58 0.13 145);   /* fresh matcha — veg + lively accent   ~#5C9A4E */
  --moss-ink: oklch(0.46 0.11 145);   /* matcha on light — text emphasis      ~#4A7B40 */

  /* ---- Second accent: sakura / rose (桜) — warm, harmonises with the vermillion ---- */
  --sakura:     oklch(0.72 0.12 8);   /* light rose — sparkles, soft glows    ~#E78AA0 */
  --sakura-ink: oklch(0.50 0.17 8);   /* deep rose — links, numbers, rings    ~#B23B59 */
}

/* -------------------------------------------------------------
   Optional: the icon drop-zone tile colour used on the home page,
   kept here so the value lives in one place.
   ------------------------------------------------------------- */
:root {
  --slot-bg: oklch(0.895 0.050 88);   /* empty illustration tile              ~#E8D9B4 */
}

/* =============================================================
   Tailwind (Play CDN) — paste into tailwind.config `theme.extend.colors`
   in partials/_header.php to make the same tokens available as utilities
   (bg-accent, text-ink-soft, border-rule, …):

   colors: {
     bg:          'oklch(0.935 0.034 92)',
     'bg-2':      'oklch(0.905 0.044 90)',
     paper:       'oklch(0.968 0.022 93)',
     ink:         'oklch(0.27 0.018 60)',
     'ink-soft':  'oklch(0.42 0.016 60)',
     'ink-mute':  'oklch(0.56 0.016 65)',
     rule:        'oklch(0.83 0.030 80)',
     accent:      'oklch(0.57 0.21 33)',
     'accent-ink':'oklch(0.46 0.20 30)',
     moss:        'oklch(0.58 0.13 145)',
     'moss-ink':  'oklch(0.46 0.11 145)',
     sakura:      'oklch(0.72 0.12 8)',
     'sakura-ink':'oklch(0.50 0.17 8)',
   }
   ============================================================= */