/* ─── Design tokens ─────────────────────────────────────────────────────
   Single source of truth for the visual theme. Every other stylesheet
   consumes these via var(); no other file should contain a literal hex
   value (verified by grep in the success criteria).

   To swap themes, rewrite this file. The role names (--panel-bg,
   --accent, --cork-frame, etc.) describe what each color is used FOR,
   not what hue it is — so they survive any concept change.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Layout ──────────────────────────────────────────────────────── */
  --panel-width:  220px;

  /* ─── Root surfaces / text ────────────────────────────────────────── */
  --bg:           #fdf6e8;
  --surface:      #f5ead8;
  --fg:           #3d2b1a;
  --fg-2:         #5a3f28;
  --accent:       #a07850;
  --accent-deep:  #8a6438;
  --dim:          #b89a70;
  --muted:        #c4a882;
  --faint:        #e0cdb0;
  --border:       #d4b896;
  --border-light: #e8d9c0;
  --shadow:       rgba(100, 60, 20, 0.12);
  --error:        #b84040;
  --divider-gold: #e8c060;
  --sand:         #F5E6C8;

  /* ─── Canvas / map / popover / inversion ──────────────────────────── */
  --canvas-bg:    #1a1510;
  --map-body-bg:  #2c1d10;
  --text-stroke:  #000;
  --popover-bg:   #271f1f;
  --popover-fg:   #f3f3f3;
  --invert-fg:    #fff;
  /* Canvas tile tints: rgba components, comma-separated. Read by the
     renderer JS — not used by CSS. --canvas-fog tints explored-but-
     out-of-cone tiles; --canvas-cone tints the visible cone. */
  --canvas-fog:   20, 12, 3, 0.3;
  --canvas-cone:  255, 235, 180, 0.22;

  /* ─── Player-panel region ─────────────────────────────────────────── */
  /* The left panel's "dark on warm" treatment lives here as a dedicated
     set of role tokens. panels.css consumes these directly for selectors
     scoped to the player panel. A future theme can set these to match
     the canvas, or to anything else, without touching panels.css. */
  --panel-bg:           #5a3c24;
  --panel-surface:      #f5ead8;
  --panel-fg:           #d4b896;
  --panel-fg-2:         #b89a70;
  --panel-accent:       #caa472;
  --panel-dim:          #8a7050;
  --panel-muted:        #6a5540;
  --panel-faint:        #5a4535;
  --panel-border:       #4a3020;
  --panel-border-light: #3a2518;
  --panel-shadow:       rgba(0, 0, 0, 0.3);
  --panel-divider:      #8a6830;

  /* ─── Raised-button finish ────────────────────────────────────────── */
  /* Inventory cells, friend circles, profile-action-btn: pixel-art-ish
     raised look with a top highlight and a deep drop shadow. */
  --cell-border:        #8a6840;
  --cell-highlight:     #c4a070;
  --cell-shadow-deep:   #5a3820;
  --cell-surface:       var(--panel-surface);
  --cell-empty-bg:      rgba(180, 150, 110, 0.18);
  --cell-empty-border:  rgba(180, 150, 110, 0.25);
  --action-hover-bg:    #efe0c8;

  /* Action-button finish (profile actions). Per-theme overridable so
     the Actions section can carry a different accent from inventory
     cells — see theme-pastel for an example. */
  --action-border:      var(--cell-border);
  --action-fg:          var(--accent);
  --action-highlight:   var(--cell-highlight);
  --action-shadow-deep: var(--cell-shadow-deep);
  --action-surface:     var(--panel-surface);
  --action-cost-fg:     var(--muted);

  /* ─── Bars & indicators ───────────────────────────────────────────── */
  --bar-outline:        #3b2a1a;
  --energy-fill:        #e8b85c;
  --label-quiet:        #c4a878;
  --durability-good:    #6a9e5a;
  --durability-info:    #5b8ca1;
  --online-bg:          #4ade80;
  --online-border:      #166534;

  /* ─── Onboarding (cork board + pins + done state) ─────────────────── */
  --cork-bg:            #d4b888;
  --cork-frame:         #6a4830;
  --cork-frame-light:   #8a6838;
  --cork-frame-deep:    #3a2010;
  --pin-red-light:      #e06050;
  --pin-red-dark:       #a03028;
  --pin-green-light:    #8ac070;
  --pin-green-dark:     #5a8a40;
  --task-done-fg:       #9a8a70;
  --task-done-bg:       #ece0c8;
  --task-done-strike:   #a09070;
  --task-flash-bg:      #e8c060;
  --task-flash-fg:      #5a3a10;
  --task-surface:       var(--panel-surface);

  /* ─── Chat-message accents ────────────────────────────────────────── */
  --mention-fg:         #4a8bd9;
  --alert-fg:           #d96a52;
  --bubble-self-bg:     #e8dcc4;
  --unread-badge-bg:    #e8554a;

  /* ─── Chat bubble channels (already existed) ──────────────────────── */
  --bubble-local-bg:      var(--surface);
  --bubble-local-border:  var(--border-light);
  --bubble-local-fg:      var(--fg);

  --bubble-world-bg:      #d6e9ff;
  --bubble-world-border:  #7fa8d6;
  --bubble-world-fg:      #1a3050;

  --bubble-direct-bg:     #f4d9e8;
  --bubble-direct-border: #c48aa8;
  --bubble-direct-fg:     #4a1f3a;

  /* Chat-region surfaces */
  --chat-tab-bg:          var(--surface);
  --chat-msg-surface:     var(--surface);
  --chat-border:          var(--border-light);
  --chat-shadow:          var(--shadow);
  --chat-tab-border:      var(--chat-border);
  --bubble-bg:            var(--bg);
  --bubble-secondary-fg:  var(--muted);
  --bubble-border:        var(--border);
  --bubble-inner-bg:      var(--surface);
  --bubble-inner-border:  var(--border);

  /* Reaction chips. Original whites only showed on dark themes; cosy
     was a pre-existing bug — switched to subtle dark-on-cream. */
  --reaction-chip-bg:        rgba(0, 0, 0, 0.06);
  --reaction-chip-border:    rgba(0, 0, 0, 0.08);
  --reaction-chip-hover-bg:  rgba(0, 0, 0, 0.10);
  --reaction-chip-self-bg:     rgba(160, 120, 80, 0.22);
  --reaction-chip-self-border: rgba(160, 120, 80, 0.50);
}