/**
 * ============================================================================
 * ROOTS ARCHIVES — DESIGN TOKENS (variables.css)
 * ============================================================================
 *
 * Single source of truth for all CSS custom properties.
 * Values are overridden per-theme by public/css/themes/{name}.css
 *
 * Token categories:
 *   1. Colors — brand, UI, semantic
 *   2. Typography — families, sizes, line-heights
 *   3. Spacing — padding, margins
 *   4. Borders — radii
 *   5. Table columns — fixed widths
 *   6. Bootstrap overrides
 * ============================================================================
 */

:root {
    /* ── 1. Colors ─────────────────────────────────── */

    /* Brand */
    --color-primary:           #8B6F47;
    --color-secondary:         #D4A574;
    --color-accent:            #F5E6D3;
    --color-dark:              #5C4A3A;
    --color-light:             #FAF7F2;

    /* Body */
    --color-body-bg:           #FAF7F2;
    --color-body-text:         #3D3D3D;
    --color-text:              #3D3D3D;
    --color-muted:             #888888;

    /* Header */
    --color-header-bg:         #F5E6D3;
    --color-header-text:       #2c2420;
    --color-header-hover:      #8b4513;

    /* Footer */
    --color-footer-bg:         #F5E6D3;
    --color-footer-text:       #2c2420;
    --color-footer-hover:      #8b4513;
    --color-footer-border:     rgba(0,0,0,0.1);

    /* Links */
    --color-link:              #8B6F47;
    --color-link-hover:        #6d5836;

    /* Section headers (card-header.bg-primary) */
    --color-section-header-bg:   #8B6F47;
    --color-section-header-text: #ffffff;

    /* Cards */
    --color-card-bg:           #ffffff;
    --color-card-border:       #ece6da;
    --color-card-hover-bg:     #ffffff;

    /* Tables */
    --color-table-border:      #dee2e6;
    --color-table-header-bg:   #f8f9fa;
    --color-table-text:        #212529;

    /* Forms */
    --color-form-bg:           #ffffff;
    --color-form-text:         #212529;
    --color-form-border:       #ced4da;

    /* Buttons */
    --color-btn-primary-bg:    #8B6F47;
    --color-btn-primary-hover: #6d5836;
    --color-btn-outline-text:  #8B6F47;
    --color-btn-outline-hover-bg: #8B6F47;

    /* Badges */
    --color-badge-secondary:   #6c757d;

    /* Breadcrumbs */
    --color-breadcrumb-active: #6c757d;
    --color-breadcrumb-separator: #D4A574;

    /* Page title */
    --color-page-title:        #6d5836;

    /* Accordion */
    --color-accordion-bg:      #FAF7F2;
    --color-accordion-active-bg: #D4A574;
    --color-accordion-chevron: #8b6f47;

    /* Stats / Overview */
    --color-stat-number:       #8B4513;
    --color-stat-label:        #888888;
    --color-overview-border:   #E8E8D8;

    /* Nav tabs */
    --color-nav-tab-border:    #e9ecef;
    --color-nav-tab-text:      #6c757d;
    --color-nav-tab-hover-border: #E8E8D8;

    /* Misc */
    --color-sort-icon:         #6c757d;


    /* ── 2. Typography ─────────────────────────────── */

    --font-family:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base:          0.875rem;
    --font-size-small:         0.7rem;
    --font-size-page-title:    1.4rem;
    --line-height-base:        1.4;
    --line-height-body:        1.6;


    /* ── 3. Spacing ────────────────────────────────── */

    --spacing-cell:            0.5rem;
    --spacing-card:            0.75rem;
    --spacing-badge:           0.15rem 0.4rem;


    /* ── 4. Borders ────────────────────────────────── */

    --radius-card:             8px;
    --radius-badge:            0.25rem;
    --radius-btn:              0.25rem;
    --radius-form:             0.25rem;
    --radius-accordion:        0;


    /* ── 5. Table columns ──────────────────────────── */

    --table-col-cover:         80px;
    --table-col-artist:        185px;
    --table-col-album:         290px;
    --table-col-release:       125px;
    --table-col-type:          80px;
    --table-col-label:         145px;
    --table-col-rec:           80px;
    --table-col-role:          80px;
    --table-col-rel:           80px;


    /* ── 6. Bootstrap overrides ────────────────────── */

    --bs-primary:              #8B6F47;
    --bs-primary-rgb:          139, 111, 71;
    --bs-info:                 #D4A574;
    --bs-info-rgb:             212, 165, 116;
}