eidos/date-range-picker: distinct start/end tones + purge raw hex

Closes incidencia 2026-05-20 #4 plus the R-2.1 audit finding:

- Remove raw-hex fallbacks (`#16845f`, `#106d4e`, `#2ba878`, `#ffffff`)
  from `date-range-picker.css`. The `--color-affirm-*` and
  `--calendar-day-selected-color` tokens are guaranteed by the
  generated base.css; the safety hex hid that they weren't being
  refreshed.
- Regenerate `eidos/generated/base.css` so `--calendar-day-*` tokens
  (color, selected-color, today-border, etc.) materialize from the
  recipe definitions in `lib/recipes/base.ts`. Fixes the stale
  `keeps generated/base.css in sync` contract test.
- Start endpoint now reads `--color-affirm-*` cleanly; end follows the
  picker's `data-color` accent. When the picker's accent IS in the
  affirm family (`data-color="affirm"` or `"fulfill"`), the start
  swaps to `secondary` so the two endpoints stay perceptually distinct.
- Both endpoints get an inset edge stripe + semibold weight so the
  start vs end direction reads at a glance — addresses the user's
  "indistinguible o transparente" complaint.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/date-range-picker/date-range-picker.css

@@ -16,14 +16,16 @@
 	--_calendar-accent-track: var(--color-primary-track);
 	--_calendar-accent-border: var(--color-primary-border);
 	--_calendar-accent-text: var(--color-primary-text);
