/* LINNFOSS brand kit - shared by every candidate-facing surface
   (landing page, questionnaire form, take-home case; email templates copy
   the hex values since email clients can't load CSS).

   Source of truth: "LINNFOSS Design PowerPoint 130626.pptx" (corporate
   identity deck, general color palette + logo files) cross-checked against
   the Wix site 2026-07-23:
   - Palette: Steel Dark #264060, Steel Blue #3D5A7C, Steel Light #6F8BA6,
     Amber Accent #D2A413, Bordeaux #82202F, Font #343434,
     Background #F5F6F8, Muted (lines) #E3E5E8. (The CI's "Blue Glow"
     palette is for PPTX decks only - do not use it on the web.)
   - Wordmark: geometric block letters, the "i" is a gold (#FFC005) +
     blue (#2F5697) pair of triangles. assets/linnfoss-logo-dark.png on
     light surfaces, assets/linnfoss-logo-white.png on dark (both 2080x318,
     transparent, cropped from the CI deck).
   - Type: Aptos Display headings (tight tracking), Aptos body; system
     fallbacks for machines without Office 2024 fonts.
   - Buttons: square corners, steel blue, uppercase labels (site idiom).
*/

:root{
  /* palette (CI general palette) */
  --lf-steel-dark:#264060;  /* header/footer bands, email button */
  --lf-steel:#3D5A7C;       /* primary action */
  --lf-steel-soft:#6F8BA6;  /* secondary action, focus ring */
  --lf-amber:#D2A413;       /* accent - use sparingly (highlights) */
  --lf-gold:#FFC005;        /* logo gold (logo + tiny highlights only) */
  --lf-logo-blue:#2F5697;   /* logo blue */
  --lf-bordeaux:#82202F;    /* errors / destructive */
  --lf-forest:#315C4F;      /* success */
  --lf-paper:#FFFFFF;
  --lf-mist:#F5F6F8;        /* page background (CI "Background") */
  --lf-tint:rgba(61,90,124,.08);  /* steel panel tint on white */
  --lf-line:#E3E5E8;        /* borders (CI "Muted") */
  --lf-ink:#343434;         /* body text (CI "Font") */
  --lf-muted:#5C6675;
  /* type */
  --lf-font:"Aptos Display",Aptos,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--lf-mist);color:var(--lf-ink);font-family:var(--lf-font);
     line-height:1.55;font-size:16px}

/* ---- header band: steel dark with the white wordmark ---- */
.lf-top{background:var(--lf-steel-dark);padding:16px 22px;display:flex;
        align-items:center;gap:14px}
.lf-top img{height:22px;width:auto;display:block}
.lf-top .lf-tag{color:#F5F6F8;opacity:.75;font-size:13px;letter-spacing:.06em;
        text-transform:uppercase;border-left:1px solid rgba(245,246,248,.3);
        padding-left:14px}

/* ---- headings ---- */
h1{font-size:28px;letter-spacing:-.02em;margin:0 0 6px;font-weight:700}
h2{font-size:20px;letter-spacing:-.01em;margin:0 0 6px;font-weight:700}
.lf-kicker{font-size:13px;font-weight:700;letter-spacing:.09em;
           text-transform:uppercase;color:var(--lf-steel);margin:0 0 8px}
.lf-sub{color:var(--lf-muted);margin:0 0 22px;font-size:15.5px}

/* ---- cards ---- */
.lf-card{max-width:640px;margin:32px auto;background:var(--lf-paper);
         border:1px solid var(--lf-line);border-radius:14px;padding:28px 30px}
.lf-panel{background:var(--lf-tint);border:1px solid var(--lf-line);
          border-radius:11px;padding:16px 18px}

/* ---- forms (shared idiom of the questionnaire + case pages) ---- */
label{display:block;font-weight:600;margin:18px 0 6px;font-size:14px}
.hint{font-weight:400;color:var(--lf-muted);font-size:13px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--lf-line);
      border-radius:9px;font-size:15px;font-family:inherit;background:var(--lf-paper);
      color:var(--lf-ink)}
input:focus,select:focus,textarea:focus,button:focus-visible,a.lf-btn:focus-visible{
      outline:2px solid var(--lf-steel-soft)}
textarea{resize:vertical}
fieldset{border:1px solid var(--lf-line);border-radius:11px;margin:18px 0 0;
         padding:8px 16px 16px}
legend{font-weight:600;font-size:14px;padding:0 6px}

/* ---- actions: square corners, steel blue, uppercase (site idiom) ---- */
button.lf-btn,a.lf-btn{display:inline-block;background:var(--lf-steel);color:#fff;
      border:0;border-radius:0;padding:14px 26px;font-size:15px;font-weight:700;
      letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
      text-decoration:none;text-align:center;font-family:inherit}
button.lf-btn:hover,a.lf-btn:hover{background:var(--lf-steel-dark)}
button.lf-btn:disabled{opacity:.6;cursor:default}
button.lf-btn.lf-wide{width:100%;margin-top:24px}

.lf-note{color:var(--lf-muted);font-size:13px;margin-top:14px}
a{color:var(--lf-steel)}

/* ---- footer ---- */
.lf-footer{background:var(--lf-steel-dark);color:#F5F6F8;margin-top:48px;
           padding:30px 22px;font-size:14px}
.lf-footer .lf-cols{max-width:900px;margin:0 auto;display:flex;gap:40px;
           flex-wrap:wrap}
.lf-footer h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
           opacity:.7;margin:0 0 8px}
.lf-footer a{color:#F5F6F8}
.lf-footer .lf-legal{max-width:900px;margin:26px auto 0;opacity:.6;font-size:12.5px}

/* ---- dark mode ---- */
@media (prefers-color-scheme:dark){
  :root{--lf-paper:#1A1F2A;--lf-mist:#10141C;--lf-line:#333B4A;
        --lf-ink:#F2F2F7;--lf-muted:#A0A8B4;--lf-tint:rgba(111,139,166,.12)}
  .lf-top,.lf-footer{background:#1B2A40}
}