/**
 * Theme Variables
 * CSS Custom Properties for the theming system
 * These are set dynamically via JavaScript based on org settings
 */

:root {
    /* ===== BRAND COLORS (Dynamic - set by theme system) ===== */
    --color-primary: #FF7F50;  /* Default MTS orange, overridden per org */
    --color-primary-contrast: #000000;  /* Auto-computed for accessibility */
    --color-accent: #4A90E2;

    /* ===== PRIMARY BUTTONS ===== */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-bg-hover: #E6734A;  /* Computed lighter */
    --btn-primary-bg-active: #CC5F3D;  /* Computed darker */
    --btn-primary-text: var(--color-primary-contrast);
    --btn-primary-border: var(--color-primary);

    /* ===== LINKS ===== */
    --link: var(--color-primary);
    --link-hover: var(--btn-primary-bg-active);

    /* ===== FOCUS STATES ===== */
    --focus-ring: rgba(255, 127, 80, 0.4);  /* Primary @ 40% */
    --focus-ring-color: var(--color-primary);

    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, #FF9066 0%, #CC5F3D 100%);
    --gradient-primary-start: #FF9066;
    --gradient-primary-end: #CC5F3D;

    /* ===== CHIPS & BADGES (Primary) ===== */
    --chip-primary-bg: #FFB399;  /* Computed lighter */
    --chip-primary-text: #000000;  /* Auto-computed for accessibility */
    --chip-primary-border: rgba(255, 127, 80, 0.3);

    /* ===== SURFACE TINTS (subtle brand hints) ===== */
    --surface-primary-tint: rgba(255, 127, 80, 0.05);
    --surface-primary-tint-hover: rgba(255, 127, 80, 0.08);

    /* ===== CARD ACCENTS (for project cards, subtle brand integration) ===== */
    --card-accent: rgba(255, 127, 80, 0.24);  /* Primary @ 24% for borders */
    --card-accent-strong: rgba(255, 127, 80, 0.40);  /* Primary @ 40% for selected state */
    --card-icon-bg: #FFA580;  /* Computed lighter for icon tiles */
    --card-icon-fg: #000000;  /* Auto-computed contrast */

    /* ===== PROJECT DETAILS TOKENS (PR 3) ===== */
    --tab-active-ink: #FF7F50;  /* Tab active text color */
    --tab-active-underline: rgba(255, 127, 80, 0.6);  /* Tab active underline @ 60% */
    --chip-brand-bg: #FFAA8C;  /* Brand chip background (lighter) */
    --chip-brand-text: #000000;  /* Brand chip text (auto-contrast) */
    --timeline-dot: #FF7F50;  /* Timeline dot (solid) */
    --timeline-line: rgba(255, 127, 80, 0.40);  /* Timeline line @ 40% */
    --control-focus: rgba(255, 127, 80, 0.4);  /* Form control focus (= focus-ring) */
    --table-header-ink: rgba(255, 127, 80, 0.80);  /* Table header brand accent */
    --toast-brand-bg: #FF9973;  /* Toast brand background */
    --toast-brand-text: #000000;  /* Toast brand text (auto-contrast) */

    /* ===== GALLERY TOKENS (PR 4) ===== */
    --selection-ring: rgba(255, 127, 80, 0.45);  /* Selected photo outline */
    --overlay-brand: rgba(255, 127, 80, 0.24);  /* Image overlay tint */
    --toolbar-brand-bg: #FF7F50;  /* Bulk action toolbar background */
    --toolbar-brand-ink: #000000;  /* Bulk action toolbar text */
    --progress-brand: #FF7F50;  /* Upload progress bar */

    /* ===== FINANCE MODULE TOKENS (PR 5) ===== */
    --pill-brand-bg: #FFBB99;  /* Small pills (e.g., Taxable) - lighter */
    --pill-brand-text: #000000;  /* Pill text (auto-contrast) */
    --badge-brand-bg: #FFA580;  /* Brand badges */
    --badge-brand-text: #000000;  /* Badge text (auto-contrast) */
    --sticky-bar-brand-bg: #FF7F50;  /* Sticky action bar background */
    --sticky-bar-brand-text: #000000;  /* Sticky bar text (auto-contrast) */

    /* ===== ADMIN PANELS TOKENS (PR 6) ===== */
    --section-accent-bar: rgba(255, 127, 80, 0.35);  /* Section header underline */
    --switch-brand-on: #FF7F50;  /* Toggle switch ON state */
    --switch-brand-handle: #000000;  /* Switch handle (auto-contrast) */
    --checkbox-brand: #FF7F50;  /* Checkbox checked state */
    --radio-brand: #FF7F50;  /* Radio button selected state */

    /* ===== NEUTRAL COLORS (Not changed in this PR) ===== */
    --surface: #ffffff;
    --surface-raised: #f9fafb;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --text: #111827;
    --text-muted: #6b7280;

    /* ===== STATUS COLORS (Not changed in this PR) ===== */
    --status-success: #10b981;
    --status-success-bg: #d1fae5;
    --status-success-text: #065f46;

    --status-warning: #f59e0b;
    --status-warning-bg: #fef3c7;
    --status-warning-text: #92400e;

    --status-danger: #ef4444;
    --status-danger-bg: #fee2e2;
    --status-danger-text: #991b1b;

    --status-info: #3b82f6;
    --status-info-bg: #dbeafe;
    --status-info-text: #1e40af;
}

/* ===== UTILITY CLASSES (use tokens) ===== */

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
}

.btn-primary:hover {
    background: var(--btn-primary-bg-hover);
}

.btn-primary:active {
    background: var(--btn-primary-bg-active);
}

.btn-primary:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.link-primary {
    color: var(--link);
}

.link-primary:hover {
    color: var(--link-hover);
}

.bg-gradient-primary {
    background: var(--gradient-primary);
}

.chip-primary {
    background: var(--chip-primary-bg);
    color: var(--chip-primary-text);
    border: 1px solid var(--chip-primary-border);
}

.focus-ring-primary:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--focus-ring);
}