/* ═══════════════════════════════════════════════════════════════
   SEL · Marie Julien Cuisine — Design tokens (source unique)
   ═══════════════════════════════════════════════════════════════
   Charge ce fichier dans tes apps avec :
       <link rel="stylesheet" href="https://hub.mariejuliencuisine.com/sel.css">

   Édite ce fichier une seule fois (apps/workspace/public/sel.css dans
   le repo mj-stack), push, et les 4 apps prennent la nouvelle version
   au prochain rafraîchissement navigateur.

   Conventions :
   - Variables `--color-*` (Sel canonique, utilisées par Mommento +
     Support).
   - Alias `--sel-*` (compat MJCTDB) pointent vers les mêmes valeurs.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─────────── COULEURS · TEXTE ─────────── */
  --color-ink:        #0F172A;
  --color-ink-soft:   #334155;
  --color-muted:      #64748B;

  /* ─────────── COULEURS · SURFACES ─────────── */
  --color-canvas:     #FFFFFF;
  --color-surface:    #FAFAF9;
  --color-wash:       #F8FAFC;

  /* ─────────── COULEURS · LIGNES ─────────── */
  --color-line:       #E5E7EB;
  --color-line-soft:  #F1F5F9;

  /* ─────────── COULEURS · ACCENT ─────────── */
  --color-accent:        #4F46E5;
  --color-accent-hover:  #4338CA;
  --color-accent-soft:   #EEF2FF;
  --color-on-accent:     #FFFFFF;

  /* ─────────── COULEURS · SÉMANTIQUES ─────────── */
  --color-success:       #059669;
  --color-success-soft:  #ECFDF5;
  --color-warn:          #D97706;
  --color-warn-soft:     #FFFBEB;
  --color-danger:        #DC2626;
  --color-danger-soft:   #FEF2F2;
  --color-info:          #0EA5E9;
  --color-info-soft:     #F0F9FF;

  /* ─────────── TYPOGRAPHIE · FAMILLES ─────────── */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter',       -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─────────── TYPOGRAPHIE · ÉCHELLE ─────────── */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    16px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   48px;
  --text-4xl:   64px;

  /* ─────────── TYPOGRAPHIE · POIDS ─────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ─────────── TYPOGRAPHIE · HAUTEUR DE LIGNE ─────────── */
  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;

  /* ─────────── TYPOGRAPHIE · ESPACEMENT LETTRES ─────────── */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.1em;

  /* ─────────── ESPACEMENTS (base 4) ─────────── */
  --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;

  /* ─────────── RAYONS ─────────── */
  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* ─────────── ÉLÉVATIONS (ombres tonales) ─────────── */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg:    0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-xl:    0 20px 60px rgba(15, 23, 42, .18), 0 4px 16px rgba(15, 23, 42, .08);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, .15);

  /* ─────────── MOTION · COURBES ─────────── */
  --ease-out:    cubic-bezier(.2, .7, .3, 1);
  --ease-spring: cubic-bezier(.2, .7, .3, 1.4);
  --ease-sharp:  cubic-bezier(.7, 0, .3, 1);
  --ease-linear: linear;

  /* ─────────── MOTION · DURÉES ─────────── */
  --duration-fast:     120ms;
  --duration-base:     200ms;
  --duration-moderate: 300ms;
  --duration-slow:     500ms;

  /* ─────────── LAYOUT ─────────── */
  --max-width:      1280px;
  --gutter:         24px;
  --sidebar-width:  220px;
  --topbar-height:  56px;

  /* ═══════════════════════════════════════════════════════════
     ALIAS LEGACY (compat MJCTDB) — préfixes `--sel-*`
     Pointent vers les variables canoniques `--color-*` / autres.
     À retirer quand MJCTDB aura migré.
     ═══════════════════════════════════════════════════════════ */

  --sel-ink:           var(--color-ink);
  --sel-ink-soft:      var(--color-ink-soft);
  --sel-muted:         var(--color-muted);
  --sel-canvas:        var(--color-canvas);
  --sel-surface:       var(--color-surface);
  --sel-wash:          var(--color-wash);
  --sel-line:          var(--color-line);
  --sel-line-soft:     var(--color-line-soft);
  --sel-accent:        var(--color-accent);
  --sel-accent-hover:  var(--color-accent-hover);
  --sel-accent-soft:   var(--color-accent-soft);
  --sel-on-accent:     var(--color-on-accent);
  --sel-success:       var(--color-success);
  --sel-warn:          var(--color-warn);
  --sel-danger:        var(--color-danger);
  --sel-info:          var(--color-info);
  --sel-shadow-sm:     var(--shadow-sm);
  --sel-shadow-md:     var(--shadow-md);
  --sel-shadow-lg:     var(--shadow-lg);
  --sel-font-body:     var(--font-body);
  --sel-font-display:  var(--font-display);
  --sel-font-mono:     var(--font-mono);
  --sel-t-fast:        var(--duration-fast) var(--ease-out);
  --sel-t-base:        var(--duration-base) var(--ease-out);
}