/*
 * ============================================================
 * ÔCRYO — Variables de design
 * ============================================================
 *
 * Les seules déclarations de ce fichier sont des variables : il
 * ne peint rien de lui-même. C'est ce qui permet de le charger
 * partout, y compris dans l'admin WordPress, sans toucher à une
 * mise en page existante.
 *
 * La base de style, le reset et les composants vivent dans
 * ocryo-design-tokens.css, qui dépend de ce fichier.
 */

/* ── 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);

  /* --- Sémantique --- */
  /* Un vert et un rouge, pas huit et cinq. Ces deux valeurs tiennent le
     seuil AA dans les deux sens : en texte sur fond clair comme en fond
     sous du texte blanc. */
  --ocryo-success      : #15803d;
  --ocryo-danger       : #b91c1c;

  /* --- 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;
}