/* ═══════════════════════════════════════════════════════════════════
   PRO CSC TOOLS — DESIGN SYSTEM OVERRIDE LAYER
   Loaded LAST (after every page's own styles) by both layouts, so the
   whole site shares one professional finish across the 4 legacy design
   families (pcs / pct / site-nav / Tailwind). Brand colors come ONLY
   from src/theme.js CSS vars — no brand hexes here.
   Everything is @media screen: printed output (invoices, ID cards,
   slips) keeps each page's own print CSS exactly as before.
   ═══════════════════════════════════════════════════════════════════ */
@media screen {
  /* ——— Base polish ——— */
  ::selection { background: rgb(var(--brand-rgb) / .18); }
  html { scrollbar-width: thin; scrollbar-color: #c3cad4 transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #c3cad4; border-radius: 8px; border: 2px solid #fff; }
  ::-webkit-scrollbar-thumb:hover { background: var(--brand); }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  :focus-visible { outline: 3px solid rgb(var(--brand-rgb) / .45); outline-offset: 2px; }

  /* ——— Heading rhythm ——— */
  body h1, body h2 { letter-spacing: -.015em; }

  /* ——— Form controls: one radius + one focus treatment ———
     Only fills gaps: page controls styled with their own classes and
     focus rules (specificity) keep their look; pill-shaped controls
     (rounded-full) are left alone. */
  body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([class*="rounded-full"]):not([class*="rounded-none"]),
  body select, body textarea { border-radius: 12px; }
  body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):focus,
  body select:focus, body textarea:focus {
    border-color: var(--brand);
    box-shadow: var(--ring-brand);
    outline: none;
  }

  /* ——— Buttons: shared shape + hover lift for primary actions ——— */
  body .btn { border-radius: 12px; transition: all .25s ease; }
  body :is(.btn-primary, .btn-primary-tool, .btn-primary-custom):not([class*="rounded-full"]) {
    border-radius: 12px; font-weight: 700; letter-spacing: .01em; transition: all .25s ease;
  }
  body :is(.btn-primary, .btn-primary-tool, .btn-primary-custom):hover {
    box-shadow: 0 12px 26px -10px rgb(var(--brand-rgb) / .45); transform: translateY(-1px);
  }
  body :is(.btn-primary, .btn-primary-tool, .btn-primary-custom):focus-visible {
    box-shadow: 0 0 0 4px rgb(var(--brand-rgb) / .25);
  }

  /* ——— Cards & drop zones ——— */
  body .card { border-radius: var(--radius-card); }
  body :is(.drop-zone, .upload-box, .dropzone, .upload-area):hover { border-color: var(--brand); }

  /* ——— Floating WhatsApp button (tool chrome) ——— */
  .whatsapp-float { transition: transform .25s ease, box-shadow .25s ease; }
  .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 30px -8px rgba(16,24,40,.35); }

  /* ——— Blog / long-form typography ——— */
  .article-body { line-height: 1.78; }
  .article-body p { margin-bottom: 1.05em; }
  .article-body h2 { margin-top: 2.1rem; margin-bottom: .7rem; }
  .article-body h3 { margin-top: 1.6rem; margin-bottom: .5rem; }
  .article-body img { border-radius: 16px; }
  .sidebar-box { border-radius: 16px; }
  .faq-item { border-radius: 14px; }
  .seo-depth-content { border-radius: 16px; }
}