@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* Primitive color tokens */
  --color-neutral-950: #0A0A0B;
  --color-neutral-900: #161617;
  --color-neutral-850: #262628;
  --color-neutral-text-primary: #FFFDF6;
  --color-neutral-text-secondary: #A8A8A8;
  --color-neutral-text-muted: rgba(255, 253, 246, 0.54);
  --color-neutral-disabled-text: rgba(255, 253, 246, 0.24);
  --color-neutral-disabled-background: rgba(255, 253, 246, 0.015);
  --color-neutral-disabled-border: rgba(255, 253, 246, 0.04);
  --color-neutral-border-subtle: rgba(255, 255, 255, 0.07);
  --color-neutral-border-strong: #7A7A80;
  --color-orange-500: #EE4408;
  --color-orange-600: #d83a06;
  --color-orange-700: #C83205;
  --color-orange-primary-border: rgba(255, 253, 246, 0.16);
  --color-red-400: #F87171;
  --color-green-400: #4ADE80;
  --color-amber-400: #EBB04E;

  /* Semantic color tokens */
  --color-background: var(--color-neutral-950);
  --color-surface: var(--color-neutral-900);
  --color-surface-raised: var(--color-neutral-850);
  --color-text-primary: var(--color-neutral-text-primary);
  --color-text-secondary: var(--color-neutral-text-secondary);
  --color-text-muted: var(--color-neutral-text-muted);
  --color-disabled-text: var(--color-neutral-disabled-text);
  --color-disabled-background: var(--color-neutral-disabled-background);
  --color-disabled-border: var(--color-neutral-disabled-border);
  --color-border-subtle: var(--color-neutral-border-subtle);
  --color-border-strong: var(--color-neutral-border-strong);
  --color-accent-primary: var(--color-orange-500);
  --color-accent-hover: var(--color-orange-600);
  --color-accent-active: var(--color-orange-700);
  --color-accent-primary-border: var(--color-orange-primary-border);
  --color-danger: var(--color-red-400);
  --color-success: var(--color-green-400);
  /* warning = état "à traiter" (mesure en retard), distinct de l'orange accent (CTA) et du danger (erreur) */
  --color-warning: var(--color-amber-400);
  --color-focus-border: rgba(255, 253, 246, 0.72);

  /* Primitive font tokens */
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Primitive type size tokens */
  --type-display-size: 2.5rem;
  --type-h1-size: 1.75rem;
  --type-h2-size: 1.375rem;
  --type-h3-size: 1.125rem;
  --type-body-lg-size: 1rem;
  --type-body-md-size: 0.875rem;
  --type-body-sm-size: 0.8125rem;
  --type-label-size: 0.75rem;
  --type-caption-size: 0.75rem;
  --type-data-value-size: 2.25rem;
  --type-data-label-size: 0.6875rem;

  /* Primitive type line-height tokens */
  --type-display-line: 3rem;
  --type-h1-line: 2.125rem;
  --type-h2-line: 1.75rem;
  --type-h3-line: 1.5rem;
  --type-body-lg-line: 1.5rem;
  --type-body-md-line: 1.25rem;
  --type-body-sm-line: 1.125rem;
  --type-label-line: 1rem;
  --type-caption-line: 1rem;
  --type-data-value-line: 2.25rem;
  --type-data-label-line: 0.875rem;

  /* Primitive type weight tokens */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  /* Primitive letter spacing tokens */
  --letter-spacing-default: 0;
  --letter-spacing-tight: -0.02em; /* grands chiffres / display : resserre la masse (feel data premium) */
  --letter-spacing-label: 0.06em;  /* micro-labels MAJUSCULES : espacés = refined (overline, en-têtes) */

  /* Primitive spacing tokens */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Semantic spacing tokens */
  --space-card-padding: var(--space-24);
  --space-label-gap: var(--space-8);      /* un titre/label → le texte qu'il introduit (paragraphe/description) : collés = une unité de sens. Plus serré que element-gap. */
  --space-element-gap: var(--space-12);
  --space-section-gap: var(--space-32);
  --space-page-desktop: var(--space-32);
  --space-page-mobile: var(--space-16);

  /* Primitive radius tokens */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Primitive border tokens */
  --border-width-default: 1px;

  /* Semantic border tokens */
  --border-subtle: var(--border-width-default) solid var(--color-border-subtle);
  --border-strong: var(--border-width-default) solid var(--color-border-strong);

  /* Focus tokens */
  --border-focus: var(--border-width-default) solid var(--color-focus-border);
  --focus-glow: 0 0 0 3px rgba(255, 253, 246, 0.08);

  /* Opacité d'un élément en cours de déplacement (drag ghost) — distinct du disabled (0.3). */
  --opacity-dragging: 0.5;

  /* Largeur du panneau latéral détail de tâche (to-do) — repris du legacy .side-panel (560). */
  --taskpanel-width: 560px;

  /* Z-index — layering des overlays flottants (Modal backdrop, Toast, Tooltip)
     au-dessus du contenu de page. Sans ça, un contenu positionné avec z-index
     (ex : dots du stepper) transperce le backdrop. */
  --z-overlay: 1000;

  /* Primitive shadow tokens */
  --shadow-none: none;
  --shadow-sm: 0 4px 12px -4px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.55);

  /* Primitive motion tokens */
  --motion-duration-fast: 140ms;
  --motion-duration-base: 220ms;
  --motion-duration-slow: 360ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Semantic motion tokens */
  --motion-transition-default: border-color var(--motion-duration-fast) var(--motion-ease-out),
    background-color var(--motion-duration-fast) var(--motion-ease-out),
    color var(--motion-duration-fast) var(--motion-ease-out);
  --motion-transition-panel: border-color var(--motion-duration-base) var(--motion-ease-out),
    background-color var(--motion-duration-base) var(--motion-ease-out),
    transform var(--motion-duration-base) var(--motion-ease-out),
    opacity var(--motion-duration-base) var(--motion-ease-out);
  --motion-transition-view: transform var(--motion-duration-slow) var(--motion-ease-out),
    opacity var(--motion-duration-slow) var(--motion-ease-out);

  /* Component tokens: Container */
  --container-background: var(--color-surface);
  --container-border: var(--border-subtle);
  --container-border-active: var(--border-strong);
  --container-radius: var(--radius-xl);
  --container-padding: var(--space-card-padding);
  --container-shadow: var(--shadow-none);
  --container-transition: var(--motion-transition-panel);

  /* Component tokens: Card */
  --card-background: var(--container-background);
  --card-border: var(--container-border);
  --card-border-active: var(--container-border-active);
  --card-radius: var(--container-radius);
  --card-padding: var(--container-padding);
  --card-shadow: var(--container-shadow);
  --card-transition: var(--container-transition);
  /* Carte DÉFINIE (partagé kpi-card + chart + …) : arête 10% + filet lumineux haut
     + ombre douce → se détache du fond. Dérivé de l'encre (color-mix), zéro valeur en dur. */
  --card-border-defined: var(--border-width-default) solid color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  --card-shadow-defined: var(--shadow-sm), inset 0 var(--border-width-default) 0 color-mix(in srgb, var(--color-text-primary) 5%, transparent);

  /* Component tokens: Button */
  --button-height-lg: var(--space-64);
  --button-height-sm: calc(var(--space-32) + var(--space-8));   /* 40 — vraie taille « small » (secondaire), pas 48 */
  --button-height-xs: var(--space-24);
  --button-height-mobile: var(--space-48);
  --button-padding-inline-lg: var(--space-32);
  --button-padding-inline-sm: var(--space-16);
  --button-padding-inline-xs: var(--space-8);
  --button-padding-inline-mobile: var(--space-24);
  --button-radius-default: var(--radius-xl);
  --button-radius-pill: var(--radius-full);
  --button-font-size: var(--type-body-lg-size);
  --button-font-size-sm: var(--type-body-md-size);   /* 14 — small = plus discret que lg (16) */
  --button-font-size-xs: var(--type-label-size);
  --button-line-height: var(--type-body-lg-line);
  --button-font-weight: var(--font-weight-bold);
  --button-font-weight-sm: var(--font-weight-medium);   /* small = medium (secondaire), lg reste bold (CTA) */
  --button-font-weight-xs: var(--font-weight-medium);
  --button-gap: var(--space-8);
  --button-gap-xs: var(--space-4);
  --button-icon-size-xs: var(--space-12);
  --button-transition: var(--motion-transition-default);

  --button-primary-background: var(--color-accent-primary);
  --button-primary-background-hover: var(--color-accent-hover);
  --button-primary-background-active: var(--color-accent-active);
  --button-primary-text: var(--color-text-primary);
  --button-primary-border: var(--border-width-default) solid var(--color-accent-primary-border);

  --button-ghost-background: transparent;
  --button-ghost-background-hover: rgba(255, 253, 246, 0.06);
  --button-ghost-background-active: rgba(255, 253, 246, 0.10);
  --button-ghost-text: var(--color-text-primary);
  --button-ghost-border: var(--border-width-default) solid rgba(255, 253, 246, 0.44);
  --button-ghost-border-hover: var(--border-width-default) solid rgba(255, 253, 246, 0.60);

  --button-inverse-background: var(--color-text-primary);
  --button-inverse-background-hover: #DDDBD6;
  --button-inverse-background-active: #BFBDBA;
  --button-inverse-text: var(--color-background);
  --button-inverse-border: var(--border-width-default) solid var(--color-text-primary);

  --button-subtle-background: transparent;
  --button-subtle-background-hover: var(--button-ghost-background-hover);
  --button-subtle-background-active: var(--button-ghost-background-active);
  --button-subtle-text: var(--color-text-muted);
  --button-subtle-text-hover: var(--color-text-secondary);
  --button-subtle-border: none;

  /* Secondary : action secondaire REMPLIE (surface-raised + bordure), distincte de ghost
     (contour transparent) et inverse (blanc). Ex : « Importer » à côté d'un CTA orange. */
  --button-secondary-background: var(--color-surface-raised);
  --button-secondary-background-hover: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-surface-raised));
  --button-secondary-background-active: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-surface-raised));
  --button-secondary-text: var(--color-text-primary);
  --button-secondary-border: var(--border-subtle);

  /* Danger : action destructive (Supprimer). Rouge = status color, pas l'accent orange.
     Bordé/restreint (pas de fill plein) — cohérent avec la retenue du système. */
  --button-danger-text: var(--color-danger);
  --button-danger-background: transparent;
  --button-danger-border: var(--border-width-default) solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  --button-danger-background-hover: color-mix(in srgb, var(--color-danger) 12%, transparent);
  --button-danger-border-hover: var(--border-width-default) solid var(--color-danger);

  --button-disabled-opacity: 0.3;

  /* Component tokens: Input */
  --input-height: var(--space-48);
  --input-padding-inline: var(--space-12);
  --input-radius: var(--radius-md);
  --input-font-size: var(--type-body-md-size);
  --input-line-height: var(--type-body-md-line);
  --input-transition: var(--motion-transition-default);

  --input-background: var(--color-surface-raised);
  --input-text: var(--color-text-primary);
  --input-placeholder: var(--color-text-muted);
  --input-border: var(--border-subtle);
  --input-border-focus: var(--border-focus);

  --input-error-border: var(--border-width-default) solid var(--color-danger);
  --input-error-text: var(--color-danger);

  --input-disabled-text: var(--color-disabled-text);
  --input-disabled-background: var(--color-disabled-background);
  --input-disabled-border: var(--border-width-default) solid var(--color-disabled-border);

  /* Component tokens: Textarea (hérite des tokens Input) */
  --textarea-min-height: calc(var(--input-height) * 2);
  --textarea-padding-block: var(--space-12);

  /* Component tokens: Checkbox */
  --checkbox-size: var(--space-16);
  --checkbox-radius: var(--radius-xs);
  --checkbox-background: var(--input-background);
  --checkbox-border: var(--input-border);
  --checkbox-checked-background: var(--color-text-primary);
  --checkbox-checked-border: var(--border-width-default) solid var(--color-text-primary);
  --checkbox-mark-color: var(--color-background);
  --checkbox-mark-stroke-width: 2.5;
  --icon-stroke-width: 1.5;
  --icon-stroke-width-bold: 2;
  --checkbox-transition: var(--input-transition);
  --checkbox-radius-round: var(--radius-full);
  --checkbox-size-round: 14px;

  /* Component tokens: Radio */
  --radio-size: var(--space-16);
  --radio-background: var(--input-background);
  --radio-border: var(--input-border);
  --radio-checked-border: var(--border-width-default) solid var(--color-text-primary);
  --radio-dot-color: var(--color-text-primary);

  /* Component tokens: Toggle */
  --toggle-width: 36px;
  --toggle-height: 20px;
  --toggle-padding: 2px;
  --toggle-thumb-size: 16px;
  --toggle-track-off-background: var(--input-background);
  --toggle-track-off-border: var(--input-border);
  --toggle-track-on-background: var(--color-text-primary);
  --toggle-track-on-border: var(--border-width-default) solid var(--color-text-primary);
  --toggle-thumb-off-background: var(--color-text-secondary);
  --toggle-thumb-on-background: var(--color-background);
  --toggle-transition: var(--input-transition);

  /* Component tokens: Badge */
  --badge-padding-inline: var(--space-12);
  --badge-padding-block: var(--space-4);
  --badge-radius: var(--radius-sm);
  --badge-font-size: var(--type-data-label-size);
  --badge-line-height: var(--type-data-label-line);
  --badge-font-weight: var(--font-weight-bold);
  --badge-background: transparent;
  --badge-border: var(--border-subtle);
  --badge-text: var(--color-text-secondary);
  --badge-active-background: var(--color-text-primary);
  --badge-active-border: var(--border-width-default) solid var(--color-text-primary);
  --badge-active-text: var(--color-background);
  --badge-muted-text: var(--color-text-muted);

  /* Component tokens: Modal */
  --modal-backdrop: rgba(10, 10, 11, 0.85);
  --modal-background: var(--container-background);
  --modal-border: var(--border-subtle);
  --modal-radius: var(--container-radius);
  --modal-padding-inline: calc(var(--space-32) + var(--space-8));
  --modal-padding-block: var(--space-48);   /* plus d'air vertical (haut/bas) que l'inline — modal moins tassé */
  --modal-header-gap: var(--space-24);
  --modal-shadow: var(--shadow-lg);
  --modal-max-width: 480px;
  /* Hauteur max d'un modal long : ne dépasse jamais le viewport (marge = padding du backdrop).
     Comble le trou §6 (« ajouté quand un modal long apparaîtra » → l'effort-modal). */
  --modal-max-height: calc(100dvh - var(--space-page-desktop) * 2);
  --modal-close-size: var(--space-32);
  --modal-close-inset: var(--space-24);   /* croix pinnée au coin (inset < padding de contenu) — pas flottante à 40 */

  /* Component tokens: Tooltip */
  --tooltip-background: var(--color-surface-raised);
  --tooltip-text: var(--color-text-primary);
  --tooltip-border: var(--border-subtle);
  --tooltip-radius: var(--radius-sm);
  --tooltip-padding-inline: var(--space-8);
  --tooltip-padding-block: var(--space-4);
  --tooltip-font-size: var(--type-caption-size);
  --tooltip-line-height: var(--type-caption-line);
  --tooltip-shadow: var(--shadow-sm);
  --tooltip-max-width: 220px;
  --tooltip-arrow-size: 6px;
  --tooltip-gap: var(--space-8);
  --tooltip-trigger-size: var(--space-16);
  --tooltip-trigger-color: var(--color-text-muted);
  --tooltip-trigger-color-hover: var(--color-text-secondary);

  /* Component tokens: Tabs */
  --tabs-gap: var(--space-32);
  --tabs-padding-block: var(--space-12);
  --tabs-text: var(--color-text-secondary);
  --tabs-text-active: var(--color-text-primary);
  --tabs-icon-size: var(--space-16);

  /* Component tokens: Tabs — segmented */
  --tabs-segmented-padding: var(--space-4);
  --tabs-segmented-gap: var(--space-4);
  --tabs-segmented-background: var(--color-surface-raised);
  --tabs-segmented-radius: var(--radius-md);
  --tabs-segmented-tab-radius: var(--radius-sm);
  --tabs-segmented-tab-padding-inline: var(--space-16);
  --tabs-segmented-tab-padding-block: var(--space-8);
  --tabs-segmented-active-background: var(--color-text-primary);
  --tabs-segmented-active-text: var(--color-background);

  /* Component tokens: Progress bar */
  --progress-height: var(--space-8);
  --progress-radius: var(--radius-full);
  --progress-track-background: var(--color-surface-raised);
  --progress-fill-background: var(--color-text-primary);
  --progress-transition: transform var(--motion-duration-slow) var(--motion-ease-out);

  /* Component tokens: Table */
  --table-header-text: var(--color-text-secondary);
  --table-header-font-size: var(--type-data-label-size);
  --table-header-font-weight: var(--font-weight-bold);
  --table-cell-padding-block: var(--space-12);
  --table-cell-padding-inline: var(--space-16);
  --table-row-border: var(--border-subtle);
  --table-row-hover-background: var(--color-surface-raised);
  --table-cell-text: var(--color-text-primary);

  /* Component tokens: Toast */
  --toast-background: var(--container-background);
  --toast-border: var(--border-subtle);
  --toast-radius: var(--radius-md);
  --toast-padding: var(--space-16);
  --toast-gap: var(--space-12);
  --toast-shadow: var(--shadow-lg);
  --toast-max-width: 360px;
  --toast-icon-size: var(--space-16);
  --toast-close-size: var(--space-24);
  --toast-error-accent: var(--border-width-default) solid var(--color-danger);
  --toast-error-icon-color: var(--color-danger);
  --toast-success-accent: var(--border-width-default) solid var(--color-success);
  --toast-success-icon-color: var(--color-success);

  /* Component tokens: Empty state */
  --empty-state-icon-size: var(--space-48);
  --empty-state-icon-color: var(--color-text-muted);
  --empty-state-gap: var(--space-12);
  --empty-state-padding-block: var(--space-64);
  --empty-state-max-width: 360px;

  /* Component tokens: Empty state — inline (liste vide) */
  --empty-inline-height: var(--space-24);
  --empty-inline-gap: var(--space-12);
  --empty-inline-text-color: var(--color-text-muted);
  --empty-inline-text-color-hover: var(--color-text-secondary);

  /* Component tokens: Disclosure */
  --disclosure-size: var(--space-24);
  --disclosure-icon-color: var(--color-text-secondary);
  --disclosure-triangle-width: var(--space-4);
  --disclosure-triangle-height: 6px;

  /* Component tokens: Chart */
  --chart-header-border: var(--border-subtle);
  --chart-header-gap: var(--space-12);
  --chart-heading-gap: var(--space-8);
  --chart-shell-min-height: 300px;
  --chart-axis-font-size: var(--type-caption-size);
  --chart-grid-line: var(--color-border-subtle);
  --chart-axis-text: var(--color-text-muted);
  --chart-line-color: var(--color-text-primary);
  --chart-area-top: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  --chart-area-bottom: color-mix(in srgb, var(--color-text-primary) 2%, transparent);
  --chart-target-line: color-mix(in srgb, var(--color-text-primary) 42%, transparent);
  --chart-crosshair-line: color-mix(in srgb, var(--color-text-primary) 16%, transparent);
  --chart-last-value-bg: var(--color-text-primary);
  --chart-last-value-text: var(--color-background);
  --chart-line-width: 2;
  --chart-target-line-width: 1;
  --chart-crosshair-width: 1;
  --chart-point-radius: 3;
  --chart-marker-radius: 4;
  --chart-scale-margin: 0.02;
  /* Pastilles HTML survolables posées sur chaque mesure → bulle de valeur au survol */
  --chart-point-size: 14px;
  --chart-point-background: var(--color-text-primary);
  --chart-point-border: 2px solid var(--color-surface);
  --chart-point-hover-background: var(--color-accent-primary);
  --chart-point-hover-ring: 0 0 0 5px color-mix(in srgb, var(--color-accent-primary) 22%, transparent);
  --chart-point-label-background: var(--chart-last-value-bg);
  --chart-point-label-text: var(--chart-last-value-text);

  /* Component tokens: Calendar (skins @calendarjs/ce via its --lm-* custom properties) */
  --calendar-background: var(--container-background);
  --calendar-border: var(--container-border);
  --calendar-radius: var(--container-radius);
  --calendar-shadow: var(--shadow-lg);
  --calendar-padding: var(--space-16);
  --calendar-max-width: 320px;
  --calendar-dow-color: var(--color-text-muted);
  --calendar-day-color: var(--color-text-primary);
  --calendar-day-hover-background: var(--button-ghost-background-hover);
  --calendar-day-selected-background: var(--color-accent-primary);
  --calendar-day-selected-text: var(--color-text-primary);

  /* Component tokens: Calendar heatmap (tracker dots + popover) */
  --heatmap-day-label-color: var(--color-text-muted);
  --heatmap-cell-size: var(--space-24);
  --heatmap-cell-radius: var(--radius-sm);
  --heatmap-dot-size: 6px;
  --heatmap-dot-size-result: 8px;
  --heatmap-dot-color: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  --heatmap-dot-color-active: color-mix(in srgb, var(--color-text-primary) 58%, transparent);
  --heatmap-dot-color-result: var(--color-accent-primary);
  --heatmap-dot-ring-result: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
  --heatmap-dot-ring-today: 0 0 0 2px var(--color-surface), 0 0 0 3.5px color-mix(in srgb, var(--color-text-primary) 50%, transparent);
  --heatmap-band-background: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
  --heatmap-band-border: var(--border-width-default) solid var(--color-border-strong);
  --heatmap-popover-width: 260px;
  --heatmap-popover-background: var(--container-background);
  --heatmap-popover-border: var(--border-subtle);
  --heatmap-popover-radius: var(--radius-md);
  --heatmap-popover-shadow: var(--shadow-lg);
  --heatmap-popover-padding: var(--space-16);
  --heatmap-badge-result-color: var(--color-accent-primary);
  --heatmap-badge-result-background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
  --heatmap-badge-effort-color: var(--color-text-primary);
  --heatmap-badge-effort-background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
  --heatmap-schedule-block-background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  --heatmap-schedule-block-border-effort: var(--color-text-primary);
  --heatmap-schedule-block-border-result: var(--color-accent-primary);
  --heatmap-hour-track-line: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
  --heatmap-delta-background: color-mix(in srgb, var(--color-text-primary) 9%, transparent);
  --heatmap-delta-background-result: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);

  /* Component tokens: Timeline (liste de jalons dans un panneau — rail année/mois + cercles) */
  --timeline-padding: var(--card-padding);
  --timeline-head-gap: var(--space-16);         /* head → filet → liste */
  --timeline-row-gap: var(--space-24);          /* respiration entre jalons (aéré) */
  --timeline-list-height: 24.75rem;             /* hauteur FIXE = ~5 jalons content-driven (aéré) → carte constante ; scroll au-delà */
  --timeline-date-width: 2.25rem;               /* colonne année/mois (gauche) : juste la largeur de « 2026 » */
  --timeline-col-gap: var(--space-16);          /* date · cercle · contenu (resserré → date rattachée à sa rangée) */
  --timeline-content-gap: var(--space-4);       /* titre · sous-ligne (groupe serré) */
  /* Rail + cercles */
  --timeline-line-color: color-mix(in srgb, var(--color-text-primary) 12%, transparent);          /* segment futur = faible */
  --timeline-line-done-color: color-mix(in srgb, var(--color-text-primary) 38%, transparent);     /* segment parcouru (jusqu'au courant) = clair → lit la progression */
  --timeline-line-width: 2px;
  --timeline-dot-size: var(--space-16);                          /* pastille compacte = plus net/pro */
  --timeline-dot-ring-width: 1.5px;
  --timeline-dot-ring-color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);      /* futur = anneau gris muted (jamais blanc = pas fait) */
  --timeline-dot-fill: var(--card-background);                   /* futur = fond opaque = masque le connecteur (pas de trait qui traverse) */
  --timeline-dot-done-background: var(--color-text-primary);     /* jalon atteint = disque blanc plein */
  /* Textes */
  --timeline-year-color: var(--color-text-muted);
  --timeline-year-done-color: var(--color-text-primary);         /* année blanche sur l'atteint */
  --timeline-month-color: var(--color-text-muted);
  --timeline-jalon-color: var(--color-text-muted);
  /* Dot courant (double-dot : centre plein + anneau concentrique) */
  --timeline-dot-size-current: 0.875rem;                         /* centre un peu plus petit ; distinction via l'anneau */
  --timeline-dot-current-ring-gap: 2px;                          /* gap fond entre centre et anneau */
  --timeline-dot-current-ring-spread: 3px;                       /* épaisseur cumulée de l'anneau extérieur (fin) */
  /* Coche « validé » creusée */
  --timeline-check-width: 0.1875rem;
  --timeline-check-height: 0.375rem;
  --timeline-check-stroke: var(--timeline-dot-ring-width);       /* cohérent avec l'anneau (1.5px) */
  --timeline-check-inset-top: 46%;                               /* centrage optique de la coche */
  /* Scroll + fondu + interaction */
  --timeline-shell-max-width: 340px;
  --timeline-fade-size: var(--space-16);                         /* hauteur du fondu haut/bas au scroll */
  --timeline-mask-visible: #000;                                 /* couleur opaque du masque (fonctionnel) */
  --timeline-scrollbar-width: 6px;
  --timeline-scrollbar-thumb: color-mix(in srgb, var(--color-text-primary) 20%, transparent);
  --timeline-transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
  /* Rangée cliquable : padding de la zone de clic/surbrillance (bleed = marge négative égale) */
  --timeline-row-padding: var(--space-8);                        /* padding interne + débord vertical/droit */
  --timeline-row-lead-bleed: var(--space-4);                     /* débord gauche réduit → carte détachée du dot */

  /* Component tokens: Carte « Jalon actif » (stepper horizontal J1→Jn, réutilise les dots timeline) */
  --jalon-active-margin-top: var(--space-24);                    /* écart sous la timeline */
  --jalon-active-padding: var(--card-padding);
  --jalon-active-eyebrow-gap: var(--space-4);                    /* eyebrow → titre */
  --jalon-active-title-gap: var(--space-24);                     /* titre → stepper */
  --jalon-active-step-gap: var(--space-8);                       /* dot → label */

  /* Component tokens: SMART card (objectif — 5 lignes S/M/A/R/T) */
  --smart-shell-max-width: 320px;                               /* colonne étroite (panneau latéral) — valeur de preview */
  --smart-padding: var(--card-padding);
  --smart-head-gap: var(--space-12);                             /* head → filet → 1re ligne (compact) */
  --smart-row-padding: var(--space-12);                          /* respiration verticale de chaque ligne (compact) */
  --smart-col-gap: var(--space-12);                             /* lettre → texte */
  --smart-letter-width: 1.25rem;                                /* colonne lettre (juste 1 glyphe) */
  --smart-letter-size: var(--type-body-md-size);                /* lettre = taille texte (compact) */
  --smart-letter-line: var(--type-body-sm-line);                /* = ligne du texte → lettre alignée sur la 1re ligne */
  --smart-letter-weight: var(--font-weight-semibold);
  --smart-letter-color: var(--color-text-muted);                /* label structurel = démoté (le contenu prime) */
  /* Hiérarchie du contenu par importance réelle (Principe 3) : objectif > faits > justification.
     Le signal porte sur TAILLE + GRAISSE + COULEUR combinées (la couleur seule ne se voit pas en dark). */
  --smart-text-color: var(--color-text-secondary);              /* défaut (M/T = faits) */
  --smart-text-lead-color: var(--color-text-primary);           /* S = l'objectif → blanc */
  --smart-text-lead-weight: var(--font-weight-semibold);        /* + semibold → headline net */
  --smart-text-muted-color: var(--color-text-muted);            /* A/R = justification → démoté (+ plus petit) */
  --smart-dimension-gap: var(--space-4);                        /* label de dimension (Spécifique…) → contenu */
  /* Justification (A/R) : réduite à 2 lignes, dépliée inline via « Voir plus » (accordéon). */
  --smart-clamp-lines: 2;                                       /* A/R tronqués à 2 lignes par défaut */
  --smart-more-gap: var(--space-8);                            /* texte → « Voir plus » */
  --smart-more-icon-gap: var(--space-4);                       /* label → chevron */
  --smart-more-icon-size: 0.875rem;
  --smart-more-color: var(--color-text-secondary);             /* affordance lisible (pas muted → se voit) */
  --smart-more-color-hover: var(--color-text-primary);

  /* Grid tokens: grille 12 colonnes fluides (dashboard, vues) — colonnes fluides, gouttière + marge fixes */
  --grid-columns: 12;                                          /* desktop — se divise en 6+6, 4+4+4, 3+3+3+3, 8+4 */
  --grid-columns-tablet: 8;                                    /* tablette (≤1024px) */
  --grid-columns-mobile: 4;                                    /* mobile (≤600px) */
  --grid-max-width: 1280px;                                    /* largeur max du contenu (dashboard) — pas d'étalement infini + air sur les bords (MacBook ~1512) */
  --grid-gutter: var(--space-24);                              /* gouttière desktop entre colonnes */
  --grid-gutter-mobile: var(--space-16);                       /* gouttière resserrée sur petit écran */
  --grid-page-padding: var(--space-page-desktop);              /* marge de page (bords écran) — 32 */
  --grid-page-padding-mobile: var(--space-page-mobile);        /* marge de page mobile — 16 */
  --grid-row-content-height: clamp(490px, 34vw, 560px);        /* grille verticale : rangée contenu (chart/SMART). Plancher 490 = PLAT sur la plage laptop (1280 ET 1440 → 490, pas de variation gênante) ; ne grandit qu'au-delà de ~1440 jusqu'à 560 max (ultra-large). Bande KPI reste FIXE (~150) car contenu fixe. */
  /* Breakpoints (référence — CSS @media ne peut pas lire var()) : tablette 1024px · mobile 600px */

  /* View tokens: Jalon détail (vue d'un jalon — meta + critère + KPI + valider) */
  --jalon-detail-max-width: 780px;                             /* vue détail (2 KPI côte à côte) — valeur preview */
  --jalon-detail-head-gap: var(--space-8);                     /* meta → titre → échéance (groupe serré) */
  --jalon-detail-section-gap: var(--space-32);                 /* entre les grands blocs */
  --jalon-detail-label-gap: var(--space-8);                    /* label de section → son contenu : titre→texte = unité de sens (§4.3 label-gap), pas 16 */
  --jalon-detail-kpi-gap: var(--space-24);                     /* entre les 2 cartes KPI : gap externe ≥ padding interne (24) + §887 grid-gap */
  --jalon-detail-rule-gap: var(--space-16);                    /* air autour des filets : 16+16=32 = section-gap (frontière cohérente), pas 64 */
  --jalon-detail-meta-color: var(--color-text-primary);        /* ligne meta (Jalon x/n · Mois · statut) — eyebrow ancre blanc (Modal §6 / SMART §925) */
  --jalon-detail-due-color: var(--color-text-muted);           /* échéance */

  /* Pattern tokens: Skeleton (placeholders de chargement) */
  --skeleton-base: color-mix(in srgb, var(--color-text-primary) 8%, transparent);   /* bloc au repos */
  --skeleton-sheen: color-mix(in srgb, var(--color-text-primary) 7%, transparent);  /* reflet qui balaie */
  --skeleton-radius: var(--radius-sm);
  --skeleton-text-radius: var(--radius-full);                 /* lignes de texte = arrondi plein */
  --skeleton-text-height: 0.75rem;                            /* hauteur d'une ligne de texte simulée */
  --skeleton-line-gap: var(--space-8);                        /* entre 2 lignes simulées */
  --skeleton-duration: 1.4s;                                  /* vitesse du balayage */

  /* Pattern tokens: Confirmation (dialogue Supprimer / Valider) */
  --confirm-max-width: 420px;                                  /* dialogue compact (plus étroit qu'un form modal) */
  --confirm-desc-color: var(--color-text-secondary);          /* texte de conséquence */

  /* Component tokens: Input number (champ numérique + steppers ↑↓) */
  --input-number-value-size: var(--type-h3-size);
  --input-number-value-line: var(--type-h3-line);
  --input-number-value-weight: var(--font-weight-semibold);
  --input-number-stepper-width: var(--space-32);
  --input-number-stepper-color: var(--color-text-secondary);
  --input-number-stepper-color-hover: var(--color-text-primary);
  --input-number-stepper-background-hover: var(--button-ghost-background-hover);
  --input-number-stepper-border: var(--border-subtle);

  /* Component tokens: Scheduler (QUAND — track horaire + bloc effort/résultat draggable) */
  --scheduler-hour-height: calc(var(--space-48) + var(--space-8)); /* 56px, hors échelle 4/8 pure → composé de tokens */
  --scheduler-viewport-height: calc(var(--scheduler-hour-height) * 4); /* fenêtre scroll ~4h visibles */
  --scheduler-scrollbar-size: var(--space-8);
  --scheduler-scrollbar-thumb: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  --scheduler-scrollbar-thumb-hover: color-mix(in srgb, var(--color-text-primary) 32%, transparent);
  --scheduler-edge-fade: var(--space-48); /* hauteur du fondu haut/bas du viewport (dégradé long et doux, évite l'effet "barre" et les labels coupés net au bord du scroll) */
  --scheduler-hour-label-width: calc(var(--space-32) + var(--space-8)); /* 40px, colonne heures */
  --scheduler-hour-label-color: var(--color-text-muted);
  --scheduler-hour-label-font: var(--font-mono);
  --scheduler-hour-line: var(--color-border-subtle);
  --scheduler-summary-color: var(--color-text-muted);
  --scheduler-summary-font: var(--font-mono);
  --scheduler-nav-color: var(--color-text-muted);
  --scheduler-nav-color-hover: var(--color-text-secondary);
  --scheduler-block-inset-left: var(--space-48);
  --scheduler-block-inset-right: var(--space-8);
  --scheduler-block-background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  --scheduler-block-border: 3px solid var(--color-text-primary);
  --scheduler-block-radius: var(--radius-sm);
  --scheduler-block-padding: var(--space-8);
  --scheduler-block-eyebrow-color: var(--color-text-muted);
  --scheduler-block-value-color: var(--color-text-primary);
  --scheduler-resize-handle-height: var(--space-12);
  --scheduler-resize-hit-extend: var(--space-12); /* étend la zone tactile du resize vers le haut → 24px (WCAG 2.5.8 AA) sans grossir le grip visuel */
  --scheduler-resize-handle-color: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
  --scheduler-transition: var(--motion-transition-default);

  /* Component tokens: Delta (écart-à-cible — «+36 h au-delà», «10 restants») */
  /* Chip monochrome qui ACCROCHE l'œil : fond surélevé + texte primary (pop sans orange —
     orange = action only). Réutilise le chrome du Badge (padding/radius). Pas de flèche/
     couleur sémantique (distance à la cible, pas une tendance : le Chart porte la tendance). */
  --delta-background: var(--color-surface-raised);
  --delta-color: var(--color-text-primary);
  --delta-padding-block: var(--badge-padding-block);
  --delta-padding-inline: var(--badge-padding-inline);
  --delta-radius: var(--badge-radius);
  --delta-font-weight: var(--font-weight-semibold);

  /* Component tokens: KPI card (composant métier — mesure effort/résultat d'un jalon) */
  /* Padding = standard carte du système (--card-padding = 24), PAS une valeur bespoke */
  --kpi-card-padding: var(--card-padding);
  /* gap entre cartes = objets détachés → aligné sur le padding, pas plus serré */
  --kpi-card-grid-gap: var(--space-24);
  /* Taille FIXE (vue jalon) : toutes les cartes identiques → grille régulière = premium.
     Hauteur mini réservée pour que le filet + delta soient à la MÊME hauteur partout. */
  --kpi-card-width: 360px;
  --kpi-card-min-height: 190px;
  /* Air symétrique autour du filet (nombre ne touche jamais le filet). 24 rendait la carte jalon
     creuse en vue moyen terme (contenu clairsemé) — même constat que la variante summary
     (« 24px autour d'un 1px = trop d'air »). Resserré à 16 : clairance préservée, moins de vide. */
  --kpi-card-divider-gap: var(--space-16);
  /* filet → pied (delta + contexte) — conservé pour compat, = divider-gap */
  --kpi-card-footer-gap: var(--space-16);
  /* Carte définie = token système partagé (voir --card-border-defined). */
  --kpi-card-border-defined: var(--card-border-defined);
  --kpi-card-shadow: var(--card-shadow-defined);
  /* gap de BASE = intra-groupe serré (titre↔fraîcheur = une unité). Les ruptures
     inter-groupes sont posées en margin explicite (rythme groupé, pas uniforme). */
  --kpi-card-gap: var(--space-4);
  /* titre → valeur (la fraîcheur passe SOUS la valeur, cf. unif avec le résumé) */
  --kpi-card-metric-gap: var(--space-16);
  /* respiration valeur → barre */
  --kpi-card-bar-gap: var(--space-12);
  /* respiration head (label + actions) → titre */
  --kpi-card-title-gap: var(--space-16);
  /* séparation du groupe valeur sous le cluster identité (2 groupes distincts) */
  --kpi-card-value-gap: var(--space-24);
  --kpi-card-eyebrow-color: var(--color-text-muted);
  --kpi-card-type-icon-color: var(--color-text-muted);
  /* Fraîcheur neutre = muted (2 pôles : titre blanc vs contexte muted). L'importance vient de l'état stale (ambre), pas d'un gris intermédiaire */
  --kpi-card-meta-color: var(--color-text-muted);
  /* Mesure en retard (> 1 période sans mesure) : couleur d'état, seul point de couleur de la carte */
  --kpi-card-meta-stale-color: var(--color-warning);
  --kpi-card-value-size: var(--type-display-size); /* 40px — seule emphase du KPI (Principe 2 : taille, pas couleur). Écrase le titre (ratio ~2.5x). */
  --kpi-card-value-line: var(--type-display-line); /* accompagne la taille display (évite le clipping) */
  /* 700 serré, PAS 800 : à cette taille le heavy lit « chunky ». Le poids vient du tracking négatif + taille, pas du fat. */
  --kpi-card-value-weight: var(--font-weight-bold);
  --kpi-card-value-tracking: var(--letter-spacing-tight);
  --kpi-card-unit-color: var(--color-text-secondary);
  --kpi-card-target-color: var(--color-text-muted);
  --kpi-card-title-color: var(--color-text-secondary);
  /* Titre = ANCRE de lecture : blanc + medium (pas semibold) → lisible mais recule
     nettement sous la valeur (hiérarchie 2 niveaux nets, pas de gris intermédiaire). */
  --kpi-card-title-size: var(--type-body-lg-size);
  --kpi-card-title-line: var(--type-body-lg-line);
  --kpi-card-title-weight: var(--font-weight-medium);
  /* delta = composant partagé .ds-delta (écart-à-cible inline quiet, cf. tokens Delta plus haut) */
  --kpi-card-summary-gap: var(--space-8);
  /* Variante COMPACTE (vue long terme / résumé) : carte 2x moins LARGE que le jalon,
     hauteur confortable (le tassement vertical était une erreur). */
  --kpi-card-summary-padding: var(--space-16);
  --kpi-card-summary-title-gap: var(--space-8);
  --kpi-card-summary-metric-gap: var(--space-4);          /* resserré (vue dashboard) — carte plus basse */
  --kpi-card-summary-divider-gap: var(--space-8);         /* air autour du filet, scopé summary (24 en vue jalon) */
  --kpi-card-summary-value-size: var(--type-h1-size); /* 28px vs 40 en vue jalon */
  --kpi-card-summary-value-line: var(--type-h1-line); /* lh SUIT la taille 28 (sinon hérite du lh 40px → tuile gonflée) */
  --kpi-card-summary-width: 260px; /* tuile résumé fixe, plus étroite que le jalon (360) */
  --kpi-card-summary-min-height: 150px;
  --kpi-card-empty-copy-color: var(--color-text-secondary);
  --kpi-card-define-border: var(--border-width-default) dashed var(--color-border-strong);
  --kpi-card-define-color: var(--color-text-secondary);
  --kpi-card-define-color-hover: var(--color-text-primary);

  /* Component tokens: Jalon card (composant métier — jalon actif + statut + avancement) */
  --jalon-card-padding: var(--card-padding); /* standard système (24), pas bespoke */
  --jalon-card-grid-gap: var(--space-24);    /* gap entre cartes = objets détachés (>= padding) */
  /* Rythme GROUPÉ (pas uniforme) : gap:0 + marges par relation */
  --jalon-card-body-gap: var(--space-16);    /* head (meta+statut) → titre */
  --jalon-card-block-gap: var(--space-24);   /* titre/date → avancement (rupture) */
  --jalon-card-cta-gap: var(--space-16);     /* avancement → CTA */
  --jalon-card-meta-color: var(--color-text-muted);
  --jalon-card-date-color: var(--color-text-secondary);
  --jalon-card-cta-color: var(--color-text-secondary);
  --jalon-card-cta-color-hover: var(--color-text-primary);
  /* Statuts : distingués par contraste/label, pas par l'accent orange (réservé CTA) */
  --jalon-status-active-dot: var(--color-accent-primary);
  --jalon-status-active-text: var(--color-text-primary);
  --jalon-status-done-dot: var(--color-text-muted);
  --jalon-status-done-text: var(--color-text-secondary);
  --jalon-status-upcoming-dot: var(--color-border-strong);
  --jalon-status-upcoming-text: var(--color-text-muted);
  --jalon-status-pill-background: var(--color-surface-raised);
  --jalon-status-pill-radius: var(--radius-full);
  --jalon-status-dot-size: var(--space-8);

  /* Component tokens: KPI history (composant métier — tableau épuré des mesures, réf « Activity ») */
  --kpi-history-padding: var(--card-padding);          /* padding du panneau (24) */
  --kpi-history-head-gap: var(--space-24);             /* titre → en-têtes de colonnes */
  --kpi-history-cols-gap: var(--space-12);             /* en-têtes → 1re ligne */
  --kpi-history-row-padding-block: var(--space-16);    /* lignes aérées (feel premium) */
  --kpi-history-col-gap: var(--space-24);              /* date ↔ valeur ↔ actions (généreux) */
  --kpi-history-date-width: 7rem;                      /* colonne date fixe → proportion décidée, valeur collée après (pas de désert) */
  --kpi-history-date-color: var(--color-text-primary);   /* date = blanche mais PLUS PETITE (body-sm) → hiérarchie par la taille, pas par un gris fantôme */
  --kpi-history-date-weight: var(--font-weight-medium);
  --kpi-history-value-color: var(--color-text-primary);/* valeur = emphase (blanc bold, monochrome) */
  --kpi-history-value-weight: var(--font-weight-bold);
  --kpi-history-unit-color: var(--color-text-muted);
  --kpi-history-note-color: var(--color-text-secondary);/* note lisible mais en retrait */
  --kpi-history-note-gap: var(--space-4);              /* valeur → note (même mesure) */
  --kpi-history-header-color: var(--color-text-muted); /* en-têtes de colonnes = label discret */
  --kpi-history-action-color: var(--color-text-secondary); /* ✎/🗑 visibles au survol (pas muted) */
  --kpi-history-pair-gap: var(--space-12);             /* écart date ↔ valeur (paire serrée à gauche) */
  --kpi-history-value-input-width: 4.5rem;             /* champ valeur en édition */
  --kpi-history-actions-gutter: calc(var(--space-32) * 2 + var(--space-4)); /* gouttière fixe trailing (2 icônes) → bord droit de la valeur constant */
  --kpi-history-row-border: var(--border-subtle);      /* trait fin pleine largeur entre mesures */

  /* ── Kanban (vue To-do) : colonnes de flux À faire / En cours / Terminé ── */
  --kanban-head-gap: var(--space-element-gap);         /* header de colonne → cartes */
  --kanban-card-gap: var(--space-element-gap);         /* espace entre cartes d'une colonne */
  --kanban-card-padding: var(--space-16);              /* carte compacte (pas 24 : densité kanban) */
  --kanban-card-inner-gap: var(--space-8);             /* titre → méta (une unité de sens) */
  --kanban-card-background: var(--card-background);
  --kanban-card-border: var(--card-border-defined);    /* tuile définie = liftable (drag) */
  --kanban-card-radius: var(--card-radius);
  --kanban-card-shadow: var(--card-shadow-defined);
  --kanban-list-min-height: calc(var(--space-64) * 2); /* colonne vide reste cible de dépôt */
  --kanban-meta-gap: var(--space-12);                  /* progression ↔ jalon dans la méta */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 1ms;
    --motion-duration-base: 1ms;
    --motion-duration-slow: 1ms;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
  margin: 0;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  letter-spacing: var(--letter-spacing-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.type-display,
.type-h1,
.type-h2,
.type-h3,
.type-body-lg,
.type-body-md,
.type-body-sm,
.type-label,
.type-caption,
.type-data-value,
.type-data-label {
  font-family: var(--font-body);
  letter-spacing: var(--letter-spacing-default);
}

.type-display {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.type-h1 {
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.type-h2 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.type-h3 {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.type-body-lg {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.type-body-md {
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.type-body-sm {
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-line);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
}

.type-label {
  font-size: var(--type-label-size);
  line-height: var(--type-label-line);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.type-caption {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-secondary);
}

.type-data-value {
  font-size: var(--type-data-value-size);
  line-height: var(--type-data-value-line);
  font-weight: var(--font-weight-heavy);
  color: var(--color-text-primary);
}

.type-data-label {
  font-size: var(--type-data-label-size);
  line-height: var(--type-data-label-line);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}