/* ============================================================================
   LOREBENCH LIGHT THEME
   ============================================================================
   Light theme with refined gold accent
   ============================================================================ */

:root[data-theme="light"] {
    /* PRIMARY ACCENT COLOR (rich amber-gold: WCAG AA on light bg + under white text)
       #806614 => white text 5.49:1, link on #f5f5f5 5.03:1 / on #fff 5.49:1 (both pass AA) */
    --tl-accent-primary: #806614;
    --tl-accent-primary-light: #9c7d1a;
    --tl-accent-primary-dark: #6b5410;
    --tl-accent-primary-darker: #564310;
    /* Decorative-only bright gold (NOT used for text/contrast-bearing surfaces) */
    --tl-accent-gold-bright: #d4af37;

    /* BACKGROUND COLORS (inverted - lighter = elevated) */
    --tl-bg-base: #f5f5f5;
    --tl-bg-elevated: #ffffff;
    --tl-bg-elevated-1: #f8f8f8;
    --tl-bg-elevated-2: #fafafa;
    --tl-bg-elevated-3: #f0f0f0;
    --tl-bg-input: #ffffff;
    --tl-bg-hover: #e8e8e8;
    --bg-tertiary: #f5f5f5;
    --bg-primary: #ffffff;

    /* BORDER COLORS */
    --tl-border-subtle: #e0e0e0;
    --tl-border-default: #d0d0d0;
    --tl-border-strong: #bbb;
    --tl-border-focus: var(--tl-accent-primary);

    /* TEXT COLORS */
    --tl-text-primary: #1a1a1a;
    --tl-text-secondary: #333;
    --tl-text-muted: #666;
    --tl-text-subtle: #888;
    --tl-text-inverse: #ffffff;

    /* STATE COLORS */
    --tl-success: #2e7d32;
    --tl-error: #c62828;
    --tl-error-bg: #ffebee;
    --tl-error-border: #ef9a9a;
    --tl-warning: #f9a825;
    --tl-info: #1565c0;

    /* COMPONENT-SPECIFIC */
    --tl-card-bg: var(--tl-bg-elevated);
    --tl-card-border: var(--tl-border-subtle);
    --tl-card-header-bg: linear-gradient(135deg, var(--tl-bg-elevated-3) 0%, var(--tl-bg-elevated) 100%);

    /* INTERACTIVE ELEMENTS */
    --tl-button-primary-bg: var(--tl-accent-primary);
    /* darken on hover (filled button) so white text keeps >=4.5:1 (#6b5410 => 7.24:1) */
    --tl-button-primary-hover: var(--tl-accent-primary-dark);
    --tl-button-primary-text: var(--tl-text-inverse);
    --tl-button-secondary-bg: var(--tl-bg-elevated-3);
    --tl-button-secondary-hover: var(--tl-bg-hover);
    --tl-button-secondary-text: var(--tl-text-secondary);

    /* RATING SYSTEM */
    --tl-rating-fill: var(--tl-accent-primary);
    --tl-rating-empty: #ddd;
    --tl-rating-hover: var(--tl-accent-primary-light);

    /* SHADOWS (lighter for light theme) */
    --tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --tl-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --tl-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);

    /* ========================================================================
       BACKWARDS COMPATIBILITY MAPPINGS
       ======================================================================== */
    --primary-color: var(--tl-accent-primary);
    --primary-hover: var(--tl-accent-primary-light);
    --bg-secondary: var(--tl-bg-elevated-2);
    --bg-card: var(--tl-bg-elevated);
    --bg-hover: var(--tl-bg-hover);
    --border-color: var(--tl-border-default);
    --text-primary: var(--tl-text-primary);
    --text-secondary: var(--tl-text-secondary);
    --text-muted: var(--tl-text-muted);

    /* UX Component Mappings */
    --ux-bg: var(--tl-bg-base);
    --ux-text: var(--tl-text-primary);
}