/* ═══════════════════════════════════════════════════════════════════════
   APPYCALL V2 — Design tokens
   Fondation du design system. N'importe rien. Ne cible aucun élément.
   Uniquement des variables CSS à consommer par components/patterns/...
   ═══════════════════════════════════════════════════════════════════════ */

:root, .acv2 {

  /* ─────────────────────────────────────────────────────────────────────
     1. PALETTE — Neutrals
     Échelle 50→950 pour surfaces, textes, bordures.
     Basée sur Zinc (plus chaud que Slate, plus froid que Gray).
     ───────────────────────────────────────────────────────────────────── */
  --acv2-neutral-0:    #ffffff;
  --acv2-neutral-50:   #fafafa;
  --acv2-neutral-100:  #f4f4f5;
  --acv2-neutral-150:  #ececee;
  --acv2-neutral-200:  #e4e4e7;
  --acv2-neutral-300:  #d4d4d8;
  --acv2-neutral-400:  #a1a1aa;
  --acv2-neutral-500:  #71717a;
  --acv2-neutral-600:  #52525b;
  --acv2-neutral-700:  #3f3f46;
  --acv2-neutral-800:  #27272a;
  --acv2-neutral-850:  #1c1c1f;
  --acv2-neutral-900:  #18181b;
  --acv2-neutral-950:  #09090b;
  --acv2-neutral-1000: #000000;

  /* ─────────────────────────────────────────────────────────────────────
     2. PALETTE — Primaire (action)
     Bleu Appezy. Échelle pleine pour hover/press/disabled/bg soft.
     ───────────────────────────────────────────────────────────────────── */
  --acv2-primary-50:   #eff6ff;
  --acv2-primary-100:  #dbeafe;
  --acv2-primary-200:  #bfdbfe;
  --acv2-primary-300:  #93c5fd;
  --acv2-primary-400:  #60a5fa;
  --acv2-primary-500:  #3b82f6;   /* base */
  --acv2-primary-600:  #2563eb;   /* hover */
  --acv2-primary-700:  #1d4ed8;   /* press */
  --acv2-primary-800:  #1e40af;
  --acv2-primary-900:  #1e3a8a;
  --acv2-primary-950:  #172554;

  /* ─────────────────────────────────────────────────────────────────────
     3. PALETTE — Semantic
     Success / Warning / Danger / Info. Échelle base+soft+strong+text.
     ───────────────────────────────────────────────────────────────────── */
  --acv2-success-50:   #f0fdf4;
  --acv2-success-100:  #dcfce7;
  --acv2-success-500:  #22c55e;
  --acv2-success-600:  #16a34a;
  --acv2-success-700:  #15803d;

  --acv2-warning-50:   #fffbeb;
  --acv2-warning-100:  #fef3c7;
  --acv2-warning-500:  #f59e0b;
  --acv2-warning-600:  #d97706;
  --acv2-warning-700:  #b45309;

  --acv2-danger-50:    #fef2f2;
  --acv2-danger-100:   #fee2e2;
  --acv2-danger-500:   #ef4444;
  --acv2-danger-600:   #dc2626;
  --acv2-danger-700:   #b91c1c;

  --acv2-info-50:      #ecfeff;
  --acv2-info-100:     #cffafe;
  --acv2-info-500:     #06b6d4;
  --acv2-info-600:     #0891b2;
  --acv2-info-700:     #0e7490;

  /* Accents secondaires (statuts métier call, tags) */
  --acv2-violet-500:   #8b5cf6;
  --acv2-violet-600:   #7c3aed;
  --acv2-pink-500:     #ec4899;
  --acv2-orange-500:   #f97316;
  --acv2-teal-500:     #14b8a6;

  /* ─────────────────────────────────────────────────────────────────────
     4. SURFACES — tokens sémantiques (thème CLAIR par défaut)
     Consomme les neutrals. Les thèmes dark/high-contrast surchargent.
     ───────────────────────────────────────────────────────────────────── */
  --acv2-surface-0:    var(--acv2-neutral-0);     /* app bg */
  --acv2-surface-1:    var(--acv2-neutral-50);    /* bg doux, sidebar */
  --acv2-surface-2:    var(--acv2-neutral-100);   /* bg hover row, filtre */
  --acv2-surface-3:    var(--acv2-neutral-150);   /* bg press */
  --acv2-surface-inv:  var(--acv2-neutral-900);   /* tooltip, inverse */

  --acv2-border-subtle:  var(--acv2-neutral-150);
  --acv2-border:         var(--acv2-neutral-200);
  --acv2-border-strong:  var(--acv2-neutral-300);
  --acv2-border-focus:   var(--acv2-primary-500);

  --acv2-text:           var(--acv2-neutral-900);
  --acv2-text-soft:      var(--acv2-neutral-700);
  --acv2-text-muted:     var(--acv2-neutral-500);
  --acv2-text-disabled:  var(--acv2-neutral-400);
  --acv2-text-inv:       var(--acv2-neutral-0);
  --acv2-text-link:      var(--acv2-primary-600);
  --acv2-text-link-hover:var(--acv2-primary-700);

  --acv2-icon:           var(--acv2-neutral-600);
  --acv2-icon-muted:     var(--acv2-neutral-400);

  /* Surfaces semantic (backgrounds pastel pour alerts/badges) */
  --acv2-bg-primary-soft: var(--acv2-primary-50);
  --acv2-bg-success-soft: var(--acv2-success-50);
  --acv2-bg-warning-soft: var(--acv2-warning-50);
  --acv2-bg-danger-soft:  var(--acv2-danger-50);
  --acv2-bg-info-soft:    var(--acv2-info-50);

  /* ─────────────────────────────────────────────────────────────────────
     5. TYPOGRAPHIE
     Inter partout. tabular-nums pour chiffres alignés (colonnes call).
     ───────────────────────────────────────────────────────────────────── */
  --acv2-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --acv2-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /* Échelle (rem basé sur 16px). xs=11, sm=12, base=13, md=14, lg=16, xl=18, 2xl=22, 3xl=28, 4xl=36 */
  --acv2-text-xs:   0.6875rem;   /* 11px — caption, timestamps */
  --acv2-text-sm:   0.75rem;     /* 12px — helper, labels */
  --acv2-text-base: 0.8125rem;   /* 13px — body (densité call) */
  --acv2-text-md:   0.875rem;    /* 14px — body confortable */
  --acv2-text-lg:   1rem;        /* 16px — titre section */
  --acv2-text-xl:   1.125rem;    /* 18px — titre page */
  --acv2-text-2xl:  1.375rem;    /* 22px — titre modal */
  --acv2-text-3xl:  1.75rem;     /* 28px — KPI */
  --acv2-text-4xl:  2.25rem;     /* 36px — KPI hero */

  --acv2-weight-regular:  400;
  --acv2-weight-medium:   500;
  --acv2-weight-semibold: 600;
  --acv2-weight-bold:     700;

  --acv2-leading-tight:   1.2;   /* titres */
  --acv2-leading-snug:    1.35;  /* sous-titres */
  --acv2-leading-normal:  1.5;   /* body */
  --acv2-leading-relaxed: 1.65;  /* long form */

  --acv2-tracking-tight:  -0.01em;
  --acv2-tracking-normal: 0;
  --acv2-tracking-wide:   0.02em;
  --acv2-tracking-caps:   0.06em;  /* SMALL CAPS labels */

  /* ─────────────────────────────────────────────────────────────────────
     6. SPACING — base 4px
     Utilisé pour padding/margin/gap. 8 valeurs couvrent 99% des besoins.
     ───────────────────────────────────────────────────────────────────── */
  --acv2-space-0:   0;
  --acv2-space-1:   0.25rem;   /* 4 */
  --acv2-space-2:   0.5rem;    /* 8 */
  --acv2-space-3:   0.75rem;   /* 12 */
  --acv2-space-4:   1rem;      /* 16 */
  --acv2-space-5:   1.25rem;   /* 20 */
  --acv2-space-6:   1.5rem;    /* 24 */
  --acv2-space-8:   2rem;      /* 32 */
  --acv2-space-10:  2.5rem;    /* 40 */
  --acv2-space-12:  3rem;      /* 48 */
  --acv2-space-16:  4rem;      /* 64 */

  /* ─────────────────────────────────────────────────────────────────────
     7. RADIUS
     ───────────────────────────────────────────────────────────────────── */
  --acv2-radius-xs:   2px;
  --acv2-radius-sm:   4px;
  --acv2-radius-md:   6px;   /* cards, inputs */
  --acv2-radius-lg:   8px;   /* modals */
  --acv2-radius-xl:   12px;  /* drawer, sheets */
  --acv2-radius-2xl:  16px;
  --acv2-radius-full: 9999px;

  /* ─────────────────────────────────────────────────────────────────────
     8. SHADOWS — Linear-like, ultra-subtiles
     Chaque niveau = 1 ombre ambient + 1 ombre directionnelle.
     ───────────────────────────────────────────────────────────────────── */
  --acv2-shadow-xs:  0 1px 1px rgba(0,0,0,.04);
  --acv2-shadow-sm:  0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --acv2-shadow-md:  0 4px 8px -2px rgba(0,0,0,.06), 0 2px 4px -1px rgba(0,0,0,.04);
  --acv2-shadow-lg:  0 12px 24px -6px rgba(0,0,0,.08), 0 4px 8px -2px rgba(0,0,0,.05);
  --acv2-shadow-xl:  0 24px 48px -12px rgba(0,0,0,.14), 0 8px 16px -4px rgba(0,0,0,.06);
  --acv2-shadow-2xl: 0 40px 80px -20px rgba(0,0,0,.2);

  /* Ring (focus/selected). Remplace outline. */
  --acv2-ring-focus:   0 0 0 3px rgba(59, 130, 246, .25);  /* primary 500 @ .25 */
  --acv2-ring-danger:  0 0 0 3px rgba(239, 68, 68, .25);
  --acv2-ring-success: 0 0 0 3px rgba(34, 197, 94, .25);

  /* ─────────────────────────────────────────────────────────────────────
     9. TRANSITIONS & EASINGS
     Premium easings inspirés Linear/Stripe. 3 vitesses standards.
     ───────────────────────────────────────────────────────────────────── */
  --acv2-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);          /* sortie douce — enter */
  --acv2-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);         /* équilibré — states */
  --acv2-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);      /* léger overshoot — feedback */
  --acv2-ease-sharp:    cubic-bezier(0.4, 0, 0.2, 1);           /* Material sharp — menu */

  --acv2-duration-instant: 0ms;
  --acv2-duration-fast:    120ms;  /* hover, press */
  --acv2-duration-base:    200ms;  /* modal, drawer */
  --acv2-duration-slow:    300ms;  /* page transition */
  --acv2-duration-slower:  500ms;  /* grosse anim orchestrée */

  --acv2-transition-colors: color var(--acv2-duration-fast) var(--acv2-ease-out),
                            background-color var(--acv2-duration-fast) var(--acv2-ease-out),
                            border-color var(--acv2-duration-fast) var(--acv2-ease-out),
                            box-shadow var(--acv2-duration-fast) var(--acv2-ease-out);
  --acv2-transition-transform: transform var(--acv2-duration-fast) var(--acv2-ease-out);
  --acv2-transition-all: all var(--acv2-duration-fast) var(--acv2-ease-out);

  /* ─────────────────────────────────────────────────────────────────────
     10. Z-INDEX — hiérarchie stricte
     Aligné sur l'existant V1 pour éviter les conflits pendant la cohabitation.
     ───────────────────────────────────────────────────────────────────── */
  --acv2-z-base:           1;
  --acv2-z-sticky:         100;
  --acv2-z-navbar:         900;
  --acv2-z-sticky-bar:     1040;
  --acv2-z-dropdown:       9000;
  --acv2-z-popover:        9999;
  --acv2-z-toast:          10500;
  --acv2-z-drawer:         50000;
  --acv2-z-modal-backdrop: 100040;
  --acv2-z-modal:          100050;
  --acv2-z-dropdown-modal: 200000;
  --acv2-z-confirm:        500000;

  /* ─────────────────────────────────────────────────────────────────────
     11. LAYOUT — densités
     Hauteur de ligne pour Table en deux densités (compact / confort).
     ───────────────────────────────────────────────────────────────────── */
  --acv2-row-height-compact: 32px;
  --acv2-row-height-confort: 44px;
  --acv2-row-height: var(--acv2-row-height-compact);

  --acv2-control-height-xs: 24px;
  --acv2-control-height-sm: 28px;
  --acv2-control-height-md: 32px;
  --acv2-control-height-lg: 40px;
  --acv2-control-height-xl: 48px;   /* touch target iOS/Android min 44 */

  --acv2-touch-target: 44px;

  /* Safe-area iOS (notch + home bar) */
  --acv2-safe-top:    env(safe-area-inset-top, 0);
  --acv2-safe-right:  env(safe-area-inset-right, 0);
  --acv2-safe-bottom: env(safe-area-inset-bottom, 0);
  --acv2-safe-left:   env(safe-area-inset-left, 0);

  /* ─────────────────────────────────────────────────────────────────────
     12. BREAKPOINTS (pour référence JS / media queries manuelles)
     ───────────────────────────────────────────────────────────────────── */
  --acv2-bp-sm: 640px;
  --acv2-bp-md: 768px;
  --acv2-bp-lg: 1024px;
  --acv2-bp-xl: 1280px;
  --acv2-bp-2xl: 1536px;
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME — DARK (true dark, #09090b)
   Activé via [data-acv2-theme="dark"] OU body.acv2-dark
   Préparé aussi pour l'auto via @media prefers-color-scheme en opt-in.
   ═══════════════════════════════════════════════════════════════════════ */
[data-acv2-theme="dark"],
body.acv2-dark {
  --acv2-surface-0:    var(--acv2-neutral-950);
  --acv2-surface-1:    var(--acv2-neutral-900);
  --acv2-surface-2:    var(--acv2-neutral-850);
  --acv2-surface-3:    var(--acv2-neutral-800);
  --acv2-surface-inv:  var(--acv2-neutral-50);

  --acv2-border-subtle:  var(--acv2-neutral-850);
  --acv2-border:         var(--acv2-neutral-800);
  --acv2-border-strong:  var(--acv2-neutral-700);
  --acv2-border-focus:   var(--acv2-primary-400);

  --acv2-text:           var(--acv2-neutral-50);
  --acv2-text-soft:      var(--acv2-neutral-200);
  --acv2-text-muted:     var(--acv2-neutral-400);
  --acv2-text-disabled:  var(--acv2-neutral-600);
  --acv2-text-inv:       var(--acv2-neutral-900);
  --acv2-text-link:      var(--acv2-primary-400);
  --acv2-text-link-hover:var(--acv2-primary-300);

  --acv2-icon:           var(--acv2-neutral-300);
  --acv2-icon-muted:     var(--acv2-neutral-500);

  --acv2-bg-primary-soft: rgba(59, 130, 246, 0.12);
  --acv2-bg-success-soft: rgba(34, 197, 94, 0.12);
  --acv2-bg-warning-soft: rgba(245, 158, 11, 0.14);
  --acv2-bg-danger-soft:  rgba(239, 68, 68, 0.14);
  --acv2-bg-info-soft:    rgba(6, 182, 212, 0.14);

  /* Ombres ajustées (plus légères, + ring subtil en haut) */
  --acv2-shadow-xs:  0 1px 1px rgba(0,0,0,.5);
  --acv2-shadow-sm:  0 1px 2px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02);
  --acv2-shadow-md:  0 4px 8px -2px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.03);
  --acv2-shadow-lg:  0 12px 24px -6px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.04);
  --acv2-shadow-xl:  0 24px 48px -12px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.05);
  --acv2-shadow-2xl: 0 40px 80px -20px rgba(0,0,0,.95);

  --acv2-ring-focus:   0 0 0 3px rgba(96, 165, 250, .35);
  --acv2-ring-danger:  0 0 0 3px rgba(248, 113, 113, .35);
  --acv2-ring-success: 0 0 0 3px rgba(74, 222, 128, .35);
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME — HIGH CONTRAST
   Accessibilité : contraste AAA, focus rings plus épais, couleurs saturées.
   Activé via [data-acv2-theme="hc"] OU body.acv2-hc
   ═══════════════════════════════════════════════════════════════════════ */
