/* Jetons de design — Partie F.1-F.5 (Interface) du cahier des charges OmniPDF */
:root {
  --color-neutral-50: #FAFAFA; --color-neutral-100: #F4F4F5; --color-neutral-200: #E4E4E7;
  --color-neutral-300: #D4D4D8; --color-neutral-400: #A1A1AA; --color-neutral-500: #71717A;
  --color-neutral-600: #52525B; --color-neutral-700: #3F3F46; --color-neutral-800: #27272A;
  --color-neutral-900: #18181B; --color-neutral-950: #09090B;

  --color-primary-50: #EEF2FF; --color-primary-100: #E0E7FF; --color-primary-500: #6366F1;
  --color-primary-600: #4F46E5; --color-primary-700: #4338CA; --color-primary-900: #312E81;

  --color-success-500: #22C55E; --color-success-600: #16A34A; --color-success-100: #DCFCE7;
  --color-warning-500: #F59E0B; --color-warning-600: #D97706; --color-warning-100: #FEF3C7;
  --color-danger-500: #EF4444; --color-danger-600: #DC2626; --color-danger-100: #FEE2E2;
  --color-info-500: #3B82F6; --color-info-600: #2563EB; --color-info-100: #DBEAFE;

  --font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, monospace;

  --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;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);

  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light dark;
  --bg: var(--color-neutral-50);
  --surface: #FFFFFF;
  --surface-2: var(--color-neutral-100);
  --border: var(--color-neutral-200);
  --text: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --accent: var(--color-primary-600);
  --accent-hover: var(--color-primary-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0A0B; --surface: #131316; --surface-2: #1F1F23; --border: #2A2A2F;
    --text: #F4F4F5; --text-secondary: #A1A1AA; --accent: var(--color-primary-500); --accent-hover: var(--color-primary-400, #818CF8);
  }
}
:root[data-theme="dark"] {
  --bg: #0A0A0B; --surface: #131316; --surface-2: #1F1F23; --border: #2A2A2F;
  --text: #F4F4F5; --text-secondary: #A1A1AA; --accent: var(--color-primary-500); --accent-hover: #818CF8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-family-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

.app { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: var(--space-6) var(--space-4);
}
.sidebar h1 { font-size: 18px; margin: 0 0 var(--space-1); }
.sidebar .tagline { color: var(--text-secondary); font-size: 12px; margin: 0 0 var(--space-6); }
.nav-group { margin-bottom: var(--space-6); }
.nav-group h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-secondary); margin: 0 0 var(--space-2);
}
.nav-item {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); border: none; background: transparent; color: var(--text);
  cursor: pointer; font-size: 13px; margin-bottom: 2px;
  transition: background var(--duration-base) var(--easing-standard);
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--color-primary-100); color: var(--accent); font-weight: 600; }
:root[data-theme="dark"] .nav-item.active,
@media (prefers-color-scheme: dark) { .nav-item.active { background: rgba(99,102,241,0.15); } }

main { padding: var(--space-8); overflow-y: auto; }
.panel-header { margin-bottom: var(--space-6); }
.panel-header h2 { margin: 0 0 var(--space-1); font-size: 22px; }
.panel-header p { margin: 0; color: var(--text-secondary); font-size: 13px; }

.layout-2col { display: grid; grid-template-columns: 1fr 480px; gap: var(--space-8); align-items: start; }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
}

label.field { display: block; margin-bottom: var(--space-4); font-size: 13px; color: var(--text-secondary); }
label.field > span.label-text { display: block; margin-bottom: var(--space-1); font-weight: 500; color: var(--text); }
input, textarea, select {
  width: 100%; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.repeat-block { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-3); position: relative; }
.repeat-block .remove-btn { position: absolute; top: 6px; right: 6px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-md);
  border: 1px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--duration-base) var(--easing-standard), transform 100ms;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--border); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

.preview-wrap { position: sticky; top: var(--space-8); }
.preview-frame {
  width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.preview-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

.status { font-size: 12px; margin-top: var(--space-2); min-height: 16px; }
.status.error { color: var(--color-danger-600); }
.status.success { color: var(--color-success-600); }

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.tool-card h3 { margin: 0 0 var(--space-1); font-size: 14px; }
.tool-card p.desc { margin: 0 0 var(--space-3); color: var(--text-secondary); font-size: 12px; }

pre.result-json {
  background: var(--surface-2); padding: var(--space-3); border-radius: var(--radius-md);
  font-family: var(--font-family-mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap;
}

.badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--color-info-100); color: var(--color-info-600);
}

footer.limits {
  margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--border);
  color: var(--text-secondary); font-size: 12px; line-height: 1.6;
}

[hidden] { display: none !important; }