/* FreeToolBank design tokens — SOURCE OF TRUTH. ONE COPY ONLY; the theme does
   not declare these. In the plugin and enqueued site-wide because tool CSS must
   not depend on the theme (CLAUDE.md §2.3).

   TYPOGRAPHY v3 (2026-08-09). Audited against the rendered site: body/card/nav
   text measured 14px, badges 12px, card descriptions were clamped mid-sentence
   at line-height 1.4. The scale below fixes that centrally — every component
   pulls from these tokens, so sizes are never set ad hoc.

   Colour pairs were contrast-checked in BOTH themes; nine v2 pairs failed and
   were corrected. Re-run the check before changing any colour. */

/* ---- LIGHT (default) ---- */
:root {
  --ftb-bg:#fcfcfd; --ftb-surface:#fff; --ftb-surface-2:#f4f5f7;
  --ftb-border:#e4e6eb; --ftb-border-strong:#d0d4dc;
  --ftb-border-interactive:#7e8797;

  --ftb-text:#101419; --ftb-text-muted:#5a6472; --ftb-text-subtle:#626b78;

  --ftb-primary:#4f46e5; --ftb-primary-hover:#4338ca; --ftb-primary-soft:#eef2ff;
  --ftb-on-primary:#fff;

  /* Text placed ON a solid success/warning/error fill. Same reason --ftb-on-primary
     exists: the status colours are LIGHTENED in dark mode, so white on them drops
     to 1.74:1. Measured 2026-08-23 on the contrast checker badges. */
  --ftb-on-status:#fff;
  --ftb-success:#15803d; --ftb-success-soft:#ecfdf3;
  --ftb-warning:#b45309; --ftb-warning-soft:#fffaeb;
  --ftb-error:#b91c1c;   --ftb-error-soft:#fef3f2;

  --ftb-shadow-sm:0 1px 2px rgba(16,20,25,.05);
  --ftb-shadow:0 2px 6px rgba(16,20,25,.06),0 1px 2px rgba(16,20,25,.04);
  --ftb-shadow-md:0 8px 24px rgba(16,20,25,.09),0 2px 6px rgba(16,20,25,.05);

  --ftb-cat-developer:#4f46e5;  --ftb-cat-developer-soft:#eef2ff;
  --ftb-cat-compliance:#0f766e; --ftb-cat-compliance-soft:#f0fdfa;
  --ftb-cat-business:#c2410c;   --ftb-cat-business-soft:#fff7ed;
  --ftb-cat-text:#7c3aed;       --ftb-cat-text-soft:#f5f3ff;
  --ftb-cat-converters:#0369a1; --ftb-cat-converters-soft:#f0f9ff;
  --ftb-cat-datetime:#be185d;   --ftb-cat-datetime-soft:#fdf2f8;
  --ftb-cat-design:#a16207;     --ftb-cat-design-soft:#fefce8;
  --ftb-on-accent:#fff;

  /* ---- Hero brand green. Contrast-verified 2026-08-09:
     #166534 on #dcfce7 = 6.49:1, #fff on #15803d = 5.02:1,
     #15803d on #dcfce7 = 4.57:1. #16a34a was REJECTED for the eyebrow
     (3.00:1 on the soft pill). The underline stroke is decoration only —
     the sentence reads identically without it. ---- */
  --ftb-brand:#15803d;
  --ftb-brand-ink:#166534;
  --ftb-brand-soft:#dcfce7;
  --ftb-brand-line:#16a34a;
  --ftb-on-brand:#fff;

  /* ---- Type family: one family sitewide. System stack is mandated by
     CLAUDE.md §5.2 (no webfont requests) and gives each OS its native UI
     face. Mono is used ONLY for code and tool input/output. ---- */
  --ftb-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ftb-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ---- Type scale. Display sizes are fluid so mobile is never oversized
     and desktop is never timid; text sizes are fixed for predictability. ---- */
  --ftb-text-xs:0.8125rem;    /* 13px — badges, table meta, fine print   */
  --ftb-text-sm:0.9375rem;    /* 15px — labels, captions, helper text    */
  --ftb-text-base:1.0625rem;  /* 17px — BODY. Comfortable reading size.  */
  --ftb-text-md:1.1875rem;    /* 19px — lead paragraphs, FAQ questions   */
  --ftb-text-code:1rem;       /* 16px — mono. Mono reads ~1 step smaller
                                 than sans, so tool textareas use this
                                 rather than --ftb-text-sm.            */
  --ftb-text-lg:1.3125rem;    /* 21px — card titles, H4                  */
  --ftb-text-xl:1.5rem;       /* 24px — H3                               */
  --ftb-text-2xl:clamp(1.75rem,1.35rem + 1.6vw,2.125rem);   /* 28→34 H2  */
  --ftb-text-3xl:clamp(2rem,1.45rem + 2.2vw,2.75rem);       /* 32→44 H1  */
  --ftb-text-4xl:clamp(2.25rem,1.35rem + 3.4vw,3.5rem);     /* 36→56 hero */

  --ftb-lh-display:1.1;   /* h1 / hero            */
  --ftb-lh-tight:1.25;    /* h2, h3, card titles  */
  --ftb-lh-snug:1.5;      /* UI text, card copy   */
  --ftb-lh-base:1.65;     /* body prose           */

  --ftb-ls-display:-0.025em;
  --ftb-ls-heading:-0.015em;
  --ftb-ls-tight:-0.005em;
  --ftb-ls-wide:0.045em;

  --ftb-fw-normal:400; --ftb-fw-medium:500; --ftb-fw-semi:600; --ftb-fw-bold:700;

  --ftb-space-1:.25rem; --ftb-space-2:.5rem; --ftb-space-3:.75rem;
  --ftb-space-4:1rem; --ftb-space-5:1.25rem; --ftb-space-6:1.5rem;
  --ftb-space-7:1.75rem; --ftb-space-8:2rem; --ftb-space-10:2.5rem;
  --ftb-space-12:3rem; --ftb-space-14:3.5rem; --ftb-space-16:4rem;
  --ftb-space-20:5rem; --ftb-space-24:6rem;

  /* Vertical rhythm between page sections — one number, used everywhere. */
  --ftb-section-y:var(--ftb-space-24);

  --ftb-radius-sm:8px; --ftb-radius:12px; --ftb-radius-lg:16px; --ftb-radius-full:999px;

  --ftb-maxw:1200px; --ftb-maxw-prose:70ch;
  --ftb-header-h:72px;
  --ftb-tap:44px;        /* WCAG 2.2 minimum target */
  --ftb-control-h:48px;  /* buttons, inputs, selects — one height */
  --ftb-transition:160ms cubic-bezier(.4,0,.2,1);
}

