/*
 * ============================================================
 * ÔCRYO — Design Tokens
 * Source : landing page officielle (29/04/2026)
 * À importer dans TOUS les templates du plugin ocryo-booking
 * ============================================================
 *
 * Art direction : Bien-être premium, froid maîtrisé, épuré
 * Palette : Bleu nuit profond + Bleu glacier + Blanc cassé
 * Typography : Playfair Display (titres) + Inter (UI/body)
 * Density : Spacieux, généreux, aéré
 */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Playfair+Display:ital,wght@0,400..700;1,400..600&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {

  /* --- Fonts --- */
  --font-display : 'Playfair Display', Georgia, serif;
  --font-body    : 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Brand Colors --- */
  --ocryo-bg          : #FAFAFA;         /* fond principal */
  --ocryo-light       : #F2F6F9;         /* sections alternées claires */
  --ocryo-dark        : #0F172A;         /* bleu nuit — texte principal */
  --ocryo-hero        : #0A1118;         /* hero / sections sombres */
  --ocryo-primary     : #1A365D;         /* CTA / accents forts */
  --ocryo-primary-hover : #152b4a;       /* état hover bouton */
  --ocryo-secondary   : #82A0BC;         /* bleu glacier — accents doux */
  --ocryo-secondary-30: rgba(130,160,188,0.30);
  --ocryo-secondary-15: rgba(130,160,188,0.15);

  /* --- Text --- */
  --ocryo-text         : #0F172A;        /* corps de texte */
  --ocryo-text-80      : rgba(15,23,42,0.80);
  --ocryo-text-70      : rgba(15,23,42,0.70);
  --ocryo-text-60      : rgba(15,23,42,0.60);
  --ocryo-text-50      : rgba(15,23,42,0.50);
  --ocryo-text-muted   : #82A0BC;        /* texte secondaire */
  --ocryo-text-inverse : #FFFFFF;        /* texte sur fond sombre */
  --ocryo-text-inv-90  : rgba(255,255,255,0.90);
  --ocryo-text-inv-80  : rgba(255,255,255,0.80);
  --ocryo-text-inv-70  : rgba(255,255,255,0.70);
  --ocryo-text-inv-60  : rgba(255,255,255,0.60);

  /* --- Borders --- */
  --ocryo-border       : rgba(130,160,188,0.30);
  --ocryo-border-50    : rgba(130,160,188,0.50);
  --ocryo-border-light : #e5e7eb;
  --ocryo-border-white : rgba(255,255,255,0.40);

  /* --- Shadows (Apple-style) --- */
  --ocryo-shadow-sm  : 0 2px 8px -2px rgba(0,0,0,0.06), 0 4px 12px -4px rgba(26,54,93,0.08);
  --ocryo-shadow-md  : 0 4px 16px -4px rgba(0,0,0,0.08), 0 8px 24px -8px rgba(26,54,93,0.10);
  --ocryo-shadow-lg  : 0 12px 40px -8px rgba(0,0,0,0.08), 0 16px 48px -12px rgba(26,54,93,0.12);
  --ocryo-shadow-xl  : 0 25px 50px -12px rgba(0,0,0,0.25);

  /* --- Radius --- */
  --ocryo-radius-sm  : 0.375rem;   /* 6px  — badges, tags */
  --ocryo-radius-md  : 0.75rem;    /* 12px — inputs, cards petites */
  --ocryo-radius-lg  : 1rem;       /* 16px — cards */
  --ocryo-radius-xl  : 1.5rem;     /* 24px — panels, modals */
  --ocryo-radius-full: 9999px;     /* pill — boutons CTA */

  /* --- Spacing (base 4px) --- */
  --ocryo-space-1  : 0.25rem;
  --ocryo-space-2  : 0.5rem;
  --ocryo-space-3  : 0.75rem;
  --ocryo-space-4  : 1rem;
  --ocryo-space-5  : 1.25rem;
  --ocryo-space-6  : 1.5rem;
  --ocryo-space-8  : 2rem;
  --ocryo-space-10 : 2.5rem;
  --ocryo-space-12 : 3rem;
  --ocryo-space-16 : 4rem;
  --ocryo-space-20 : 5rem;

  /* --- Type Scale (fluid) --- */
  --ocryo-text-xs   : clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --ocryo-text-sm   : clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --ocryo-text-base : clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --ocryo-text-lg   : clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --ocryo-text-xl   : clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --ocryo-text-2xl  : clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --ocryo-text-hero : clamp(2.5rem,   1rem    + 4vw,    5rem);

  /* --- Transitions --- */
  --ocryo-transition : 180ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Content widths --- */
  --ocryo-content-narrow  : 640px;
  --ocryo-content-default : 960px;
  --ocryo-content-wide    : 1200px;
}