[data-acv2-theme="hc"],
body.acv2-hc {
  --acv2-surface-0:    #ffffff;
  --acv2-surface-1:    #ffffff;
  --acv2-surface-2:    #f0f0f0;
  --acv2-surface-3:    #e0e0e0;

  --acv2-border-subtle:  #000000;
  --acv2-border:         #000000;
  --acv2-border-strong:  #000000;
  --acv2-border-focus:   #0040ff;

  --acv2-text:           #000000;
  --acv2-text-soft:      #000000;
  --acv2-text-muted:     #3a3a3a;
  --acv2-text-disabled:  #6a6a6a;
  --acv2-text-link:      #0000cc;
  --acv2-text-link-hover:#0040ff;

  --acv2-primary-500:    #0040ff;
  --acv2-primary-600:    #002fcc;
  --acv2-success-500:    #006400;
  --acv2-warning-500:    #a05a00;
  --acv2-danger-500:     #cc0000;

  --acv2-ring-focus:   0 0 0 4px rgba(0, 64, 255, .7);
  --acv2-ring-danger:  0 0 0 4px rgba(204, 0, 0, .7);
}

/* ═══════════════════════════════════════════════════════════════════════
   OPT-IN AUTO DARK — activé uniquement si body porte .acv2-auto
   (pour laisser l'utilisateur décider, on ne force jamais l'auto)
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  body.acv2-auto:not(.acv2-hc) {
    --acv2-surface-0:    var(--acv2-neutral-950);
    --acv2-surface-1:    var(--acv2-neutral-900);
    --acv2-surface-2:    var(--acv2-neutral-850);
    --acv2-surface-3:    var(--acv2-neutral-800);
    --acv2-border-subtle:  var(--acv2-neutral-850);
    --acv2-border:         var(--acv2-neutral-800);
    --acv2-border-strong:  var(--acv2-neutral-700);
    --acv2-text:           var(--acv2-neutral-50);
    --acv2-text-soft:      var(--acv2-neutral-200);
    --acv2-text-muted:     var(--acv2-neutral-400);
    --acv2-icon:           var(--acv2-neutral-300);
    --acv2-icon-muted:     var(--acv2-neutral-500);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — respecte prefers-reduced-motion
   Override global : toutes les durations tombent à 1ms.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root, .acv2 {
    --acv2-duration-fast:   1ms;
    --acv2-duration-base:   1ms;
    --acv2-duration-slow:   1ms;
    --acv2-duration-slower: 1ms;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BASE RESET scopé .acv2 (racine du showcase et futur base_v2)
   On ne touche PAS au body global pour ne pas casser la V1.
   ═══════════════════════════════════════════════════════════════════════ */
.acv2 {
  font-family: var(--acv2-font-sans);
  font-size: var(--acv2-text-base);
  line-height: var(--acv2-leading-normal);
  color: var(--acv2-text);
  background: var(--acv2-surface-0);
  font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter : alt 1, glyphes propres */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.acv2 *,
.acv2 *::before,
.acv2 *::after {
  box-sizing: border-box;
}

/* Tabular nums par défaut sur tout chiffre dans la V2 (alignement parfait
   dans les colonnes tables, KPIs, horaires planning, montants…) */
.acv2 table,
.acv2 .acv2-num,
.acv2 time,
.acv2 input[type="number"],
.acv2 input[type="tel"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'cv11' 1;
}