/* ---- DARK ----
   The two blocks below intentionally duplicate their values. A media query
   cannot be overridden by JS, so the attribute selector must carry the same
   values for the manual toggle to work. KEEP THEM IN SYNC. */
@media (prefers-color-scheme:dark){
  :root:not([data-ftb-theme="light"]){
    --ftb-bg:#0b0e14; --ftb-surface:#141922; --ftb-surface-2:#1c222d;
    --ftb-border:#252c38; --ftb-border-strong:#333c4a; --ftb-border-interactive:#5f6a7e;
    --ftb-text:#e9ecf1; --ftb-text-muted:#98a2b3; --ftb-text-subtle:#828d9e;
    --ftb-primary:#818cf8; --ftb-primary-hover:#a5b4fc; --ftb-primary-soft:#1e1b4b;
    --ftb-on-primary:#0b0e14;
    --ftb-on-status:#0b0e14;
    --ftb-success:#4ade80; --ftb-success-soft:#052e16;
    --ftb-warning:#fbbf24; --ftb-warning-soft:#422006;
    --ftb-error:#f87171;   --ftb-error-soft:#450a0a;
    --ftb-shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --ftb-shadow:0 2px 6px rgba(0,0,0,.45);
    --ftb-shadow-md:0 8px 24px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
    --ftb-cat-developer:#a5b4fc;  --ftb-cat-developer-soft:#1e1b4b;
    --ftb-cat-compliance:#5eead4; --ftb-cat-compliance-soft:#042f2e;
    --ftb-cat-business:#fdba74;   --ftb-cat-business-soft:#431407;
    --ftb-cat-text:#c4b5fd;       --ftb-cat-text-soft:#2e1065;
    --ftb-cat-converters:#7dd3fc; --ftb-cat-converters-soft:#082f49;
    --ftb-cat-datetime:#f9a8d4;   --ftb-cat-datetime-soft:#500724;
    --ftb-cat-design:#fde047;     --ftb-cat-design-soft:#422006;
    --ftb-on-accent:#0b0e14;
    --ftb-brand:#4ade80; --ftb-brand-ink:#86efac; --ftb-brand-soft:#052e16;
    --ftb-brand-line:#22c55e; --ftb-on-brand:#0b0e14;
  }
}
:root[data-ftb-theme="dark"]{
  --ftb-bg:#0b0e14; --ftb-surface:#141922; --ftb-surface-2:#1c222d;
  --ftb-border:#252c38; --ftb-border-strong:#333c4a; --ftb-border-interactive:#5f6a7e;
  --ftb-text:#e9ecf1; --ftb-text-muted:#98a2b3; --ftb-text-subtle:#828d9e;
  --ftb-primary:#818cf8; --ftb-primary-hover:#a5b4fc; --ftb-primary-soft:#1e1b4b;
  --ftb-on-primary:#0b0e14;
  --ftb-on-status:#0b0e14;
  --ftb-success:#4ade80; --ftb-success-soft:#052e16;
  --ftb-warning:#fbbf24; --ftb-warning-soft:#422006;
  --ftb-error:#f87171;   --ftb-error-soft:#450a0a;
  --ftb-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --ftb-shadow:0 2px 6px rgba(0,0,0,.45);
  --ftb-shadow-md:0 8px 24px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4);
  --ftb-cat-developer:#a5b4fc;  --ftb-cat-developer-soft:#1e1b4b;
  --ftb-cat-compliance:#5eead4; --ftb-cat-compliance-soft:#042f2e;
  --ftb-cat-business:#fdba74;   --ftb-cat-business-soft:#431407;
  --ftb-cat-text:#c4b5fd;       --ftb-cat-text-soft:#2e1065;
  --ftb-cat-converters:#7dd3fc; --ftb-cat-converters-soft:#082f49;
  --ftb-cat-datetime:#f9a8d4;   --ftb-cat-datetime-soft:#500724;
  --ftb-cat-design:#fde047;     --ftb-cat-design-soft:#422006;
  --ftb-on-accent:#0b0e14;
  --ftb-brand:#4ade80; --ftb-brand-ink:#86efac; --ftb-brand-soft:#052e16;
  --ftb-brand-line:#22c55e; --ftb-on-brand:#0b0e14;
}

