/**
 * Starter Theme - CSS Variables
 *
 * This is the file the theme actually loads (enqueued in
 * includes/theme-styles.php). It must resolve every token used by
 * BOTH the component library and the theme chrome (main-style.css,
 * templates).
 *
 * Two sections:
 *
 *  1. SCALE  - spacing, type, radius, shadows, layout. FIXED.
 *              Do NOT edit per client. Mirrors components/variables.css.
 *  2. BRAND  - colors and fonts. EDIT THESE per client:
 *              update the colors + font families, nothing else.
 */

:root {

  /* ============================================================
   * SCALE  -  FIXED. Do not edit per client.
   * ============================================================ */

  /* --- Spacing  (px grid: 8 / 16 / 32 / 48 / 64 / 96) --- */
  --space-1:  8px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  16px;
  --space-5:  16px;
  --space-6:  32px;
  --space-8:  32px;
  --space-10: 48px;
  --space-12: 48px;
  --space-16: 64px;

  /* Legacy spacing aliases */
  --spacing-md:  var(--space-4);
  --spacing-xl:  var(--space-6);
  --spacing-2xl: var(--space-10);

  /* Section rhythm  (72px = the approved mock's `section{padding:72px 0}`) */
  --section-padding:        72px;
  --section-padding-sm:     48px;
  --section-padding-lg:     96px;
  --section-padding-mobile: 48px;

  /* Grid gaps + card/button internals */
  --grid-gap-lg:   32px;
  --card-padding:  32px;
  --btn-height:    48px;
  --btn-padding-x: 32px;
  --btn-padding-y: 16px;

  /* --- Type  (typographic ramp, not the spacing grid) --- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  40px;

  /* Legacy type aliases */
  --font-size-base: var(--text-base);
  --font-size-md:   var(--text-lg);
  --font-size-xl:   var(--text-xl);
  --font-size-2xl:  var(--text-2xl);

  /* Line heights / weight */
  --line-height-tight:   1.2;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.65;
  --leading-tight:       1.2;
  --leading-snug:        1.35;
  --weight-bold:         700;

  /* --- Radius ---
   * WAPI PREV deviates from the starter SCALE here. Direction A specifies
   * a 4px radius throughout ("Rayon 4px", design-direction.md §5), taken
   * from satelliteam.com's real CSS, and that is what Yves approved in the
   * A/B/C/D screenshots. The starter's 12px/pill values would round the
   * buttons into a different look from the one he signed off.
   * --border-radius-pill is kept at 9999px for anything genuinely pill-
   * shaped (badges), but buttons no longer use it. */
  --radius-md:          4px;
  --radius-full:        9999px;
  --border-radius:      4px;
  --border-radius-sm:   3px;
  --border-radius-md:   4px;
  --border-radius-lg:   4px;
  --border-radius-pill: 9999px;

  /* --- Transitions --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* --- Layout ---
   * 1200px per Direction A (satelliteam's real container width), not the
   * starter's 1440px. Side padding 24px to match the approved mock. */
  --max-width:           1200px;
  --container-max-width: 1200px;
  --container-padding:   24px;

  /* --- Z-index --- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-overlay:  400;
  --z-modal:    500;


  /* ============================================================
   * BRAND  -  EDIT PER CLIENT (colors + fonts only).
   * ============================================================
   *
   * The starter ships strictly grayscale. Phase 3 (dev-naked) renders
   * black-and-white so the client reviews structure and copy without
   * being biased by an arbitrary palette. Phase 8 (Design du site)
   * replaces these values with the client's real brand colours - and
   * nothing else needs to move, every component reads through tokens.
   */

  /* --- Primary / secondary / accent ---
   *
   * WAPI PREV palette: Direction A « Sauge et Ardoise » (chosen by Yves
   * 2026-07-15) + accent Jaune (chosen by Yves 2026-07-17, « Allons-y
   * pour la couleur jaune (proposition C) »).
   * Spec: design/design-direction.md §5. Approved mock: the c5 variant of
   * ~/share/wapi-prev-accent/index.html.
   *
   * --color-primary stays the TEAL, not the yellow. It is structural: it
   * colours every link (main-style.css `a{color:var(--color-primary)}`)
   * as well as buttons. Yellow #FFC107 is 1.63:1 on a light background,
   * so yellow links would be unreadable. The yellow lives in
   * --color-accent and is applied to the button in components/cta/cta.css
   * with SLATE text (6.35:1), exactly as the approved mock does.
   * See sop/dev/starter-theme-component-library.md Rule 11.
   */
  --color-primary:        #1F5B65;  /* teal - links + interactive */
  --color-primary-light:  #2A7A88;  /* link hover */
  --color-primary-dark:   #16424A;

  --color-secondary:       #475569;  /* slate, secondary text */
  --color-secondary-light: #64748B;
  --color-secondary-dark:  #334155;

  --color-accent:        #FFC107;  /* JAUNE - Yves 2026-07-17. Button fill, rules, bullets. Needs slate text. */
  --color-accent-light:  #FFD54F;
  --color-accent-dark:   #C79100;

  /* State colors */
  --color-success: #1F5B65;
  --color-warning: #C79100;
  --color-error:   #B3261E;

  /* --- Text  (--color-text and --color-text-primary are the same)
   * Slate #334155, never #111 on #fff: Yves explicitly rejected a
   * black/white contrast that strong (questionnaire Q19). 10.01:1 on the
   * page background, so still comfortably above AA. */
  --color-text:           #334155;
  --color-text-primary:   #334155;
  --color-text-secondary: #334155;  /* headings (main-style.css h1-h6) */
  --color-text-muted:     #475569;  /* 7.32:1 on page bg */
  --color-text-light:     #64748B;
  --color-text-inverse:   #FFFFFF;
  --color-white:          #FFFFFF;

  /* --- Backgrounds  (--color-bg-medium aliases --color-bg-alt)
   * Page background is #FBFBFB, never pure white (design-direction §4). */
  --color-bg-white:     #FBFBFB;
  --color-bg-light:     #F4F6F6;
  --color-bg-alt:       #EDF2F1;
  --color-bg-medium:    #EDF2F1;
  --color-bg-accent:    #FFC107;  /* card borders (Rule 10) - now the accent */
  /* Direction A defines NO dark surface: its only backgrounds are the page
     (#FBFBFB) and the sage sections. Nothing on this site should use a dark
     band - the footer was the last one and is now light, per the approved
     mock. This token is kept only so the shared components that reference it
     still resolve; it is not rendered anywhere on wapi-prev. */
  --color-bg-dark:      #334155;
  --color-bg-highlight: #F4F6F6;
  --color-section-alt:  #A3C0BC;  /* WAPI PREV: sage. Alternate sections. Slate text on it = 5.34:1. */

  /* --- Borders ---
   * Client request 2026-07-22: borders carry the accent everywhere.
   * NOTE these are DECORATIVE boundaries (cards, dividers, section rules).
   * Form-field borders are deliberately NOT yellow - see the override in
   * main-style.css: #FFC107 is 1.63:1 on the page background, and WCAG
   * 1.4.11 wants 3:1 for the boundary of an interactive control, so a
   * yellow input outline would make the fields hard to locate. */
  --color-border:       #FFC107;
  --color-border-light: #FFC107;
  --color-border-dark:  #334155;

  /* Neutral grey kept for the cases that must stay legible (form fields). */
  --color-border-neutral: #D1D5DB;

  /* One bullet size for the whole site. 8px is what the hero's native
     list markers actually render at (measured, not assumed), and the hero
     is the reference. Painted dots (services grid) use this token so they
     cannot drift away from the native markers again. */
  --bullet-size: 8px;

  /* One icon size for every card on the site (direction 2, "sans tuile,
     grand trait"). 34px was the first pass; +5 per client request. */
  --icon-size: 39px;

  /* --- Shadows --- */
  --color-shadow: rgba(0, 0, 0, 0.1);
  --shadow-sm:    0 2px 4px var(--color-shadow);
  --shadow-md:    0 4px 12px var(--color-shadow);
  --shadow-lg:    0 20px 50px rgba(18, 17, 39, 0.1);
  --card-shadow:  0 4px 20px var(--color-shadow);

  /* --- Fonts  (Raleway, self-hosted; one face per weight, weight encoded
   *     in the family name so every token maps to the right weight)
   *     Direction A ships Raleway with a 300 / 400 / 600 hierarchy. --- */
  --font-heading:        "RalewaySemiBold", "Helvetica Neue", Arial, sans-serif;
  --font-heading-medium: "RalewaySemiBold", "Helvetica Neue", Arial, sans-serif;
  --font-heading-light:  "RalewayLight", "Helvetica Neue", Arial, sans-serif;
  --font-body:           "RalewayRegular", "Helvetica Neue", Arial, sans-serif;
  --font-body-light:     "RalewayLight", "Helvetica Neue", Arial, sans-serif;
  --font-body-medium:    "RalewayMedium", "Helvetica Neue", Arial, sans-serif;
  --font-body-bold:      "RalewayBold", "Helvetica Neue", Arial, sans-serif;
}


/* ==========================================
 * DARK MODE (optional - uncomment to enable)
 * ========================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #E0E0E0;
    --color-text-secondary: #FFFFFF;
    --color-bg-white: #1A1A2E;
    --color-bg-light: #16213E;
    --color-bg-alt: #0F3460;
  }
}
*/