/* =========================================================================
   STAYSY — Design Tokens
   staysy.net · Brainstormed SRL
   Variables de marque prêtes à brancher (staysy, sites, e-mails).
   ========================================================================= */

:root {
  /* ---- Couleurs de marque ------------------------------------------------ */
  --staysy-clay:        #E8704A;   /* Principal — Sunset Clay   · oklch(.68 .15 38)  */
  --staysy-ember:       #C9552F;   /* Survol / actif            · oklch(.58 .16 38)  */
  --staysy-pine:        #1E4E45;   /* Secondaire — ancrage      · oklch(.37 .06 168) */
  --staysy-honey:       #F2B544;   /* Accent — surbrillances    · oklch(.80 .13 80)  */
  --staysy-sage:        #DCE8E2;   /* Vert clair — fonds doux   · oklch(.92 .02 165) */

  /* ---- Neutres ----------------------------------------------------------- */
  --staysy-canvas:      #FBF6EE;   /* Toile — arrière-plan      · oklch(.97 .01 75)  */
  --staysy-sand:        #F3EADD;   /* Surface — cartes          · oklch(.93 .018 75) */
  --staysy-sand-2:      #ECE0CF;   /* Surface alt / bordure     */
  --staysy-line:        #E3D6C4;   /* Bordures fines            */
  --staysy-ink:         #2A2521;   /* Texte principal           · oklch(.25 .01 60)  */
  --staysy-muted:       #6E655B;   /* Texte secondaire          */
  --staysy-white:       #FFFFFF;

  /* ---- Rôles sémantiques (pointent vers la palette) ---------------------- */
  --color-bg:           var(--staysy-canvas);
  --color-surface:      var(--staysy-sand);
  --color-border:       var(--staysy-line);
  --color-text:         var(--staysy-ink);
  --color-text-muted:   var(--staysy-muted);
  --color-primary:      var(--staysy-clay);
  --color-primary-hover:var(--staysy-ember);
  --color-accent:       var(--staysy-honey);
  --color-anchor:       var(--staysy-pine);
  --color-success:      #2E8B6E;
  --color-warning:      var(--staysy-honey);
  --color-danger:       #C9402F;
  --color-on-primary:   #FFFFFF;
  --color-on-accent:    #5A3D05;

  /* ---- Typographie ------------------------------------------------------- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;   /* titres, accroches */
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif; /* interface, texte  */
  --font-brand:   'Outfit', system-ui, sans-serif;                 /* RÉSERVÉ au wordmark */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Échelle typographique (base 16px, ratio ~1.25) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.5rem;    /* 24 */
  --text-2xl:  2rem;      /* 32 */
  --text-3xl:  2.75rem;   /* 44 */
  --text-4xl:  3.75rem;   /* 60 */

  --leading-tight: 1.05;
  --leading-snug:  1.3;
  --leading-body:  1.65;

  /* ---- Rayons ------------------------------------------------------------ */
  --radius-sm:  8px;
  --radius-md:  11px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-pill:100px;
  --radius-icon:0.265em;  /* ratio tuile du logo : 17/64 */

  /* ---- Ombres (chaudes, jamais grises) ----------------------------------- */
  --shadow-sm: 0 1px 2px rgba(42,37,33,.06), 0 1px 3px rgba(42,37,33,.05);
  --shadow-md: 0 4px 12px rgba(42,37,33,.08), 0 2px 4px rgba(42,37,33,.05);
  --shadow-lg: 0 12px 32px rgba(42,37,33,.12), 0 4px 10px rgba(42,37,33,.06);
  --shadow-clay: 0 8px 24px rgba(232,112,74,.28);

  /* ---- Transitions ------------------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur:  .18s;
}

/* =========================================================================
   Composants de base — exemples prêts à l'emploi
   ========================================================================= */

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--color-text);
}

a { color: var(--color-anchor); text-underline-offset: 3px; }

.btn {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary   { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover   { background: var(--color-primary-hover); }
.btn-secondary { background: transparent; color: var(--color-anchor); border: 1.5px solid var(--color-anchor); }
.btn-secondary:hover { background: var(--color-anchor); color: #fff; }
.btn-ghost     { background: transparent; color: var(--color-text); }
.btn-ghost:hover     { background: var(--staysy-sand-2); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--staysy-sage);
  color: var(--staysy-pine);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  padding: 7px 15px;
  border-radius: var(--radius-pill);
}
.chip-accent { background: var(--staysy-honey); color: var(--color-on-accent); }

/* =========================================================================
   Thème sombre (optionnel) — inverse toile / ancrage
   Activez avec <html data-theme="dark"> ou @media (prefers-color-scheme)
   ========================================================================= */
[data-theme="dark"] {
  --color-bg:         #16322C;
  --color-surface:    #1E4E45;
  --color-border:     #2A6157;
  --color-text:       #F4EFE6;
  --color-text-muted: #A9BDB6;
  --color-primary:      var(--staysy-clay);
  --color-primary-hover:#F2855F;
  --color-accent:       var(--staysy-honey);
}