@media (max-width:767px){
  :root{--ftb-header-h:60px;--ftb-section-y:var(--ftb-space-14)}
}

@media (prefers-reduced-motion:reduce){
  :root{--ftb-transition:0ms}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ============================================================ SHARED TOOL UI
   Written once here rather than repeated in every tool.css, so all five tools
   share one input, label, button and message treatment. */

.ftb-tool .ftb-field{display:flex;flex-direction:column;gap:var(--ftb-space-2);margin-bottom:var(--ftb-space-5)}
.ftb-tool label{font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);
  color:var(--ftb-text);letter-spacing:var(--ftb-ls-tight)}
/* Every text-like input, not just type=text. A bare input[type=text] selector
   left date, time and number inputs unstyled, and the browser default for those
   is only ~21px tall — under the 24px floor in WCAG 2.2 SC 2.5.8. Found on the
   Discord timestamp tool at 360px, 2026-08-17. */
.ftb-tool textarea,.ftb-tool input[type=text],.ftb-tool input[type=date],
.ftb-tool input[type=time],.ftb-tool input[type=number],.ftb-tool input[type=search],
.ftb-tool input[type=url],.ftb-tool input[type=email],.ftb-tool select{width:100%;
  padding:var(--ftb-space-3) var(--ftb-space-4);font:inherit;font-size:var(--ftb-text-base);
  color:var(--ftb-text);background:var(--ftb-surface-2);
  border:1px solid var(--ftb-border-strong);border-radius:var(--ftb-radius);
  transition:border-color var(--ftb-transition),box-shadow var(--ftb-transition)}
