/* ═══════════════════════════════════════════════════════════════════
   SingularityTalents design tokens
   Extracted from https://singularitytalents.de (computed styles, 2026-08-06).
   This file is the single source of truth for how anything in SuperSDR looks.
   Never hard-code a brand colour, font or radius anywhere else — add a token.

   Fonts are SELF-HOSTED on purpose. Hotlinking fonts.googleapis.com sends every
   visitor's IP to Google without consent, which German courts have treated as a
   GDPR violation — and this is a German-facing recruitment page that asks for
   consent on the same screen. Inter Tight is SIL OFL licensed.
   ═══════════════════════════════════════════════════════════════════ */

/* Inter Tight — variable weight 100–900, latin + latin-ext subsets */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Colour ──────────────────────────────────────────────────────
     Amber is the brand. Black is the frame. Everything else is neutral. */
  --sita-amber:        #FFA300;   /* accent 1 — CTAs, highlighted keywords */
  --sita-amber-deep:   #E08F00;   /* hover only; not on the site, derived    */
  --sita-amber-tint:   #FFF4E0;   /* soft amber background wash              */
  --sita-black:        #000000;   /* full-bleed dark sections, secondary CTA */
  --sita-ink:          #242627;   /* accent 6 — default text/dark surfaces   */
  --sita-navy:         #0A0D31;   /* heading colour on light backgrounds     */
  --sita-grey:         #5F6567;   /* accent 3 — secondary text               */
  --sita-mist:         #F5F5F5;   /* accent 2/4 — section + card backgrounds */
  --sita-white:        #FFFFFF;
  --sita-body:         rgba(0,0,0,.60);   /* primary body copy               */
  --sita-line:         rgba(0,0,0,.15);   /* accent 7 — hairlines, borders   */
  --sita-on-dark:      rgba(255,255,255,.60);

  /* ── Type ────────────────────────────────────────────────────────
     Headings Inter Tight 600/700 with tight tracking. Body Helvetica. */
  --sita-font-head: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sita-font-body: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  --sita-h1-size: 60px;  --sita-h1-weight: 600; --sita-h1-track: -1px; --sita-h1-lh: 1;
  --sita-h2-size: 48px;  --sita-h2-weight: 700; --sita-h2-lh: 1.2;
  --sita-h3-size: 30px;  --sita-h3-weight: 600; --sita-h3-lh: 1.2;
  --sita-body-size: 16px; --sita-body-lh: 1.4;

  /* ── Shape & rhythm ──────────────────────────────────────────────── */
  --sita-radius-pill: 20px;   /* buttons and chips are pills               */
  --sita-radius:      4px;    /* inputs, small surfaces                    */
  --sita-radius-img:  10px;   /* images and media                          */
  --sita-radius-card: 16px;
  --sita-maxw:        1280px;
  --sita-shadow:      0 12px 48px rgba(0,0,0,.10);
}

/* ── Primitives ─────────────────────────────────────────────────────
   Copy these class names rather than restyling a button from scratch. */

.sita-btn {
  display: inline-block;
  background: var(--sita-amber);
  color: var(--sita-white);
  font-family: var(--sita-font-head);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  padding: 13px 22px;
  border: none;
  border-radius: var(--sita-radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease;
}
.sita-btn:hover { background: var(--sita-amber-deep); }
.sita-btn:disabled { opacity: .6; cursor: wait; }
.sita-btn--dark { background: var(--sita-black); color: var(--sita-white); }
.sita-btn--dark:hover { background: var(--sita-ink); }
.sita-btn--ghost {
  background: transparent;
  color: var(--sita-ink);
  border: 1px solid var(--sita-line);
}
.sita-btn--ghost:hover { background: var(--sita-mist); }

/* Small uppercase eyebrow label, e.g. "WAS ANDERE KUNDEN SAGEN" */
.sita-chip {
  display: inline-block;
  background: var(--sita-mist);
  color: var(--sita-ink);
  font-family: var(--sita-font-head);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.7;
  padding: 5px 14px;
  border-radius: var(--sita-radius-pill);
}
.sita-chip--amber { background: var(--sita-amber-tint); color: var(--sita-ink); }

/* The signature move: one keyword inside a heading set in amber. */
.sita-hl { color: var(--sita-amber); }

/* Full-bleed black section with white type — the site's rhythm device. */
.sita-dark { background: var(--sita-black); color: var(--sita-white); }
.sita-dark h1, .sita-dark h2, .sita-dark h3 { color: var(--sita-white); }
.sita-dark p { color: var(--sita-on-dark); }

.sita-field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sita-line);
  border-radius: var(--sita-radius);
  font-family: var(--sita-font-body);
  font-size: 15px;
  transition: border-color .15s ease;
}
.sita-field:focus { outline: none; border-color: var(--sita-amber); }
