/* =============================================================
   La Villa des Souvenirs — Colors & Type Tokens
   Sky-blue (sea) · Warm beige (façade) · Deep brown (linework)
   Boutique villa rental, Marseille.
============================================================= */

/* Fonts: load via Google Fonts at the page level with a normal
   <link rel="stylesheet"> tag (preferred), OR uncomment the
   @import below. We avoid @import-in-CSS by default because
   some sandboxes block it. */
/* @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap"); */

:root {
  /* ---------- BRAND PALETTE -------------------------------- */
  /* Beige — façade, interior neutrals. The "paper" of the brand. */
  --beige-50:  #FBF7EE;
  --beige-100: #F4ECDC;
  --beige-200: #E8DCC4;
  --beige-300: #D9C7A4;
  --beige-400: #BFA982;
  --beige-500: #9C8867;

  /* Bleu ciel — soft Mediterranean sky. The whole scale stays light;
     no dark teal at the deep end. --sky-300 is the signature. */
  --sky-50:  #EEF4F6;
  --sky-100: #D7F1F2;
  --sky-200: #A8E5E7;
  --sky-300: #88CDF2;   /* signature sky blue */
  --sky-400: #74C4EE;
  --sky-500: #60B7E8;   /* deepest in the scale — still soft */

  /* Marron très foncé — logo linework, body copy, anchors. */
  --brown-900: #2A1D12;
  --brown-800: #3A2A1A;
  --brown-700: #4E3A24;
  --brown-600: #6B5238;
  --brown-500: #8A7257;

  /* Sage — Mediterranean vegetation. Pine, olive, palm.
     Muted, never kelly-green. Use as a quiet 4th color: foliage
     accents, photo captions on cream, illustration outlines. */
  --sage-50:  #EEF1E7;
  --sage-100: #D7DEC7;
  --sage-200: #B4C098;
  --sage-300: #8FA071;   /* signature sage */
  --sage-400: #6B7E54;
  --sage-500: #4F5E42;   /* pine canopy */
  --sage-600: #34402C;   /* deep pine shadow */

  /* (Terracotta scale removed at owner's request — palette stays
     beige + sky + brown only. Re-introduce only with explicit approval.) */

  /* ---------- SEMANTIC TOKENS ------------------------------ */
  --bg:           var(--beige-50);
  --bg-elevated:  #FFFFFF;
  --bg-muted:     var(--beige-100);
  --bg-inverse:   var(--brown-900);

  --fg:           var(--brown-800);
  --fg-1:         var(--brown-800);
  --fg-2:         var(--brown-700);
  --fg-3:         var(--brown-600);
  --fg-muted:     var(--brown-500);
  --fg-inverse:   var(--beige-50);

  --accent:       var(--sky-500);   /* deep teal — links, CTA hovers */
  --accent-bright:var(--sky-300);   /* signature #79DBDC — hero accents */
  --accent-soft:  var(--sky-100);   /* surface tint, selection */

  --border:       var(--beige-200);
  --border-strong:var(--beige-300);
  --border-ink:   var(--brown-800);

  --focus-ring:   var(--sky-500);

  /* Border radii on interactive controls. The brand favours
     rectangular, low-radius buttons — do not switch to pills. */
  --radius-button: 0px;

  /* ---------- BUTTON TOKENS -------------------------------- */
  /* Locked v1 button palette. Always rectangular, soft gray hairline. */
  --btn-border:        rgba(58, 42, 26, 0.16);
  --btn-border-hover:  rgba(58, 42, 26, 0.28);

  --btn-ink-bg:        #FCF2D9;   /* pale cream-yellow — primary CTA */
  --btn-ink-bg-hover:  #F7E9C2;
  --btn-ink-fg:        var(--brown-900);

  --btn-primary-bg:        #D7F1F2;   /* sky-100 — Rechercher / search */
  --btn-primary-bg-hover:  #BDE8EA;
  --btn-primary-fg:        var(--brown-900);

  --btn-sage-bg:           #D7DEC7;   /* sage-100 — secondary / découvrir */
  --btn-sage-bg-hover:     #B4C098;
  --btn-sage-fg:           var(--brown-900);

  --btn-ghost-fg:          var(--brown-900);
  --btn-ghost-border:      rgba(58, 42, 26, 0.22);
  --btn-ghost-bg-hover:    var(--beige-100);

  --btn-link-fg:           #3F9CD9;
  --btn-link-fg-hover:     #2A8ED3;
  --btn-link-underline:    #88CDF2;
  --btn-link-bg-hover:     #EEF4F6;

  /* ---------- TYPE FAMILIES -------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Garamond,
                  "Times New Roman", serif;
  --font-sans:    "Jost", "Nunito Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- TYPE SCALE ----------------------------------- */
  --fs-display:  clamp(3rem, 6vw, 5.5rem);
  --fs-h1:       clamp(2.25rem, 4.2vw, 3.75rem);
  --fs-h2:       clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-lg:       1.125rem;
  --fs-base:     1rem;
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.55;
  --lh-loose:    1.75;
  --tracking-eyebrow: 0.24em;
  --tracking-tight: -0.01em;
  --tracking-display: -0.015em;

  /* ---------- SPACING (4-pt) ------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- RADII ---------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------- SHADOWS — warm, low, sun-soft ---------------- */
  --shadow-xs: 0 1px 2px rgba(58, 42, 26, 0.06);
  --shadow-sm: 0 2px 6px rgba(58, 42, 26, 0.08);
  --shadow-md: 0 6px 16px rgba(58, 42, 26, 0.10);
  --shadow-lg: 0 18px 40px rgba(58, 42, 26, 0.14);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---------- MOTION --------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;

  /* ---------- LAYOUT --------------------------------------- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* =============================================================
   ELEMENT DEFAULTS
============================================================= */
html { color-scheme: light; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--brown-900);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

.display { font-size: var(--fs-display); font-weight: 300; }
h1 { font-size: var(--fs-h1); font-weight: 400; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); font-weight: 500; line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: 500; line-height: var(--lh-snug); }

h1 em, h2 em, .display em {
  font-style: italic;
  font-weight: 300;
  color: var(--brown-700);
}

p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--sky-600); border-bottom-color: currentColor; }

small, .caption { font-size: var(--fs-sm); color: var(--fg-3); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--brown-600);
}

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-12) 0; }

::selection { background: var(--sky-200); color: var(--brown-900); }

/* Default <button> styling — rectangular, cream-ink "réserver" feel.
   Specific roles override with .btn-* classes (see UI kits). */
button {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 13px 26px;
  border: 1px solid var(--btn-border);
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
button:hover { background: var(--btn-ink-bg-hover); border-color: var(--btn-border-hover); }
button:active { transform: translateY(1px); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }