/*
Theme Name: TechFlow Clean
Description: TechFlow Jobs — minimal Braun-inspired foundation. Page styles live in PHP templates.
Version: 8.0.0
Text Domain: techflow-jobs
*/

/* ============================================================
   TECHFLOW JOBS — GLOBAL DESIGN TOKENS ONLY
   Keep page/component CSS inside each PHP template.
   Default: light. Dark: <html data-theme="dark">.
   System preference is respected until a manual theme is set.
   ============================================================ */

:root {
  color-scheme: light;
  --tf-accent: #00c853;
  --tf-accent-hover: #00ad48;
  --tf-accent-text: #06170d;
  --tf-bg: #f6f6f3;
  --tf-surface: #ffffff;
  --tf-surface-2: #efefeb;
  --tf-text: #171a18;
  --tf-muted: #656c67;
  --tf-border: #d9ddd8;
  --tf-focus: #008e3b;
  --tf-shadow: 0 8px 30px rgba(0, 0, 0, .05);
  --tf-font: 'DIN Pro', 'Arial', sans-serif;
  --tf-container: 1240px;
  --tf-radius: 6px;
  --tf-space: 24px;
}

/* Optional local fonts: only load if these files exist in /fonts/ */
@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/DINPro.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/DINPro-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'DIN Pro';
  src: url('fonts/DINPro-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --tf-accent: #00ff67;
    --tf-accent-hover: #30ff85;
    --tf-accent-text: #07180e;
    --tf-bg: #111310;
    --tf-surface: #191c18;
    --tf-surface-2: #232722;
    --tf-text: #f0f2ed;
    --tf-muted: #a5aea5;
    --tf-border: #353b35;
    --tf-focus: #00ff67;
    --tf-shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --tf-accent: #00ff67;
  --tf-accent-hover: #30ff85;
  --tf-accent-text: #07180e;
  --tf-bg: #111310;
  --tf-surface: #191c18;
  --tf-surface-2: #232722;
  --tf-text: #f0f2ed;
  --tf-muted: #a5aea5;
  --tf-border: #353b35;
  --tf-focus: #00ff67;
  --tf-shadow: none;
}

:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--tf-bg);
  color: var(--tf-text);
  font: 400 16px/1.55 var(--tf-font);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; }
img { height: auto; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--tf-focus); outline-offset: 3px; }
::selection { background: var(--tf-accent); color: var(--tf-accent-text); }

/* Only generic helpers. All visual sections belong to their own templates. */
.tf-container { width: min(100% - 40px, var(--tf-container)); margin-inline: auto; }
.tf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

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