/*
 * Symfonet tokens: the Zublime UI/UX guide (docs/guia-ui-ux.md, annex A) with the
 * adaptation in docs/decisiones-ui.md. Components read these variables only.
 *
 * - 60 % cold neutrals and the states: the guide's values, unchanged.
 * - 30 % accent: the Symfonet logo green (#59B265) instead of Zublime's indigo,
 *   with dark text on it (white on it is 2.6:1). --accent-text is the green for
 *   links and selected items (4.97:1 or more on every light surface) and
 *   --accent-mark the fill of checked boxes, switches and other indicators (3:1+).
 * - 10 % live colour: the guide's turquoise, unchanged.
 *
 * Three cases: light (bare :root), dark chosen in Apariencia
 * (:root[data-theme="dark"]) and "Sistema" with a dark device (the media query,
 * which repeats the dark block exactly; TokensTest keeps them equal).
 */
:root {
    color-scheme: light;
    /* neutrals */
    --canvas: #F6F7FA; --surface: #FFFFFF; --sunken: #F1F3F7; --hover: #EBEEF3;
    --border: #E1E5EC; --border-strong: #C7CEDA; --border-control: #858EA1;
    --text: #161B2B; --text-2: #3E4659; --text-3: #626C81; --text-disabled: #A3ABBA;
    /* accent (Symfonet green) */
    --accent: #59B265; --accent-hover: #4CA65A; --on-accent: #0B0F1D;
    --accent-text: #267437; --accent-soft: #E9F5EB; --accent-mark: #267437; --on-accent-mark: #FFFFFF;
    --focus: #267437;
    --danger: #C62828; --on-danger: #FFFFFF; --scrim: rgb(11 15 29 / .45);
    /* states */
    --ok-text: #15803D;    --ok-fill: #16A34A;    --ok-soft: #DCFCE7;
    --warn-text: #B45309;  --warn-fill: #D97706;  --warn-soft: #FEF3C7;
    --error-text: #C62828; --error-fill: #DC2626; --error-soft: #FEE2E2;
    --info-text: #1D4ED8;  --info-fill: #3B82F6;  --info-soft: #DBEAFE;
    --idle-text: #3E4659;  --idle-fill: #858EA1;  --idle-soft: #EEF1F5;
    /* live colour (turquoise) */
    --active-text: #00785C; --active-fill: #00A87D; --active-soft: #E9FBF5;
    --live-text: #00785C; --live-fill: #00A87D; --chart-1: #00A87D;
    /* chart series (decisiones-ui.md: six series and "Otros") */
    --series-1: #00A87D; --series-2: #4631C2; --series-3: #7A8B00; --series-4: #C44DE9;
    --series-5: #A0522D; --series-6: #2E6F8E; --series-other: #858EA1;
    /* elevation */
    --shadow-1: 0 1px 2px rgb(11 15 29 / .06), 0 4px 12px rgb(11 15 29 / .08);
    --shadow-2: 0 12px 32px rgb(11 15 29 / .18);
    /* type */
    --font-display: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --t-xs: .75rem; --t-sm: .8125rem; --t-base: .875rem; --t-md: 1rem; --t-lg: 1.125rem;
    --t-xl: 1.375rem; --t-2xl: 1.75rem;
    /* space (4 px base) */
    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem;
    --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem;
    /* radii */
    --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-full: 999px;
    /* motion */
    --t-fast: 120ms; --t-base-motion: 180ms; --t-slow: 240ms; --ease: cubic-bezier(.2, 0, 0, 1);
    /* density (compact on desktop) */
    --control-h: 2rem; --row-h: 2.25rem; --cell-px: .75rem; --field-font: var(--t-base);
    /* the shell */
    --sidebar-w: 240px; --rail-w: 64px; --topbar-h: 56px; --bottombar-h: 56px;
    /* native pieces drawn as images: the select chevron and the close button */
    --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233E4659' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --close-x: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233E4659'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    /* checkbox, radio and switch marks */
    --check-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --indeterminate-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --radio-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23FFFFFF'/%3e%3c/svg%3e");
    --switch-off-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23858EA1'/%3e%3c/svg%3e");
    --switch-on-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
    /* third-party logos sit on a light plate in both themes (MAR-5); code highlighting */
    --logo-plate: #FFFFFF;
    --code-tag: #6B3FA0; --code-attr: #2E6F8E; --code-value: #A0522D; --code-comment: #677186;
}