-	--_calendar-range-start-solid: var(--color-affirm-solid, #16845f);
-	--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover, #106d4e);
-	--_calendar-range-start-border: var(--color-affirm-border, #2ba878);
-	--_calendar-range-start-text: var(--color-affirm-contrast, #ffffff);
+	/* Start endpoint uses the `affirm` family by default (semantically: the
+	   range opens). End endpoint follows the picker's `data-color` accent. */
+	--_calendar-range-start-solid: var(--color-affirm-solid);
+	--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
+	--_calendar-range-start-border: var(--color-affirm-border);
+	--_calendar-range-start-text: var(--color-affirm-contrast);
 	--_calendar-range-end-solid: var(--_calendar-accent-solid);
 	--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
 	--_calendar-range-end-border: var(--_calendar-accent-solid);
-	--_calendar-range-end-text: var(--calendar-day-selected-color, #ffffff);
+	--_calendar-range-end-text: var(--calendar-day-selected-color);
 
 	display: flex;
 	flex-wrap: wrap;
@@ -92,6 +94,12 @@
 	--_calendar-accent-track: var(--color-affirm-track);
 	--_calendar-accent-border: var(--color-affirm-border);
 	--_calendar-accent-text: var(--color-affirm-text);
+	/* End uses affirm — swap start to secondary so the two endpoints
+	   stay perceptually distinct. */
+	--_calendar-range-start-solid: var(--color-secondary-solid);
+	--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
+	--_calendar-range-start-border: var(--color-secondary-border);
+	--_calendar-range-start-text: var(--color-secondary-contrast);
 }
 
 [data-date-range-picker][data-color='fulfill'] {
@@ -103,6 +111,11 @@
 	--_calendar-accent-track: var(--color-fulfill-track);
 	--_calendar-accent-border: var(--color-fulfill-border);
 	--_calendar-accent-text: var(--color-fulfill-text);
+	/* End uses fulfill (close in hue to affirm) — swap start to secondary. */
+	--_calendar-range-start-solid: var(--color-secondary-solid);
+	--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
+	--_calendar-range-start-border: var(--color-secondary-border);
+	--_calendar-range-start-text: var(--color-secondary-contrast);
 }
 
 [data-date-range-picker][data-color='risk'] {
@@ -289,14 +302,16 @@
 	--_calendar-accent-track: var(--color-primary-track);
 	--_calendar-accent-border: var(--color-primary-border);
 	--_calendar-accent-text: var(--color-primary-text);
-	--_calendar-range-start-solid: var(--color-affirm-solid, #16845f);
-	--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover, #106d4e);
-	--_calendar-range-start-border: var(--color-affirm-border, #2ba878);
-	--_calendar-range-start-text: var(--color-affirm-contrast, #ffffff);
+	/* Start endpoint uses the `affirm` family by default (semantically: the
+	   range opens). End endpoint follows the picker's `data-color` accent. */
+	--_calendar-range-start-solid: var(--color-affirm-solid);
+	--_calendar-range-start-solid-hover: var(--color-affirm-solid-hover);
+	--_calendar-range-start-border: var(--color-affirm-border);
+	--_calendar-range-start-text: var(--color-affirm-contrast);
 	--_calendar-range-end-solid: var(--_calendar-accent-solid);
 	--_calendar-range-end-solid-hover: var(--_calendar-accent-solid-hover);
 	--_calendar-range-end-border: var(--_calendar-accent-solid);
-	--_calendar-range-end-text: var(--calendar-day-selected-color, #ffffff);
+	--_calendar-range-end-text: var(--calendar-day-selected-color);
 
 	display: inline-flex;
 	flex-direction: column;
@@ -350,6 +365,10 @@
 	--_calendar-accent-track: var(--color-affirm-track);
 	--_calendar-accent-border: var(--color-affirm-border);
 	--_calendar-accent-text: var(--color-affirm-text);
+	--_calendar-range-start-solid: var(--color-secondary-solid);
+	--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
+	--_calendar-range-start-border: var(--color-secondary-border);
+	--_calendar-range-start-text: var(--color-secondary-contrast);
 }
 
 [data-date-range-picker-calendar][data-range-calendar][data-color='fulfill'] {
@@ -358,6 +377,10 @@
 	--_calendar-accent-track: var(--color-fulfill-track);
 	--_calendar-accent-border: var(--color-fulfill-border);
 	--_calendar-accent-text: var(--color-fulfill-text);
+	--_calendar-range-start-solid: var(--color-secondary-solid);
+	--_calendar-range-start-solid-hover: var(--color-secondary-solid-hover);
+	--_calendar-range-start-border: var(--color-secondary-border);
+	--_calendar-range-start-text: var(--color-secondary-contrast);
 }
 
 [data-date-range-picker-calendar][data-range-calendar][data-color='risk'] {
@@ -569,15 +592,22 @@
 }
 
 [data-range-calendar-day][data-range-start] {
+	/* Start endpoint: solid background + small left-edge accent stripe so it
+	   reads as the *opening* of the range, never blending with the end. */
 	border-color: var(--_calendar-range-start-border);
 	background: var(--_calendar-range-start-solid);
 	color: var(--_calendar-range-start-text);
+	box-shadow: inset 2px 0 0 0 var(--_calendar-range-start-border);
+	font-weight: var(--font-weight-semibold);
 }
 
 [data-range-calendar-day][data-range-end] {
+	/* End endpoint: solid background + small right-edge accent stripe. */
 	border-color: var(--_calendar-range-end-border);
 	background: var(--_calendar-range-end-solid);
 	color: var(--_calendar-range-end-text);
+	box-shadow: inset -2px 0 0 0 var(--_calendar-range-end-border);
+	font-weight: var(--font-weight-semibold);
 }
 
 [data-range-calendar-day][data-range-start][data-range-end] {

src/uix/eidos/generated/base.css

@@ -610,6 +610,52 @@
 	--field-transition-duration: var(--duration-fast);
 	--field-transition-ease: var(--ease-default);
 	--field-disabled-opacity: 0.56;
+	--form-gap-sm: var(--space-4);
+	--form-gap-md: var(--space-5);
+	--form-gap-lg: var(--space-6);
+	--form-font-family: var(--font-ui);
+	--form-color: var(--color-content-primary);
+	--form-radius: var(--radius-lg);
+	--form-border-width: var(--border-width);
+	--form-panel-padding: var(--space-5);
+	--form-panel-border: var(--color-border-default);
+	--form-panel-bg: var(--color-surface-raised);
+	--form-panel-shadow: var(--shadow-sm);
+	--form-grid-min: 18rem;
+	--form-grid-column-gap: var(--space-5);
+	--form-action-height-sm: var(--control-height-sm);
+	--form-action-height-md: var(--control-height-md);
+	--form-action-height-lg: var(--control-height-lg);
+	--form-action-px-sm: var(--space-3);
+	--form-action-px-md: var(--space-3-5);
+	--form-action-px-lg: var(--space-4);
+	--form-action-font-size-sm: var(--font-size-xs);
+	--form-action-font-size-md: var(--font-size-sm);
+	--form-action-font-size-lg: var(--font-size-sm);
+	--form-action-font-weight: var(--font-weight-medium);
+	--form-action-line-height: var(--leading-ui);
+	--form-action-gap: var(--space-2);
+	--form-action-radius: var(--radius-md);
+	--form-action-border-width: var(--border-width);
+	--form-error-summary-padding: var(--space-3);
+	--form-error-summary-border-width: var(--border-width);
+	--form-error-summary-radius: var(--radius-md);
+	--form-error-summary-font-size: var(--font-size-sm);
+	--form-error-summary-line-height: var(--leading-ui);
+	--form-error-summary-list-indent: var(--space-4);
+	--form-link-underline-offset: 0.18em;
+	--form-auto-fields-gap: var(--space-3);
+	--form-auto-fields-array-padding: var(--space-3);
+	--form-auto-fields-border-width: var(--border-width);
+	--form-auto-fields-radius: var(--radius-md);
+	--form-auto-fields-item-gap: var(--space-2);
+	--form-auto-fields-item-padding: var(--space-3);
+	--form-widget-px: var(--space-3);
+	--form-widget-radius: var(--radius-md);
+	--form-widget-border-width: var(--border-width);
+	--form-transition-duration: var(--duration-fast);
+	--form-transition-ease: var(--ease-default);
+	--form-disabled-opacity: 0.56;
 	--drawer-overlay-bg: var(--color-overlay);
 	--drawer-overlay-blur: 10px;
 	--drawer-overlay-opacity: 62%;
@@ -772,6 +818,72 @@
 	--date-field-transition-duration: var(--duration-fast);
 	--date-field-transition-ease: var(--ease-default);
 	--date-field-disabled-opacity: 0.56;
+	--calendar-gap: var(--space-3);
+	--calendar-padding-sm: var(--space-3);
+	--calendar-padding-md: var(--space-4);
+	--calendar-padding-lg: var(--space-5);
+	--calendar-radius: var(--radius-lg);
+	--calendar-border-width: var(--border-width);
+	--calendar-border: var(--color-border-subtle);
+	--calendar-invalid-border: var(--color-risk-border);
+	--calendar-bg: var(--color-surface-raised);
+	--calendar-outline-bg: var(--color-surface-default);
+	--calendar-outline-shadow: none;
+	--calendar-color: var(--color-content-primary);
+	--calendar-shadow: var(--shadow-sm);
+	--calendar-font-family: var(--font-ui);
+	--calendar-font-size-sm: var(--font-size-xs);
+	--calendar-font-size-md: var(--font-size-sm);
+	--calendar-font-size-lg: var(--font-size-sm);
+	--calendar-line-height: var(--leading-ui);
+	--calendar-header-gap: var(--space-2);
+	--calendar-heading-color: var(--color-content-primary);
+	--calendar-heading-font-size: var(--font-size-sm);
+	--calendar-heading-font-weight: var(--font-weight-semibold);
+	--calendar-control-size-sm: var(--control-height-xs);
+	--calendar-control-size-md: var(--control-height-sm);
+	--calendar-control-size-lg: var(--control-height-md);
+	--calendar-control-radius: var(--radius-md);
+	--calendar-control-border-width: var(--border-width);
+	--calendar-control-border: transparent;
+	--calendar-control-border-hover: var(--color-border-subtle);
+	--calendar-control-bg: transparent;
+	--calendar-control-bg-hover: var(--color-surface-overlay);
+	--calendar-control-color: var(--color-content-secondary);
+	--calendar-control-color-hover: var(--color-content-primary);
+	--calendar-select-min-width: 8ch;
+	--calendar-select-px: var(--space-2);
+	--calendar-grid-gap: var(--space-0-5);
+	--calendar-weekday-size: var(--space-5);
+	--calendar-weekday-color: var(--color-content-muted);
+	--calendar-weekday-font-size: var(--font-size-xs);
+	--calendar-weekday-font-weight: var(--font-weight-medium);
+	--calendar-day-size-sm: var(--control-height-xs);
+	--calendar-day-size-md: var(--control-height-sm);
+	--calendar-day-size-lg: var(--control-height-md);
+	--calendar-day-radius: var(--radius-md);
+	--calendar-day-border-width: var(--border-width);
+	--calendar-day-border: transparent;
+	--calendar-day-border-hover: var(--color-border-subtle);
+	--calendar-day-bg: transparent;
+	--calendar-day-bg-hover: var(--color-surface-overlay);
+	--calendar-day-color: var(--color-content-primary);
+	--calendar-day-color-hover: var(--color-content-primary);
+	--calendar-day-font-weight: var(--font-weight-regular);
+	--calendar-day-selected-color: var(--color-content-on-solid);
+	--calendar-day-today-border: var(--color-border-strong);
+	--calendar-day-today-color: var(--color-content-primary);
+	--calendar-day-today-font-weight: var(--font-weight-semibold);
+	--calendar-day-outside-color: var(--color-content-muted);
+	--calendar-day-outside-opacity: 0.62;
+	--calendar-day-weekend-color: var(--color-content-secondary);
+	--calendar-day-holiday-shadow: inset 0 -2px 0 var(--_calendar-accent-border);
+	--calendar-day-unavailable-decoration: var(--color-risk-border);
+	--calendar-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
+	--calendar-event-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--_calendar-accent-border);
+	--calendar-transition-duration: var(--duration-fast);
+	--calendar-transition-ease: var(--ease-default);
+	--calendar-disabled-opacity: 0.52;
 	--pagination-gap-sm: var(--space-1);
 	--pagination-gap-md: var(--space-1-5);
 	--pagination-gap-lg: var(--space-2);