.ftb-tool input[type=text],.ftb-tool input[type=date],.ftb-tool input[type=time],
.ftb-tool input[type=number],.ftb-tool input[type=search],.ftb-tool input[type=url],
.ftb-tool input[type=email],.ftb-tool select{min-height:var(--ftb-control-h);
  padding:0 var(--ftb-space-4)}
.ftb-tool textarea{min-height:200px;font-family:var(--ftb-mono);
  font-size:var(--ftb-text-code);line-height:1.65;resize:vertical}
.ftb-tool textarea:focus,.ftb-tool input:focus,.ftb-tool select:focus{
  border-color:var(--ftb-primary);box-shadow:0 0 0 3px var(--ftb-primary-soft);outline:none}
.ftb-tool textarea::placeholder,.ftb-tool input::placeholder{color:var(--ftb-text-subtle)}
.ftb-tool-grid{display:grid;gap:var(--ftb-space-5);grid-template-columns:1fr}
@media (min-width:768px){.ftb-tool-grid{grid-template-columns:1fr 1fr}}
.ftb-tool-actions{display:flex;flex-wrap:wrap;gap:var(--ftb-space-3);margin-top:var(--ftb-space-5)}
.ftb-tool-opts{display:flex;flex-wrap:wrap;gap:var(--ftb-space-2) var(--ftb-space-5);
  margin-bottom:var(--ftb-space-5);padding-bottom:var(--ftb-space-4);
  border-bottom:1px solid var(--ftb-border)}
.ftb-tool-opts label{display:flex;align-items:center;gap:var(--ftb-space-2);
  min-height:var(--ftb-tap);font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-medium);cursor:pointer}
/* 24px, not 18px. WCAG 2.2 SC 2.5.8 sets a 24x24 minimum target and §9 makes
   it mandatory here. Measured at 18px on the live site 2026-08-15 across every
   tool that uses this block. */
.ftb-tool-opts input[type=checkbox],.ftb-tool-opts input[type=radio]{width:24px;height:24px;
  accent-color:var(--ftb-primary);cursor:pointer;flex:none}
.ftb-tool-msg{margin:0 0 var(--ftb-space-4);padding:var(--ftb-space-4) var(--ftb-space-5);
  border:1px solid currentColor;border-left-width:4px;border-radius:var(--ftb-radius);
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug)}
.ftb-tool-msg--error{background:var(--ftb-error-soft);color:var(--ftb-error)}
.ftb-tool-msg--warn{background:var(--ftb-warning-soft);color:var(--ftb-warning)}
.ftb-tool-msg--ok{background:var(--ftb-success-soft);color:var(--ftb-success)}
.ftb-tool-stat{font-size:var(--ftb-text-sm);color:var(--ftb-text-muted);margin:var(--ftb-space-2) 0 0}
/* The hidden attribute must beat a component's own display rule. [hidden] is
   only display:none in the UA stylesheet, so any .ftb-x{display:grid} silently
   outranks it and a panel JS believes it hid stays on screen. Found live on the
   JWT decoder 2026-08-14, where stale security warnings from a previous token
   remained visible after a failed decode. One of the permitted !important
   cases (§4.2) — it exists precisely to override. */
.ftb-tool [hidden]{display:none !important}