/* Dark chosen in Apariencia. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #0B0F1D; --surface: #161C2C; --sunken: #0F1422; --hover: #1E2537;
    --border: #222B3E; --border-strong: #2F3A52; --border-control: #6E7A93;
    --text: #E6E9F2; --text-2: #C3CAD8; --text-3: #A7B2C6; --text-disabled: #5F6880;
    --accent: #59B265; --accent-hover: #6CC07A; --on-accent: #0B0F1D;
    --accent-text: #7CC487; --accent-soft: #1A3324; --accent-mark: #59B265; --on-accent-mark: #0B0F1D;
    --focus: #7CC487;
    --danger: #F87171; --on-danger: #0B0F1D; --scrim: rgb(0 0 0 / .6);
    --ok-text: #4ADE80;    --ok-fill: #22C55E;    --ok-soft: #0F3A24;
    --warn-text: #FBBF24;  --warn-fill: #F59E0B;  --warn-soft: #3A2A07;
    --error-text: #F87171; --error-fill: #EF4444; --error-soft: #401717;
    --info-text: #60A5FA;  --info-fill: #3B82F6;  --info-soft: #13254A;
    --idle-text: #C3CAD8;  --idle-fill: #6E7A93;  --idle-soft: #1E2537;
    --active-text: #00C9AF; --active-fill: #00C9AF; --active-soft: #0B2E2D;
    --live-text: #00C9AF; --live-fill: #00C9AF; --chart-1: #00C9AF;
    --series-1: #00A87D; --series-2: #7462F0; --series-3: #8A9A1A; --series-4: #C04FE0;
    --series-5: #D08A55; --series-6: #55B0D0; --series-other: #6E7A93;
    --shadow-1: 0 0 0 1px #2F3A52;
    --shadow-2: 0 0 0 1px #2F3A52, 0 12px 40px rgb(0 0 0 / .5);
    --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C3CAD8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --close-x: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C3CAD8'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    /* checkbox, radio and switch marks */
    --check-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0F1D' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --indeterminate-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0F1D' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --radio-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B0F1D'/%3e%3c/svg%3e");
    --switch-off-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236E7A93'/%3e%3c/svg%3e");
    --switch-on-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230B0F1D'/%3e%3c/svg%3e");
    --logo-plate: #FFFFFF;
    --code-tag: #C4A7F5; --code-attr: #7CC3E0; --code-value: #E0A57C; --code-comment: #A7B2C6;
}

/* "Sistema": no choice, the device decides. Exactly the declarations of the block above. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --canvas: #0B0F1D; --surface: #161C2C; --sunken: #0F1422; --hover: #1E2537;
        --border: #222B3E; --border-strong: #2F3A52; --border-control: #6E7A93;
        --text: #E6E9F2; --text-2: #C3CAD8; --text-3: #A7B2C6; --text-disabled: #5F6880;
        --accent: #59B265; --accent-hover: #6CC07A; --on-accent: #0B0F1D;
        --accent-text: #7CC487; --accent-soft: #1A3324; --accent-mark: #59B265; --on-accent-mark: #0B0F1D;
        --focus: #7CC487;
        --danger: #F87171; --on-danger: #0B0F1D; --scrim: rgb(0 0 0 / .6);
        --ok-text: #4ADE80;    --ok-fill: #22C55E;    --ok-soft: #0F3A24;
        --warn-text: #FBBF24;  --warn-fill: #F59E0B;  --warn-soft: #3A2A07;
        --error-text: #F87171; --error-fill: #EF4444; --error-soft: #401717;
        --info-text: #60A5FA;  --info-fill: #3B82F6;  --info-soft: #13254A;
        --idle-text: #C3CAD8;  --idle-fill: #6E7A93;  --idle-soft: #1E2537;
        --active-text: #00C9AF; --active-fill: #00C9AF; --active-soft: #0B2E2D;
        --live-text: #00C9AF; --live-fill: #00C9AF; --chart-1: #00C9AF;
        --series-1: #00A87D; --series-2: #7462F0; --series-3: #8A9A1A; --series-4: #C04FE0;
        --series-5: #D08A55; --series-6: #55B0D0; --series-other: #6E7A93;
        --shadow-1: 0 0 0 1px #2F3A52;
        --shadow-2: 0 0 0 1px #2F3A52, 0 12px 40px rgb(0 0 0 / .5);
        --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C3CAD8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        --close-x: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C3CAD8'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
        /* checkbox, radio and switch marks */
        --check-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0F1D' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        --indeterminate-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B0F1D' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
        --radio-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230B0F1D'/%3e%3c/svg%3e");
        --switch-off-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236E7A93'/%3e%3c/svg%3e");
        --switch-on-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230B0F1D'/%3e%3c/svg%3e");
        --logo-plate: #FFFFFF;
        --code-tag: #C4A7F5; --code-attr: #7CC3E0; --code-value: #E0A57C; --code-comment: #A7B2C6;
    }
}

/* Comfortable density (Apariencia, forms and wizards) and touch screens (always). */
[data-density="comfortable"] { --control-h: 2.5rem; --row-h: 2.75rem; --cell-px: 1rem; }
@media (pointer: coarse) { :root { --control-h: 2.75rem; --row-h: 3rem; --cell-px: 1rem; --field-font: 1rem; } }

/* More contrast. */
@media (prefers-contrast: more) { :root { --border: var(--border-control); --text-3: var(--text-2); } }