/* ═══════════════════════════════════════════════════════════════════════════
   FAK LAB — shadcn-informed design upgrade layer
   Takes the shadcn/ui design system (ui.shadcn.com/docs) and applies its
   principles inside the Swiss system: semantic tokens, a real focus-ring
   system, shadcn button/input anatomy, and rigorous dark-mode pairs.
   Swiss geometry is kept: square corners (--radius: 0), hairlines, one accent.
   Loaded after swiss-unified.css on every public page, so it wins ties.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ——— Semantic tokens (shadcn architecture, FAK LAB values) ——— */
  --background: #ffffff;
  --foreground: #111111;
  --card: #ffffff;
  --card-foreground: #111111;
  --popover: #ffffff;
  --popover-foreground: #111111;
  --primary: #6d4aff;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #1c1c1e;
  --muted: #f4f4f5;
  --muted-foreground: #6e6e70;
  --accent: #f4f4f5;
  --accent-foreground: #111111;
  --destructive: #d92d20;
  --destructive-foreground: #ffffff;
  --border: #e8e8ea;
  --input: #d4d4d6;
  --ring: #6d4aff;
  --radius: 0px; /* Swiss: square — shadcn radius token pinned to 0 */

  /* Bootstrap follows the Swiss square */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-2xl: 0;
  --bs-border-radius-pill: 0;
}

[data-bs-theme="dark"],
.dark {
  --background: #0b0b0d;
  --foreground: #f5f5f6;
  --card: #141416;
  --card-foreground: #f5f5f6;
  --popover: #1a1a1e;
  --popover-foreground: #f5f5f6;
  --primary: #8f7cff;
  --primary-foreground: #0b0b0d; /* dark text on light violet: ~7:1 contrast */
  --secondary: #26262a;
  --secondary-foreground: #f5f5f6;
  --muted: #1e1e21;
  --muted-foreground: #a1a1a6;
  --accent: #26262a;
  --accent-foreground: #f5f5f6;
  --destructive: #f04438;
  --destructive-foreground: #ffffff;
  --border: #3a3a3e;
  --input: #3a3a3e;
  --ring: #8f7cff;
}

/* ── §1 · Focus system (shadcn ring: 3px, ring color at 40%) ─────────────
   One visible, consistent keyboard-focus treatment across the whole site. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent);
}

/* Form controls: ring + border recolor on keyboard focus (beats the older
   `box-shadow: none !important` focus rules by specificity + source order). */
.t-input:focus-visible,
.t-textarea:focus-visible,
.t-select:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent) !important;
}

/* ── §2 · Buttons — shadcn anatomy on the site's button classes ──────────
   text-sm / font-medium / h-9 metrics, icon gap, pointer cursor, and
   Bootstrap variants remapped from default blue/gray to the token system. */
.btn,
.t-btn,
.hero-btn,
.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.25rem;
  white-space: nowrap;
  cursor: pointer;
  --bs-btn-font-size: .875rem;
  --bs-btn-font-weight: 500;
  --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 40%, transparent);
  transition: background-color .15s ease, border-color .15s ease,
    color .15s ease, opacity .15s ease;
}

button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer; /* shadcn documents this explicitly */
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn,
.t-btn:disabled,
.hero-btn:disabled,
.cp-btn:disabled {
  opacity: .5;
  pointer-events: none;
}

.btn-sm { min-height: 2rem; --bs-btn-font-size: .8rem; }
.btn-lg { min-height: 2.75rem; --bs-btn-font-size: .95rem; }

/* Variant remap: Bootstrap defaults -> shadcn token pairs (both themes). */
.btn-primary {
  --bs-btn-color: var(--primary-foreground);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary-foreground);
  --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 88%, black);
  --bs-btn-active-color: var(--primary-foreground);
  --bs-btn-active-bg: color-mix(in srgb, var(--primary) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--primary) 80%, black);
  --bs-btn-disabled-color: var(--primary-foreground);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

.btn-secondary {
  --bs-btn-color: var(--secondary-foreground);
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--secondary-foreground);
  --bs-btn-hover-bg: color-mix(in srgb, var(--secondary) 88%, var(--foreground));
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-color: var(--secondary-foreground);
  --bs-btn-active-bg: color-mix(in srgb, var(--secondary) 80%, var(--foreground));
  --bs-btn-active-border-color: var(--border);
}

.btn-danger {
  --bs-btn-color: var(--destructive-foreground);
  --bs-btn-bg: var(--destructive);
  --bs-btn-border-color: var(--destructive);
  --bs-btn-hover-color: var(--destructive-foreground);
  --bs-btn-hover-bg: color-mix(in srgb, var(--destructive) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--destructive) 88%, black);
  --bs-btn-active-color: var(--destructive-foreground);
  --bs-btn-active-bg: color-mix(in srgb, var(--destructive) 80%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--destructive) 80%, black);
}

.btn-outline-secondary {
  --bs-btn-color: var(--foreground);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: var(--accent-foreground);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--border);
  --bs-btn-active-color: var(--accent-foreground);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--border);
}

.btn-link {
  --bs-btn-color: var(--primary);
  --bs-btn-hover-color: var(--primary);
}

/* ── §3 · Form controls — shadcn input treatment ───────────────────────── */
.form-control,
.form-select,
.t-input,
.t-textarea,
.t-select {
  font-size: .875rem;
}

.form-control::placeholder,
.t-input::placeholder,
.t-textarea::placeholder {
  color: var(--muted-foreground);
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* ── §4 · Badges — shadcn label metrics ────────────────────────────────── */
.badge {
  font-weight: 500;
  letter-spacing: .04em;
}

/* ── §5 · Selection — brand-colored text selection ──────────────────────── */
::selection {
  background: var(--primary);
  color: var(--primary-foreground);
}