/* La Cavale des Prés — Styles compilés */

/* ── Fonts ── */
/* La Cavale des Prés — Webfonts
   Titles: Roboto · Body: Open Sans
   Served from Google Fonts. Consumers get these via styles.css. */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');


/* ── Colors ── */
/* La Cavale des Prés — Color tokens
   Brand: Bleu #26275D · Gris #C7C7C7
   Supporting naturals derived in oklch to stay harmonious:
   warm hay/foin creams (the brand buys local Clarée hay) and a
   muted alpine sage for the eco-responsible voice. */

:root {
  /* ---- Brand core ---- */
  --blue-900: #161636;
  --blue-800: #1d1e47;
  --blue-700: #26275d; /* PRIMARY — Bleu La Cavale */
  --blue-600: #34367a;
  --blue-500: #474a97;
  --blue-400: #6f72b4;
  --blue-300: #9b9dcf;
  --blue-200: #c6c7e6;
  --blue-100: #e6e7f4;
  --blue-50:  #f3f3fa;

  /* ---- Neutral gris ---- */
  --gris-900: #2c2c2e;
  --gris-800: #444446;
  --gris-700: #5e5e60;
  --gris-600: #7a7a7c;
  --gris-500: #9a9a9c;
  --gris-400: #c7c7c7; /* Gris La Cavale */
  --gris-300: #dadada;
  --gris-200: #e8e8e8;
  --gris-150: #f0f0f0;
  --gris-100: #f6f6f6;
  --white:    #ffffff;

  /* ---- Foin / hay warm naturals ---- */
  --hay-700: #8a7345;
  --hay-500: #c2a366;
  --hay-300: #e7d8b6;
  --hay-100: #f6efe0;
  --hay-50:  #faf6ec;

  /* ---- Sage / alpine eco accent ---- */
  --sage-700: #475244;
  --sage-500: #6e7f66;
  --sage-300: #a6b39d;
  --sage-100: #e3e8df;

  /* ---- Semantic ---- */
  --success: #5a7a4f;
  --warning: #b8862f;
  --danger:  #a23b35;
  --info:    var(--blue-500);

  /* ---- Surfaces ---- */
  --surface-page:    var(--hay-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--gris-100);
  --surface-inverse: var(--blue-700);
  --surface-accent:  var(--blue-50);

  /* ---- Text ---- */
  --text-strong:   var(--blue-900);
  --text-body:     var(--gris-800);
  --text-muted:    var(--gris-600);
  --text-subtle:   var(--gris-500);
  --text-on-blue:  #eef0fb;
  --text-on-blue-muted: var(--blue-200);
  --text-link:     var(--blue-600);

  /* ---- Borders ---- */
  --border-soft:   var(--gris-200);
  --border-default:var(--gris-300);
  --border-strong: var(--gris-400);
  --border-blue:   var(--blue-200);
  --focus-ring:    var(--blue-500);
}


/* ── Typography ── */
/* La Cavale des Prés — Typography tokens
   Titles: Roboto (geometric, sturdy, alpine-signage feel)
   Body:   Open Sans (humanist, calm, readable) */

:root {
  --font-title: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-body:  'Open Sans', 'Segoe UI', system-ui, sans-serif;

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   900; /* @kind font */

  /* Type scale (1.250 major-third, rem) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  2.875rem;  /* 46 */
  --text-4xl:  3.75rem;   /* 60 */
  --text-5xl:  4.75rem;   /* 76 */

  /* Line heights */
  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Tracking */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.14em; /* small-caps labels / eyebrows */
}


/* ── Spacing ── */
/* La Cavale des Prés — Spacing, radii, shadows, layout */

:root {
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radii — modest, calm, alpine-signage */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows — soft, low-contrast (navy-tinted) */
  --shadow-xs: 0 1px 2px rgba(38, 39, 93, 0.06);
  --shadow-sm: 0 2px 6px rgba(38, 39, 93, 0.08);
  --shadow-md: 0 8px 20px rgba(38, 39, 93, 0.10);
  --shadow-lg: 0 18px 44px rgba(38, 39, 93, 0.14);
  --shadow-focus: 0 0 0 3px rgba(71, 74, 151, 0.30);

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: var(--space-5);

  /* Motion — calm, no bounce */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}