/* ── Base Reset (adapté Ôcryo) ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--ocryo-text-base);
  color: var(--ocryo-text);
  background-color: var(--ocryo-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ocryo-primary);
  line-height: 1.15;
  text-wrap: balance;
}

p, li { text-wrap: pretty; max-width: 72ch; }

/* ── Composants réutilisables ─────────────────────────────── */

/* Bouton CTA principal */
.ocryo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ocryo-space-2);
  padding: var(--ocryo-space-3) var(--ocryo-space-6);
  background-color: var(--ocryo-primary);
  color: var(--ocryo-text-inverse);
  font-family: var(--font-body);
  font-size: var(--ocryo-text-sm);
  font-weight: 500;
  border: none;
  border-radius: var(--ocryo-radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ocryo-transition),
              box-shadow var(--ocryo-transition),
              transform var(--ocryo-transition);
}
.ocryo-btn:hover {
  background-color: var(--ocryo-primary-hover);
  box-shadow: var(--ocryo-shadow-md);
  transform: translateY(-1px);
}

/* Bouton secondaire (ghost) */
.ocryo-btn-ghost {
  background: transparent;
  color: var(--ocryo-primary);
  border: 1px solid var(--ocryo-border);
  border-radius: var(--ocryo-radius-full);
  padding: var(--ocryo-space-3) var(--ocryo-space-6);
  font-size: var(--ocryo-text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--ocryo-transition), border-color var(--ocryo-transition);
}
.ocryo-btn-ghost:hover {
  background-color: var(--ocryo-light);
  border-color: var(--ocryo-border-50);
}

/* Card standard */
.ocryo-card {
  background: #FFFFFF;
  border: 1px solid var(--ocryo-border);
  border-radius: var(--ocryo-radius-lg);
  padding: var(--ocryo-space-6);
  box-shadow: var(--ocryo-shadow-sm);
  transition: box-shadow var(--ocryo-transition), transform var(--ocryo-transition);
}
.ocryo-card:hover {
  box-shadow: var(--ocryo-shadow-lg);
  transform: translateY(-2px);
}

/* Section claire */
.ocryo-section-light {
  background-color: var(--ocryo-light);
  padding-block: clamp(var(--ocryo-space-10), 6vw, var(--ocryo-space-20));
}

/* Section sombre (hero, CTA) */
.ocryo-section-dark {
  background-color: var(--ocryo-hero);
  color: var(--ocryo-text-inverse);
  padding-block: clamp(var(--ocryo-space-10), 6vw, var(--ocryo-space-20));
}

/* Input */
.ocryo-input {
  width: 100%;
  padding: var(--ocryo-space-3) var(--ocryo-space-4);
  font-family: var(--font-body);
  font-size: var(--ocryo-text-sm);
  color: var(--ocryo-text);
  background: #FFFFFF;
  border: 1px solid var(--ocryo-border-light);
  border-radius: var(--ocryo-radius-md);
  outline: none;
  transition: border-color var(--ocryo-transition), box-shadow var(--ocryo-transition);
}
.ocryo-input:focus {
  border-color: var(--ocryo-secondary);
  box-shadow: 0 0 0 3px var(--ocryo-secondary-15);
}

/* Badge / Tag */
.ocryo-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ocryo-space-1) var(--ocryo-space-3);
  background: var(--ocryo-secondary-15);
  color: var(--ocryo-primary);
  font-size: var(--ocryo-text-xs);
  font-weight: 500;
  border-radius: var(--ocryo-radius-full);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Divider */
.ocryo-divider {
  border: none;
  border-top: 1px solid var(--ocryo-border);
  margin-block: var(--ocryo-space-6);
}

/* Container */
.ocryo-container {
  max-width: var(--ocryo-content-default);
  margin-inline: auto;
  padding-inline: var(--ocryo-space-4);
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--ocryo-secondary);
  outline-offset: 3px;
  border-radius: var(--ocryo-radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}