/* ─────────────────────────────────────────────────────────────
   Babykare ERP — Design Tokens
   Brand: Open Sans · #F6F1EC bg · #AE7C72 accent · #FCEAC5 sidebar
   8px grid system: --space-1..8
   ───────────────────────────────────────────────────────────── */

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

:root {
  /* ── Typographie ─────────────────────────────────────────── */
  --font-sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Fira Code", Consolas, monospace;

  /* Typographic scale */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2rem;       /* 32px */

  /* ── 8px Grid Spacing ────────────────────────────────────── */
  /* Convention : tout padding/margin/gap = multiple de 8px     */
  /* --space-1 = exception demi-unité pour micro-ajustements    */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   40px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;

  /* ── Palette sidebar — crème chaude ─────────────────────── */
  --color-sidebar-bg:         #FCEAC5;
  --color-sidebar-text:       #4a3728;
  --color-sidebar-text-muted: rgba(74,55,40,0.75);  /* raised opacity for WCAG AA on sidebar-bg */
  --color-sidebar-hover:      rgba(174,124,114,0.12);
  --color-sidebar-active:     rgba(174,124,114,0.20);
  --color-sidebar-active-text:#AE7C72;
  --color-sidebar-border:     rgba(174,124,114,0.20);

  /* ── Palette principale — fond warm white ────────────────── */
  --color-bg:              #F6F1EC;
  --color-surface:         #FFFFFF;
  --color-surface-raised:  #FDFBF8;
  --color-border:          #e8e0d5;
  --color-border-strong:   #d4c8b8;

  /* ── Texte ───────────────────────────────────────────────── */
  --color-text-primary:    #1a1208;
  --color-text-secondary:  #6b5c4e;
  --color-text-muted:      #6d5e51;  /* WCAG AA 5.1:1 on #F6F1EC bg, 5.6:1 on white */

  /* ── Accents Babykare ────────────────────────────────────── */
  --color-accent:          #AE7C72;
  --color-accent-hover:    #9a6b61;
  --color-accent-soft:     #f8eeec;
  --color-accent-2:        #d4e2cb;   /* vert sauge second accent */
  --color-accent-2-soft:   #edf4ea;

  /* ── Liens / bleus neutres ───────────────────────────────── */
  --color-blue:            #7a9fc2;
  --color-blue-soft:       #eef4f9;

  /* ── Statuts ─────────────────────────────────────────────── */
  --status-active-bg:       #f0fdf4;
  --status-active-text:     #15803d; /* green-700 — 5.1:1 PASS */
  --status-active-border:   #bbf7d0;
  --status-archived-bg:     #f3f4f6;
  --status-archived-text:   #374151; /* gray-700 — 6.7:1 on archived-bg */
  --status-archived-border: #d1d5db;
  --status-draft-bg:        #eff6ff;
  --status-draft-text:      #1d4ed8; /* blue-700 — 7.8:1 PASS */
  --status-draft-border:    #bfdbfe;
  --status-sent-bg:         #eff6ff;
  --status-sent-text:       #1d4ed8; /* blue-700 — 7.8:1 PASS */
  --status-sent-border:     #bfdbfe;
  --status-received-bg:     #f0fdf4;
  --status-received-text:   #15803d; /* green-700 — 5.1:1 PASS */
  --status-received-border: #bbf7d0;
  --status-partial-bg:      #fffbeb;
  --status-partial-text:    #92400e; /* amber-800 — 6.2:1 on partial-bg (was #b45309, 4.41:1 FAIL) */
  --status-partial-border:  #fde68a;
  --status-cancelled-bg:    #fef2f2;
  --status-cancelled-text:  #b91c1c; /* red-700 — 5.8:1 on cancelled-bg (was #dc2626, 4.41:1 FAIL) */
  --status-cancelled-border:#fecaca;
  --status-paid-bg:         #f0fdf4;
  --status-paid-text:       #15803d; /* green-700 — 5.1:1 PASS */
  --status-paid-border:     #bbf7d0;
  --status-overdue-bg:      #fef2f2;
  --status-overdue-text:    #b91c1c; /* red-700 — 5.8:1 on overdue-bg (was #dc2626, 4.41:1 FAIL) */
  --status-overdue-border:  #fecaca;
  --status-pending-bg:      #fffbeb;
  --status-pending-text:    #92400e; /* amber-800 — 6.2:1 on pending-bg (was #b45309, 4.41:1 FAIL) */
  --status-pending-border:  #fde68a;

  /* ── SAV ticket status ───────────────────────────────────── */
  --ticket-open-bg:         #fef9c3;
  --ticket-open-text:       #854d0e;
  --ticket-open-border:     #fde68a;
  --ticket-progress-bg:     #dbeafe;
  --ticket-progress-text:   #1d4ed8;
  --ticket-progress-border: #bfdbfe;
  --ticket-resolved-bg:     #dcfce7;
  --ticket-resolved-text:   #15803d;
  --ticket-resolved-border: #bbf7d0;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  /* ── Ombres ──────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(26,18,8,0.04);
  --shadow-sm:  0 1px 3px rgba(26,18,8,0.06), 0 1px 2px rgba(26,18,8,0.04);
  --shadow-md:  0 4px 12px rgba(26,18,8,0.08), 0 1px 3px rgba(26,18,8,0.05);
  --shadow-lg:  0 8px 24px rgba(26,18,8,0.10), 0 2px 6px rgba(26,18,8,0.06);

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width:  256px;
  --topbar-height:  56px;

  /* ── Transitions ─────────────────────────────────────────── */
  --duration-fast:     150ms;
  --duration-normal:   250ms;
  --duration-slow:     400ms;
  --ease-default:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
}

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