/* Skillhouse Design Tokens - Phase 6 */
:root {
  --vert: #1F4D3D;
  --vert-deep: #163A2D;
  --or: #B8893E;
  --or-deep: #9A7235;
  --ivoire: #FAF7F0;
  --ink: #1A2E26;
  --ink-soft: #5A6B62;
  --rule: #E5DFD3;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

.font-serif {
  font-family: 'Cormorant Garamond', serif !important;
}

.bg-ivoire { background: var(--ivoire); }
.bg-vert { background: var(--vert); }
.bg-vert-deep { background: var(--vert-deep); }
.text-vert { color: var(--vert); }
.text-or { color: var(--or); }
.text-ink { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.bg-or { background: var(--or); }
.hover\:bg-vert-deep:hover { background: var(--vert-deep); }
.hover\:bg-or-deep:hover { background: var(--or-deep); }
.hover\:text-vert:hover { color: var(--vert); }
.hover\:text-or:hover { color: var(--or); }
.border-rule { border-color: var(--rule); }
.border-vert { border-color: var(--vert); }
.bg-vert\/5 { background: rgba(31, 77, 61, 0.05); }
.bg-vert\/10 { background: rgba(31, 77, 61, 0.10); }
.bg-or\/10 { background: rgba(184, 137, 62, 0.10); }
.border-vert\/40 { border-color: rgba(31, 77, 61, 0.4); }
.border-or\/30 { border-color: rgba(184, 137, 62, 0.3); }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =========================================================
   === SKILLHOUSE FORM SYSTEM === (Phase 14.E - global)
   Style unifié pour tous les inputs/selects/textareas/file.
   Opt-out via classe .sk-no-style sur l'élément ou parent.
   ========================================================= */

/* ── Inputs textuels ──────────────────────────────────── */
input[type="text"]:not(.sk-no-style):not([class*="bg-"]),
input[type="email"]:not(.sk-no-style):not([class*="bg-"]),
input[type="password"]:not(.sk-no-style):not([class*="bg-"]),
input[type="number"]:not(.sk-no-style):not([class*="bg-"]),
input[type="date"]:not(.sk-no-style):not([class*="bg-"]),
input[type="tel"]:not(.sk-no-style):not([class*="bg-"]),
input[type="url"]:not(.sk-no-style):not([class*="bg-"]),
input[type="search"]:not(.sk-no-style):not([class*="bg-"]) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: 0.75rem;
  background: white;
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

input[type="text"]:focus:not(.sk-no-style):not([class*="bg-"]),
input[type="email"]:focus:not(.sk-no-style):not([class*="bg-"]),
input[type="password"]:focus:not(.sk-no-style):not([class*="bg-"]),
input[type="number"]:focus:not(.sk-no-style):not([class*="bg-"]),
input[type="date"]:focus:not(.sk-no-style):not([class*="bg-"]),
input[type="tel"]:focus:not(.sk-no-style):not([class*="bg-"]),
input[type="url"]:focus:not(.sk-no-style):not([class*="bg-"]),
input[type="search"]:focus:not(.sk-no-style):not([class*="bg-"]) {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(31, 77, 61, 0.1);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: #9CA3AF;
  font-style: italic;
}

/* ── Selects ──────────────────────────────────────────── */
select:not(.sk-no-style):not([class*="bg-"]) {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: 0.75rem;
  background-color: white;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231F4D3D'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus:not(.sk-no-style):not([class*="bg-"]) {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(31, 77, 61, 0.1);
}

/* ── Multi-select ────────────────────────────────────── */
select[multiple]:not(.sk-no-style):not([class*="bg-"]) {
  min-height: 180px;
  padding: 0;
  background-image: none;
  cursor: default;
}

select[multiple]:not(.sk-no-style):not([class*="bg-"]) option {
  padding: 0.6rem 1rem;
  margin: 0;
  border-bottom: 1px solid #F5EFE3;
  cursor: pointer;
  transition: background 0.15s;
}

select[multiple]:not(.sk-no-style):not([class*="bg-"]) option:last-child {
  border-bottom: none;
}

select[multiple]:not(.sk-no-style):not([class*="bg-"]) option:hover {
  background: var(--ivoire);
}

select[multiple]:not(.sk-no-style):not([class*="bg-"]) option:checked {
  background: var(--vert);
  color: white;
  font-weight: 500;
}

/* ── Textareas ───────────────────────────────────────── */
textarea:not(.sk-no-style):not([class*="bg-"]) {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--rule);
  border-radius: 0.75rem;
  background: white;
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

textarea:focus:not(.sk-no-style):not([class*="bg-"]) {
  outline: none;
  border-color: var(--vert);
  box-shadow: 0 0 0 3px rgba(31, 77, 61, 0.1);
}

/* ── File input (custom style) ───────────────────────── */
input[type="file"]:not(.sk-no-style) {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0.5rem;
  border: 2px dashed var(--rule);
  border-radius: 0.75rem;
  background: var(--ivoire);
  transition: all 0.2s;
}

input[type="file"]:not(.sk-no-style):hover {
  border-color: var(--vert);
  background: rgba(31, 77, 61, 0.03);
}

input[type="file"]:not(.sk-no-style)::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--vert);
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

input[type="file"]:not(.sk-no-style)::file-selector-button:hover {
  background: var(--or);
}

/* ── Checkboxes & radios (style minimal) ─────────────── */
input[type="checkbox"]:not(.sk-no-style),
input[type="radio"]:not(.sk-no-style) {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--vert);
  cursor: pointer;
}

/* ── Disabled state ──────────────────────────────────── */
input:disabled, select:disabled, textarea:disabled {
  background: #F3F4F6 !important;
  color: #9CA3AF !important;
  cursor: not-allowed;
}

/* ── Validation : invalid state ──────────────────────── */
input:not(:placeholder-shown):invalid:not(.sk-no-style),
textarea:not(:placeholder-shown):invalid:not(.sk-no-style) {
  border-color: #EF4444;
}

/* ── Helptext / error text wrapper ───────────────────── */
.helptext, .form-help {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}