/* Rhône Saône — Color tokens
   Derived from the official logo and the home reference mockup.
   White is the dominant surface; dark blue-green grounds the hero, final CTA
   and footer; turquoise carries interaction. Orange is reserved for ratings. */

:root {
  /* --- Brand --- */
  --rs-color-logo: #29b7b2;          /* turquoise from the logo — sparingly */
  --rs-color-primary: #0c8b97;       /* interface turquoise — primary CTAs, active links */
  --rs-color-primary-hover: #0a6b74; /* hover */
  --rs-color-primary-active: #0a5c66;/* pressed */
  --rs-color-accent: #11a6b4;        /* interaction accent, small highlights */

  /* --- Interaction accessible ---
     Le turquoise de marque ci-dessus donne 4,07:1 sur blanc : il tient les 3:1
     exiges d un element non textuel, jamais les 4,5:1 d un texte. Il reste donc
     la couleur de marque — filets, chevrons, survols, fonds tres dilues — et
     cette rampe porte tout ce dont la lecture depend : liens, boutons pleins,
     etats actifs. Les ratios sont ceux mesures, pas des estimations.
     Le registre tools/data/contrastes.json les verifie couple par couple. */
  --rs-color-interactive: #0a6b74;         /* 6,23:1 sur blanc */
  --rs-color-interactive-hover: #0a5c66;   /* 7,68:1 */
  --rs-color-interactive-active: #084a52;  /* 9,94:1 */
  --rs-color-interactive-on-dark: #29b7b2; /* 5,86:1 sur --rs-color-dark */

  /* --- Dark surfaces & strong text --- */
  --rs-color-dark: #0b2e33;          /* hero / CTA / footer ground */
  --rs-color-dark-soft: #1b3438;
  /* Second arret des degrades sombres. Absent du design system : les
     maquettes l ecrivent en dur dans chaque composant concerne. */
  --rs-color-dark-accent: #0c5a63;     /* raised surface on dark */
  /* Les deux degrades sombres des maquettes, nommes une fois. 118° : bannieres
     sombres sans photo (DevisHero, ContactHero, ScHero) et bloc
     professionnels. 135° : appel a l action final, impose par CLAUDE.md. */
  --rs-gradient-dark: linear-gradient(118deg, var(--rs-color-dark) 0%, var(--rs-color-dark-accent) 100%);
  --rs-gradient-cta: linear-gradient(135deg, var(--rs-color-dark) 0%, var(--rs-color-dark-accent) 100%);
  --rs-color-text-strong: #11292d;   /* headings */
  --rs-color-text-default: #243b3e;  /* body */
  --rs-color-text-muted: #5f7377;    /* secondary text, captions */

  /* --- Neutral surfaces --- */
  --rs-color-white: #ffffff;
  --rs-color-surface: #eff5f5;        /* soft tinted surface */
  --rs-color-surface-subtle: #f7fafa; /* page off-white */
  --rs-color-border: #c7dbdd;         /* visible border — decor only, 1,44:1 */
  --rs-color-border-soft: #e5ecec;    /* hairline divider */
  /* Bordure d un controle de saisie : WCAG 1.4.11 exige 3:1, ce que la bordure
     decorative ci-dessus ne donne pas. 3,52:1 sur blanc, 3,20:1 sur la surface
     la plus foncee du site. */
  --rs-color-border-control: #6f8e92;

  /* --- Semantic / status --- */
  --rs-color-rating: #f5a623;         /* stars / ratings ONLY — never a button */
  --rs-color-success: #1f8a5b;
  --rs-color-success-surface: #e7f4ee;
  --rs-color-error: #c0392b;
  --rs-color-error-surface: #fbecea;

  /* --- Semantic aliases (prefer these in components) --- */
  --rs-text-heading: var(--rs-color-text-strong);
  --rs-text-body: var(--rs-color-text-default);
  --rs-text-subtle: var(--rs-color-text-muted);
  --rs-text-on-dark: #ffffff;
  --rs-text-on-dark-muted: #aec7c9;
  /* Liens et coordonnees du pied de page : le blanc a 82 % des maquettes. */
  --rs-text-on-dark-soft: color-mix(in srgb, var(--rs-color-white) 82%, transparent);

  --rs-surface-page: var(--rs-color-surface-subtle);
  --rs-surface-card: var(--rs-color-white);
  --rs-surface-raised: var(--rs-color-surface);
  --rs-surface-dark: var(--rs-color-dark);

  --rs-border-default: var(--rs-color-border);
  --rs-border-hairline: var(--rs-color-border-soft);
  --rs-border-control: var(--rs-color-border-control);

  /* Ces alias portent du texte ou en dependent : ils pointent vers la rampe
     accessible, jamais vers le turquoise de marque. C est ici, et ici seul,
     que se change la couleur d interaction du site. */
  --rs-action-primary: var(--rs-color-interactive);
  --rs-action-primary-hover: var(--rs-color-interactive-hover);
  --rs-action-primary-active: var(--rs-color-interactive-active);
  --rs-link: var(--rs-color-interactive);
  --rs-link-on-dark: var(--rs-color-interactive-on-dark);
}