/* =========================================================
   JING REN TANG — JRT DESIGN TOKENS v5.0
   File: css/00-variables.css

   Global design foundation for:
   - Accueil
   - Notre approche
   - Quand consulter
   - Méthodes
   - Body Reflections
   - Observations cliniques

   Principle:
   Warm editorial paper surfaces, quiet sage transitions,
   deep green structure, restrained gold accents.
========================================================= */

:root {

  /* =======================================================
     01 — CORE BRAND COLORS
  ======================================================= */

  --jrt-green: #294742;
  --jrt-green-soft: #35554f;
  --jrt-green-medium: #2f514b;
  --jrt-green-dark: #203d39;
  --jrt-green-deep: #193530;
  --jrt-green-black: #132c28;

  --jrt-nav-dark: #294742;

  --jrt-gold: #b28a54;
  --jrt-gold-light: #d5bb87;
  --jrt-gold-deep: #95703f;

  --jrt-wine: #875144;
  --jrt-wine-soft: #a97866;

  --jrt-clay: #89584a;
  --jrt-clay-soft: #ad7c69;


  /* =======================================================
     02 — EDITORIAL PAPER SURFACES
     No pure white for large page backgrounds.
  ======================================================= */

  --jrt-paper: #f3efe8;
  --jrt-paper-soft: #ece9e1;
  --jrt-paper-light: #f8f4ed;
  --jrt-paper-deep: #e7e2d9;

  --jrt-cream: var(--jrt-paper);
  --jrt-cream-light: var(--jrt-paper-light);
  --jrt-cream-deep: var(--jrt-paper-soft);

  --jrt-sage-soft: #edf1eb;
  --jrt-sage-light: #e7eee8;
  --jrt-sage-medium: #dce7df;
  --jrt-sage-deep: #cddad3;

  /*
   * True white is reserved for text or icons
   * placed on dark backgrounds.
   * Do not use it as a large editorial surface.
   */
  --jrt-white: #ffffff;


  /* =======================================================
     03 — SEMANTIC SURFACE TOKENS
     Preferred tokens for new components.
  ======================================================= */

  --jrt-surface-page: var(--jrt-paper);
  --jrt-surface-section: var(--jrt-paper);
  --jrt-surface-section-soft: var(--jrt-paper-soft);
  --jrt-surface-section-light: var(--jrt-paper-light);
  --jrt-surface-section-deep: var(--jrt-paper-deep);

  --jrt-surface-card: var(--jrt-paper-light);
  --jrt-surface-card-soft: rgba(248, 244, 237, 0.72);
  --jrt-surface-card-hover: #fbf7f0;

  --jrt-surface-sage: var(--jrt-sage-soft);
  --jrt-surface-sage-light: var(--jrt-sage-light);
  --jrt-surface-sage-medium: var(--jrt-sage-medium);

  --jrt-surface-dark: var(--jrt-green);
  --jrt-surface-dark-deep: var(--jrt-green-dark);


  /* =======================================================
     04 — TEXT COLORS
  ======================================================= */

  --jrt-ink: #243c38;
  --jrt-heading: #173f3a;
  --jrt-text: #314944;

  --jrt-text-soft: rgba(49, 73, 68, 0.78);
  --jrt-text-muted: rgba(49, 73, 68, 0.64);
  --jrt-text-faint: rgba(49, 73, 68, 0.50);

  /*
   * Legacy alias kept for existing stylesheets.
   */
  --jrt-muted: var(--jrt-text-muted);

  --jrt-text-on-dark: rgba(255, 255, 255, 0.92);
  --jrt-text-on-dark-soft: rgba(255, 255, 255, 0.76);
  --jrt-text-on-dark-muted: rgba(255, 255, 255, 0.60);

  --jrt-heading-on-dark: #ffffff;


  /* =======================================================
     05 — LINKS AND INTERACTIVE COLORS
  ======================================================= */

  --jrt-link: #2d5a52;
  --jrt-link-hover: #875144;
  --jrt-link-visited: #665148;

  --jrt-focus: #b28a54;
  --jrt-focus-ring: rgba(178, 138, 84, 0.34);


  /* =======================================================
     06 — BORDERS AND DIVIDERS
  ======================================================= */

  --jrt-border: rgba(42, 69, 66, 0.14);
  --jrt-border-light: rgba(42, 69, 66, 0.08);
  --jrt-border-medium: rgba(42, 69, 66, 0.18);
  --jrt-border-strong: rgba(42, 69, 66, 0.26);

  --jrt-border-gold: rgba(178, 138, 84, 0.34);

  --jrt-divider: rgba(42, 69, 66, 0.12);
  --jrt-divider-on-dark: rgba(255, 255, 255, 0.16);


  /* =======================================================
     07 — TYPOGRAPHY FAMILIES
  ======================================================= */

  --jrt-font-serif:
    "Alice",
    Georgia,
    "Times New Roman",
    serif;

  --jrt-font-sans:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;


  /* =======================================================
     08 — TYPOGRAPHY SCALE
  ======================================================= */

  --jrt-font-size-xs: 0.75rem;
  --jrt-font-size-sm: 0.875rem;
  --jrt-font-size-base: 1rem;
  --jrt-font-size-md: 1.0625rem;
  --jrt-font-size-lg: 1.1875rem;
  --jrt-font-size-xl: 1.375rem;

  --jrt-font-size-h6:
    clamp(1rem, 1.1vw, 1.125rem);

  --jrt-font-size-h5:
    clamp(1.125rem, 1.4vw, 1.375rem);

  --jrt-font-size-h4:
    clamp(1.35rem, 2vw, 1.8rem);

  --jrt-font-size-h3:
    clamp(1.75rem, 3vw, 2.6rem);

  --jrt-font-size-h2:
    clamp(2.35rem, 4.8vw, 4.5rem);

  --jrt-font-size-h1:
    clamp(3rem, 6.2vw, 5.8rem);

  --jrt-font-size-display:
    clamp(3.5rem, 7.5vw, 7rem);


  /* =======================================================
     09 — LINE HEIGHTS AND LETTER SPACING
  ======================================================= */

  --jrt-line-height-tight: 1.05;
  --jrt-line-height-heading: 1.10;
  --jrt-line-height-title: 1.16;
  --jrt-line-height-body: 1.76;
  --jrt-line-height-reading: 1.84;

  --jrt-letter-tight: -0.04em;
  --jrt-letter-heading: -0.025em;
  --jrt-letter-normal: 0;
  --jrt-letter-wide: 0.08em;
  --jrt-letter-eyebrow: 0.12em;


  /* =======================================================
     10 — FONT WEIGHTS
  ======================================================= */

  --jrt-weight-regular: 400;
  --jrt-weight-medium: 500;
  --jrt-weight-semibold: 600;
  --jrt-weight-bold: 700;


  /* =======================================================
     11 — CONTENT WIDTHS
  ======================================================= */

  --jrt-container: 1180px;
  --jrt-container-wide: 1320px;
  --jrt-container-narrow: 820px;
  --jrt-container-reading: 720px;

  --jrt-content-gutter:
    clamp(18px, 4vw, 40px);

  --jrt-content-gutter-mobile: 16px;


  /* =======================================================
     12 — SECTION SPACING
  ======================================================= */

  --jrt-space-section:
    clamp(72px, 8vw, 120px);

  --jrt-space-section-small:
    clamp(52px, 6vw, 84px);

  --jrt-space-section-large:
    clamp(92px, 10vw, 150px);

  --jrt-space-hero:
    clamp(88px, 11vw, 168px);


  /* =======================================================
     13 — SPACING SCALE
  ======================================================= */

  --jrt-space-1: 4px;
  --jrt-space-2: 8px;
  --jrt-space-3: 12px;
  --jrt-space-4: 16px;
  --jrt-space-5: 20px;
  --jrt-space-6: 24px;
  --jrt-space-7: 32px;
  --jrt-space-8: 40px;
  --jrt-space-9: 48px;
  --jrt-space-10: 64px;
  --jrt-space-11: 80px;
  --jrt-space-12: 96px;
  --jrt-space-13: 120px;

  /*
   * Legacy gap aliases.
   */
  --jrt-gap-small: var(--jrt-space-4);
  --jrt-gap-medium: var(--jrt-space-6);
  --jrt-gap-large: var(--jrt-space-8);
  --jrt-gap-xlarge: var(--jrt-space-10);


  /* =======================================================
     14 — BORDER RADII
  ======================================================= */

  --jrt-radius-xs: 6px;
  --jrt-radius-small: 10px;
  --jrt-radius-card: 18px;
  --jrt-radius-medium: 18px;
  --jrt-radius-menu: 16px;
  --jrt-radius-large: 28px;
  --jrt-radius-xl: 36px;
  --jrt-radius-pill: 999px;


  /* =======================================================
     15 — SHADOWS
  ======================================================= */

  --jrt-shadow-menu:
    0 18px 50px rgba(0, 0, 0, 0.10);

  --jrt-shadow-card:
    0 20px 45px rgba(42, 69, 66, 0.055);

  --jrt-shadow-card-hover:
    0 28px 60px rgba(42, 69, 66, 0.085);

  --jrt-shadow-soft:
    0 18px 50px rgba(30, 49, 43, 0.065);

  --jrt-shadow-editorial:
    0 24px 70px rgba(42, 69, 66, 0.07);

  --jrt-shadow-none:
    0 0 0 rgba(0, 0, 0, 0);


  /* =======================================================
     16 — TRANSITIONS
  ======================================================= */

  --jrt-transition-fast: 160ms ease;
  --jrt-transition: 220ms ease;
  --jrt-transition-slow: 320ms ease;

  --jrt-transition-color:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease;

  --jrt-transition-transform:
    transform 180ms ease;

  --jrt-transition-card:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background-color 220ms ease;


  /* =======================================================
     17 — Z-INDEX SCALE
  ======================================================= */

  --jrt-z-base: 1;
  --jrt-z-content: 10;
  --jrt-z-dropdown: 200;
  --jrt-z-sticky: 500;
  --jrt-z-header: 800;
  --jrt-z-overlay: 1000;
  --jrt-z-modal: 1200;


  /* =======================================================
     18 — COMPONENT TOKENS
  ======================================================= */

  --jrt-card-background: var(--jrt-surface-card);
  --jrt-card-border: var(--jrt-border-light);
  --jrt-card-radius: var(--jrt-radius-card);
  --jrt-card-shadow: var(--jrt-shadow-card);

  --jrt-button-primary-background: var(--jrt-green);
  --jrt-button-primary-text: #ffffff;
  --jrt-button-primary-border: var(--jrt-green);

  --jrt-button-secondary-background: var(--jrt-paper-light);
  --jrt-button-secondary-text: var(--jrt-green-dark);
  --jrt-button-secondary-border: var(--jrt-border-medium);

  --jrt-navigation-background: var(--jrt-nav-dark);
  --jrt-navigation-text: rgba(255, 255, 255, 0.90);
  --jrt-navigation-text-muted: rgba(255, 255, 255, 0.72);

  --jrt-breadcrumb-background: var(--jrt-paper);
  --jrt-breadcrumb-text: var(--jrt-text-muted);

  --jrt-notice-background: var(--jrt-sage-soft);
  --jrt-notice-border: var(--jrt-border-light);

  --jrt-selection-background: rgba(178, 138, 84, 0.24);
  --jrt-selection-text: var(--jrt-green-dark);

}


/* =========================================================
   19 — GLOBAL SELECTION
========================================================= */

::selection {
  color: var(--jrt-selection-text);
  background: var(--jrt-selection-background);
}


/* =========================================================
   20 — ACCESSIBILITY: REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  :root {
    --jrt-transition-fast: 0ms;
    --jrt-transition: 0ms;
    --jrt-transition-slow: 0ms;

    --jrt-transition-color: none;
    --jrt-transition-transform: none;
    --jrt-transition-card: none;
  }

}