/* ============================================================
   THEME TOKENS — Single source of truth
   Every color in the panel derives from these 61 variables.
   Light mode: :root
   Dark mode:  html.dark body
   ============================================================ */

:root {
  /* ── BRAND ────────────────────────────────────────────── */
  --color-primary:            #C15F3C;
  --color-primary-hover:      #A84F31;
  --color-primary-dark:       #8B3A20;
  --color-primary-light:      #F1E2D8;
  --color-accent:             #B98A3A;
  --color-accent-dark:        #6B2D18;

  /* ── SURFACES ─────────────────────────────────────────── */
  --color-bg:                 #F4F3EE;
  --color-bg-alt:             #FAF9F5;
  --color-surface:            #ffffff;
  --color-surface-raised:     #ffffff;
  --color-border:             #E5E1D7;
  --color-border-light:       #F1E2D8;
  --color-divider:            #E5E1D7;

  /* ── TEXT ──────────────────────────────────────────────── */
  --color-text:               #2B2620;
  --color-text-secondary:     #8C8577;
  --color-text-muted:         #8C8577;
  --color-text-inverse:       #ffffff;
  --color-text-link:          #C15F3C;

  /* ── HEADER ────────────────────────────────────────────── */
  --color-header-bg:          #8B3A20;
  --color-header-text:        #ffffff;
  --color-header-border:      #6B2D18;
  --color-header-accent:      #C15F3C;
  --color-header-shrink-bg:   #ffffff;
  --color-header-shrink-text: #2B2620;
  --color-header-shrink-accent: #C15F3C;

  /* ── FOOTER ────────────────────────────────────────────── */
  --color-footer-bg:          #8B3A20;
  --color-footer-text:        #ffffff;
  --color-footer-border:      #6B2D18;
  --color-footer-accent:      #F1E2D8;
  --color-footer-bottom-bg:   #6B2D18;
  --color-footer-bottom-text: #ffffff;

  /* ── STATUS / SEMANTIC ─────────────────────────────────── */
  --color-success:            #5E7F52;
  --color-success-light:      #E3EAD9;
  --color-danger:             #B6453A;
  --color-danger-light:       #F4DCD8;
  --color-warning:            #B98A3A;
  --color-warning-light:      #F2E6CF;
  --color-info:               #C15F3C;
  --color-info-light:         #EDE2D6;
  --color-secondary:          #8C8577;
  --color-secondary-light:    #E5E1D7;
  --color-purple:             #a55eea;
  --color-pink:               #f66d9b;

  /* ── INPUTS ────────────────────────────────────────────── */
  --color-input-bg:           #ffffff;
  --color-input-border:       #E5E1D7;
  --color-input-focus:        #C15F3C;
  --color-input-text:         #2B2620;

  /* ── SHADOWS ───────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px 0 rgba(43,38,32,0.08), 0 1px 2px -1px rgba(43,38,32,0.08);
  --shadow-md:   0 4px 6px -1px rgba(43,38,32,0.08), 0 2px 4px -2px rgba(43,38,32,0.08);
  --shadow-lg:   0 10px 15px -3px rgba(43,38,32,0.08), 0 4px 6px -4px rgba(43,38,32,0.08);
  --shadow-card: 0 4px 12px rgba(43,38,32,0.10);

  /* ── SELECT2 ───────────────────────────────────────────── */
  --sel-bg:               #ffffff;
  --sel-text:             #2B2620;
  --sel-border:           #C15F3C;
  --sel-highlight-bg:     #C15F3C;
  --sel-highlight-text:   #ffffff;
  --sel-selected-bg:      #F1E2D8;
}

/* ============================================================
   DARK MODE
   ============================================================ */
html.dark body {
  /* ── BRAND ── */
  --color-primary:            #E07A52;
  --color-primary-hover:      #EC8E68;
  --color-primary-dark:       #E07A52;
  --color-primary-light:      #EC8E68;
  --color-accent:             #D4A84A;
  --color-accent-dark:        #3D362B;

  /* ── SURFACES ── */
  --color-bg:                 #1E1A15;
  --color-bg-alt:             #28231C;
  --color-surface:            #28231C;
  --color-surface-raised:     #3D362B;
  --color-border:             #3D362B;
  --color-border-light:       #3D362B;
  --color-divider:            #3D362B;

  /* ── TEXT ── */
  --color-text:               #F1ECE2;
  --color-text-secondary:     #B1ADA1;
  --color-text-muted:         #8C8577;
  --color-text-inverse:       #1E1A15;
  --color-text-link:          #E07A52;

  /* ── HEADER ── */
  --color-header-bg:          #1E1A15;
  --color-header-text:        #F1ECE2;
  --color-header-border:      #3D362B;
  --color-header-accent:      #E07A52;
  --color-header-shrink-bg:   #28231C;
  --color-header-shrink-text: #F1ECE2;
  --color-header-shrink-accent: #E07A52;

  /* ── FOOTER ── */
  --color-footer-bg:          #1E1A15;
  --color-footer-text:        #F1ECE2;
  --color-footer-border:      #3D362B;
  --color-footer-accent:      #E07A52;
  --color-footer-bottom-bg:   #141010;
  --color-footer-bottom-text: #B1ADA1;

  /* ── STATUS ── */
  --color-success:            #8FB37D;
  --color-success-light:      #2D4A28;
  --color-danger:             #CC5C5A;
  --color-danger-light:       #4A2020;
  --color-warning:            #D4A84A;
  --color-warning-light:      #3D3020;
  --color-info:               #E07A52;
  --color-info-light:         #1E2830;
  --color-secondary:          #B1ADA1;
  --color-secondary-light:    #3D362B;
  --color-purple:             #7A3B90;
  --color-pink:               #CC4580;

  /* ── INPUTS ── */
  --color-input-bg:           #28231C;
  --color-input-border:       #3D362B;
  --color-input-focus:        #E07A52;
  --color-input-text:         #F1ECE2;

  /* ── SHADOWS ── */
  --shadow-sm:   0 1px 3px 0 rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.4);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.30);

  /* ── SELECT2 ── */
  --sel-bg:               #28231C;
  --sel-text:             #F1ECE2;
  --sel-border:           #3D362B;
  --sel-highlight-bg:     #E07A52;
  --sel-highlight-text:   #ffffff;
  --sel-selected-bg:      #1E1A15;
}