/**
 * Design tokens — fuente única de colores, espaciado y tipografía.
 * Usado por portal.css, app.css y admin.css (Bootstrap 5).
 */
:root {
    /* Marca Autoescuela */
    --ae-color-primary: #ef8719;
    --ae-color-primary-hover: #d97610;
    --ae-color-secondary: #000000;
    --ae-color-secondary-soft: #343a40;
    --ae-color-tertiary: #00abf6;
    --ae-color-bg: #f8f8f8;
    --ae-color-surface: #ffffff;
    --ae-color-surface-soft: #eeeeee;
    --ae-color-text: #1a1c1c;
    --ae-color-text-muted: #554335;
    --ae-color-border: #dcc2af;
    --ae-color-focus: rgba(239, 135, 25, 0.18);
    --ae-sidebar-bg: var(--ae-color-secondary);
    --ae-sidebar-link: rgba(255, 255, 255, 0.82);

    /* Tokens portal (Material / institucional) */
    --color-background: #f9f9f9;
    --color-surface: #f9f9f9;
    --color-surface-bright: #f9f9f9;
    --color-surface-dim: #dadada;
    --color-surface-variant: #e2e2e2;
    --color-surface-container: #eeeeee;
    --color-surface-container-low: #f3f3f3;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-high: #e8e8e8;
    --color-surface-container-highest: #e2e2e2;
    --color-on-background: #1a1c1c;
    --color-on-surface: #1a1c1c;
    --color-on-surface-variant: #554335;
    --color-outline: #887363;
    --color-outline-variant: #dcc2af;
    --color-primary: #904d00;
    --color-on-primary: #ffffff;
    --color-primary-container: #ef8719;
    --color-on-primary-container: #582d00;
    --color-primary-fixed: #ffdcc3;
    --color-primary-fixed-dim: #ffb77d;
    --color-on-primary-fixed: #2f1500;
    --color-on-primary-fixed-variant: #6e3900;
    --color-inverse-primary: #ffb77d;
    --color-secondary: #5e5e5e;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #e2e2e2;
    --color-on-secondary-container: #646464;
    --color-secondary-fixed: #e2e2e2;
    --color-secondary-fixed-dim: #c6c6c6;
    --color-on-secondary-fixed: #1b1b1b;
    --color-on-secondary-fixed-variant: #474747;
    --color-tertiary: #006492;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #00abf6;
    --color-on-tertiary-container: #003c5a;
    --color-tertiary-fixed: #cae6ff;
    --color-tertiary-fixed-dim: #8cceff;
    --color-on-tertiary-fixed: #001e2f;
    --color-on-tertiary-fixed-variant: #004b6f;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-inverse-surface: #2f3131;
    --color-inverse-on-surface: #f1f1f1;
    --color-surface-tint: #904d00;

    /* Espaciado */
    --space-xs: 4px;
    --space-sm: 12px;
    --space-base: 8px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
    --space-gutter: 24px;
    --space-margin-mobile: 16px;
    --space-margin-desktop: 40px;
    --layout-max-width: 1750px;
    --layout-max-width-form: 720px;
    --layout-max-width-form-wide: 1120px;
    --layout-max-width-medium: 960px;

    /* Sidebar panel */
    --ae-sidebar-width-expanded: 260px;
    --ae-sidebar-width-collapsed: 5.5rem;

    /* Radios */
    --radius-default: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.25rem;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-xs: 0 1px 2px rgba(26, 28, 28, 0.04);
    --shadow-sm: 0 2px 8px rgba(26, 28, 28, 0.06);
    --shadow-md: 0 8px 24px rgba(26, 28, 28, 0.08);
    --shadow-lg: 0 16px 40px rgba(26, 28, 28, 0.1);
    --shadow-card: 0 4px 20px rgba(88, 45, 0, 0.06);
    --shadow-card-hover: 0 8px 28px rgba(239, 135, 25, 0.12);
    --shadow-inset-field: inset 0 0 0 1px rgba(136, 115, 99, 0.18);

    /* Tipografía */
    --font-family: 'Work Sans', 'Figtree', system-ui, sans-serif;
    --font-size-body-sm: 14px;
    --font-line-body-sm: 20px;
    --font-size-body-md: 16px;
    --font-line-body-md: 24px;
    --font-size-body-lg: 18px;
    --font-line-body-lg: 28px;
    --font-size-label-md: 12px;
    --font-line-label-md: 16px;
    --font-size-headline-md: 24px;
    --font-line-headline-md: 32px;
    --font-size-headline-lg: 30px;
    --font-line-headline-lg: 36px;

    /* Efectos */
    --shadow-ambient: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-focus-glow: 0 0 0 2px rgba(239, 135, 25, 0.1);
    --border-focus-color: var(--color-primary-container);

    /* Scrollbar (general + contenedores) */
    --scrollbar-size: 10px;
    --scrollbar-track: var(--color-surface-container-low);
    --scrollbar-thumb: var(--ae-color-primary);
    --scrollbar-thumb-hover: var(--ae-color-primary-hover);
    --scrollbar-thumb-active: #c56a0d;
}