/**
 * Theme CSS - Design System Variables
 *
 * Generated by Trencadis from YAML spec.
 * All other CSS files reference these variables, never define colors directly.
 */

:root {
    /* ==================== Layout ==================== */
    --navbar-height: 48px;
    --sidebar-width: 220px;
    --sidebar-collapsed-width: 64px;
    --toolbar-height: 64px;

    /* Alto de un control (botón, campo, selector) y del pequeño. */
    --control-height: 34px;
    --control-height-sm: 28px;
    --toolbar-control: var(--control-height);

    /* ==================== Color Palette ==================== */

    /* Backgrounds */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F6F6F7;
    --color-bg-tertiary: #EEEEF0;
    --color-bg-hover: #F2F2F4;
    --color-bg-active: #E6E6E9;

    /* Borders */
    --color-border-light: #E7E7EA;
    --color-border: #DCDCE0;
    --color-border-dark: #C4C4CA;

    /* Text */
    --color-text-primary: #18181B;
    --color-text-secondary: #4F4F57;
    --color-text-tertiary: #6B6B73;
    --color-text-muted: #9A9AA2;
    --color-text-on-accent: #FFFFFF;

    /* Accents */
    --color-accent: #B45309;
    --color-accent-rgb: 180, 83, 9;
    --color-accent-hover: #974608;
    --color-accent-light: #F8F0E9;
    --color-accent-dark: #773706;
    --color-secondary: #4F4F57;
    /* Nombres antiguos del acento. */
    --color-primary: var(--color-accent);
    --primary-color: var(--color-accent);
    --color-accent-bg: var(--color-accent-light);

    /* Semantic */
    --color-success: #1F7A4D;
    --color-success-light: #E7F3EC;
    --color-warning: #8A5A00;
    --color-warning-light: #FFF6DB;
    --color-warning-line: #E5C56B;
    --color-warning-text: color-mix(in srgb, var(--color-warning) 80%, black);
    --color-danger: #B42318;
    --color-danger-light: #FCEEEC;
    --color-danger-bg: var(--color-danger-light);
    --color-info: #2B5F99;
    --color-info-light: #EAF1F9;

    /* Velo de un diálogo y fondo de una pista. */
    --color-overlay: rgba(24, 24, 27, 0.45);
    --color-tooltip: #18181B;

    /* ==================== Shadows ==================== */
    /* Solo lo que flota (menús, diálogos, pistas) lleva sombra. */
    --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
    --shadow-md: 0 4px 14px rgba(24, 24, 27, 0.10);
    --shadow-lg: 0 16px 40px rgba(24, 24, 27, 0.18);

    /* ==================== Typography ==================== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: var(--font-family);
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 22px;
    --font-size-2xl: 28px;

    /* ==================== Border Radius ==================== */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 6px;
    /* Solo avatares y puntos de estado. */
    --radius-full: 9999px;
    --border-radius-sm: var(--radius-sm);

    /* ==================== Focus ==================== */
    --focus-ring: 0 0 0 2px var(--color-bg-primary), 0 0 0 4px rgba(var(--color-accent-rgb), 0.55);

    /* ==================== Transitions ==================== */
    --transition-fast: 0.12s ease;
    --transition-normal: 0.18s ease;
    --transition-slow: 0.25s ease;

    /* ==================== Components: Tabulator ==================== */
    --table-header-bg: var(--color-bg-secondary);
    --table-row-bg: var(--color-bg-primary);
    --table-row-alt-bg: var(--color-bg-primary);
    --table-border: var(--color-border-light);
    --table-text: var(--color-text-primary);
    --table-text-primary: var(--color-text-primary);
    --table-text-secondary: var(--color-text-secondary);
    --table-hover: var(--color-bg-hover);
    --table-selected: rgba(var(--color-accent-rgb), 0.08);
    --table-accent: var(--color-accent);
}