/* Tokens of the easydoct design system (tokens.json of the design system, 23/10/2026: its tokens.css export lags behind).
   CSS variables for hand-written CSS (layout, cards, plain HTML banners, SVG): no link with Kendo,
   whose easydoct.css theme carries its own variables (--kendo-color-*), compiled from the same design system.
   Primitives (greyscale-*, green-*, ...): the raw palette, not to be used directly in an interface.
   Semantic tokens (bg-*, text-*, border-*): what we use.
   The utility classes of the export (.tag, .badge, .popup-*) are not included: .badge conflicts with Bootstrap. */

:root {
    /***** PRIMITIVES *****/
    --greyscale-0: #ffffff;
    --greyscale-5: #f7f7f7;
    --greyscale-10: #ededed;
    --greyscale-20: #cbcbcb;
    --greyscale-30: #a9a9a9;
    --greyscale-40: #878787;
    --greyscale-50: #656565;
    --greyscale-60: #434141; /* The brand ink */
    --greyscale-999: #000000;
    --green-10: #f8ffeb;
    --green-30: #ccf86e;
    --green-40: #9dd328; /* The brand green */
    --orange-10: #fff6ee; /* No longer used by the state tokens since 05/10/2026 */
    --orange-30: #fea45c; /* No longer used by the state tokens since 05/10/2026 */
    --red-10: #ffeef1; /* No longer used by the state tokens since 05/10/2026 */
    --red-30: #ff4162; /* No longer used by the state tokens since 05/10/2026 */
    --blue-10: #ebf5ff; /* No longer used by the state tokens since 05/10/2026 */
    --blue-30: #6eb3f8; /* No longer used by the state tokens since 05/10/2026 */
    --blue-40: #2e86de; /* No longer used by the state tokens since 05/10/2026 */
    --success-40: #84be48; /* 2.2:1 on white, #434141 on it 4.6:1 */
    --success-10: #f3f8ed;
    --warning-40: #e9bc42; /* 1.8:1 on white, #434141 on it 5.7:1 */
    --warning-10: #fdf8ec;
    --error-40: #d85041; /* 4.1:1 on white, white text on it 4.1:1: backgrounds, borders, rules, icons */
    --error-50: #c33728; /* Error text: 5.4:1 on white, 4.8:1 on error-10 */
    --error-10: #fbeeec;
    --info-40: #93aad1; /* 2.4:1 on white, #434141 on it 4.3:1 */
    --info-10: #f4f6fa;
    --formation-40: #9a56bf; /* Reserved for training and support content */
    --formation-10: #f5eef9;
    --formation-text: #74408f;
    --easaia-40: #d6458f; /* Reserved for the Assistant IA product, always with the sparkle pictogram */
    --easaia-10: #fbecf4;
    --easaia-text: #a1346b;
    --logicsante-blue: #00418c;
    --info-text: #4a5568; /* Blue-grey readable as text */
    --brand-text: #4e6a14; /* Brand green readable as text */

    /***** BACKGROUNDS *****/
    --bg-neutral-primary: var(--greyscale-0); /* Page and card background */
    --bg-neutral-secondary: var(--greyscale-10); /* Secondary zone, grouped fields, hover */
    --bg-neutral-page: var(--greyscale-5); /* Page background behind the cards (statistics, settings) */
    --bg-neutral-tertiary: var(--greyscale-20);
    --bg-neutral-disabled: var(--greyscale-30);
    --bg-neutral-inverse-primary: var(--greyscale-999);
    --bg-neutral-inverse-secondary: var(--greyscale-60);
    --bg-neutral-inverse-tertiary: var(--greyscale-50);
    --bg-brand-primary: var(--green-40); /* Main button, active state. Text on it: text-neutral-primary */
    --bg-brand-secondary: var(--green-30);
    --bg-brand-tertiary: var(--green-10);
    --bg-success-subtle: var(--success-10);
    --bg-success-bold: var(--success-40);
    --bg-warning-subtle: var(--warning-10);
    --bg-warning-bold: var(--warning-40);
    --bg-error-subtle: var(--error-10);
    --bg-error-bold: var(--error-40);
    --bg-info-subtle: var(--info-10);
    --bg-info-bold: var(--info-40);

    /***** TEXTS *****/
    --text-neutral-primary: var(--greyscale-60); /* Body text, titles */
    --text-neutral-secondary: var(--greyscale-50); /* Labels, metadata */
    --text-neutral-tertiary: var(--greyscale-50);
    --text-neutral-disabled: var(--greyscale-40);
    --text-neutral-inverse-primary: var(--greyscale-0);
    --text-neutral-inverse-secondary: var(--greyscale-10);
    --text-neutral-inverse-tertiary: var(--greyscale-10);
    --text-brand-primary: var(--green-40); /* 1.8:1 on white: decorative icons only */
    --text-brand-inverse: var(--green-10);
    --text-brand-strong: #7ea920; /* Secondary button of a popup; 2.8:1 on white, to be decided */
    --text-success-primary: var(--success-40);
    --text-success-bold: var(--success-10);
    --text-warning-primary: var(--warning-40);
    --text-warning-inverse: var(--warning-10);
    --text-error-primary: var(--error-50); /* 5.4:1 on white, 4.8:1 on bg-error-subtle; the border of a field in error stays error-40 */
    --text-error-inverse: var(--error-10);
    --text-info-primary: var(--info-40);
    --text-info-inverse: var(--info-10);

    /***** BORDERS AND FOCUS RINGS *****/
    --border-divider-brand: rgba(157, 211, 40, 0.55); /* Rule under the header of a popup */
    --border-divider-error: var(--error-40); /* Rule under the header of a destructive action popup */
    --border-control: var(--greyscale-40); /* Fields, Yes / No choice buttons: 3.6:1 on white */
    --border-control-hover: var(--greyscale-50); /* Hover of a field, a radio or a checkbox */
    --border-subtle: var(--greyscale-10); /* Subtle separators */
    --focus-ring-neutral: rgba(67, 65, 65, 0.25);
    --focus-ring-brand: rgba(157, 211, 40, 0.4);

    /***** COMPONENTS *****/
    --switch-default-on: #93aad1;
    --switch-success-on: #84be48;
    --switch-warning-on: #e9bc42;
    --switch-danger-on: #d85041;
    --switch-off: #e3e8ef;
    --switch-disabled: #eef1f7;
    --radio-border: var(--greyscale-40);
    --radio-checked: var(--info-40);
    --checkbox-border: var(--radio-border);
    --checkbox-checked: var(--radio-checked);
    --tag-update-bg: var(--info-10);
    --tag-update-text: var(--info-text);
    --tag-easydoct-bg: var(--green-10);
    --tag-easydoct-text: var(--brand-text);
    --tag-formation-bg: var(--formation-10);
    --tag-formation-text: var(--formation-text);
    --tag-ia-bg: var(--easaia-10);
    --tag-ia-text: var(--easaia-text);
    --badge-new-formation: var(--formation-40); /* « Nouveau » badge in a training context only */
    --grid-row-hover: #f6f6f6;
    --grid-sorted: #fafafa; /* Sorted column */
    --grid-selected: #eff2f8;
    --grid-selected-hover: #e7ecf5;
    --grid-filtered: rgba(67, 65, 65, 0.07); /* Veil of a filtered column, over the row background */
    --grid-worklist-alt: var(--greyscale-5); /* Every other row of a worklist (ed-grid-worklist) */
    --nav-section-hover: #e4e4e4; /* Hover of a side menu section header */
    --pager-current-bg: var(--green-10); /* Current page, bordered with --bg-brand-primary */
    --icon-destructive: var(--error-40); /* Destructive action icon (trash, log out), except on a colored background */

    /***** SPACING *****/
    --space-popup-x: 48px;
    --space-popup-header-x: 40px;
    --space-popup-y: 28px;
    --space-actions-gap: 24px;
    --space-page-x: 40px; /* Settings page */
    --space-section-x: 32px;
    --space-section-y: 24px;
    --space-field-gap: 24px;
    --space-label-gap: 8px;
    --field-width: 560px;
    --control-height-sm: 32px; /* Kendo size "small": dense toolbar, table, pager */
    --control-height-md: 42px; /* Kendo size "medium", the default: every field and button outside popups */
    --control-height-lg: 48px; /* Kendo size "large": on hold, no use today */

    /***** RADII AND SHADOWS *****/
    --radius-control: 6px;
    --radius-checkbox: 4px;
    --radius-tag: 8px;
    --radius-section: 16px;
    --radius-popup: 24px;
    --radius-full: 9999px;
    --shadow-popup: 0 12px 40px rgba(67, 65, 65, 0.16);
    --shadow-dropdown: 0 6px 20px rgba(67, 65, 65, 0.14); /* Open list, filter menu, calendar popup */
    --gradient-ia-signature: linear-gradient(135deg, #d6458f 0%, #00418c 100%); /* Assistant IA presentation visuals only */

    /***** TYPOGRAPHY *****/
    --font-sans: "Open Sans", OpenSans, sans-serif;
    --text-popup-title: 400 22px/1.35 var(--font-sans);
    --text-popup-body: 400 15px/1.6 var(--font-sans);
    --text-popup-note: 400 13px/1.5 var(--font-sans);
    --text-popup-button: 400 17px/1.2 var(--font-sans);
    --text-tag: 400 15px/1 var(--font-sans);
    --text-badge: 600 11px/1 var(--font-sans);
    --text-page-title: 400 22px/1.35 var(--font-sans);
    --text-section-title: 600 17px/1.4 var(--font-sans);
    --text-field-label: 600 14px/1.4 var(--font-sans); /* Field label, title of a radio / checkbox group */
    --text-field-value: 400 15px/1.5 var(--font-sans); /* Field value, radio / checkbox label, table cell */
    --text-field-help: 400 13px/1.5 var(--font-sans); /* Help under a field, radio / checkbox description */
}