/* ==============================================================
   PassportLens — shared theme
   Light, professional. Navy + gold. Self-hosted fonts, no CDNs.
   Every page (landing, studio, pricing, account, admin, CRM)
   loads this first, then its own stylesheet.
   ============================================================== */

@font-face { font-family:"Manrope"; src:url("fonts/manrope-latin-500-normal.woff2") format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-latin-700-normal.woff2") format("woff2"); font-weight:700; font-display:swap; }
@font-face { font-family:"Manrope"; src:url("fonts/manrope-latin-800-normal.woff2") format("woff2"); font-weight:800; font-display:swap; }
@font-face { font-family:"Inter";   src:url("fonts/inter-latin-400-normal.woff2")   format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Inter";   src:url("fonts/inter-latin-500-normal.woff2")   format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Inter";   src:url("fonts/inter-latin-600-normal.woff2")   format("woff2"); font-weight:600; font-display:swap; }

:root{
  /* brand */
  --navy:#351C15;        /* brand brown (UPS-style). Name kept so every stylesheet still works */
  --navy-2:#4A2A1F;      /* hover / secondary navy */
  --navy-deep:#241009;   /* footer, dark bands */
  --navy-soft:#F1EBE6;   /* tinted backgrounds */
  --gold:#FFB500;        /* primary action */
  --gold-2:#7A5500;      /* gold as TEXT (readable on white) */
  --gold-hover:#E5A300;  /* button hover */
  --gold-soft:#FFF3CC;   /* tinted gold backgrounds */
  --gold-line:#FFD966;

  /* neutrals */
  --bg:#FFFFFF;
  --bg-2:#F2F1EF;
  --bg-3:#E9E5E1;
  --line:#E3DED9;
  --line-2:#CFC7C1;
  --text:#121212;
  --text-2:#4A4441;
  --mut:#6E6662;
  --mut-2:#9A918C;

  /* status */
  --ok:#1F8A4C;   --ok-soft:#E6F4EC;
  --warn:#B9770E; --warn-soft:#FDF3E2;
  --bad:#C43C3C;  --bad-soft:#FBE9E9;
  --info:#1D5FA6; --info-soft:#E6EFF9;

  /* type */
  --font-head:"Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body:"Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* shape */
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(53,28,21,.06), 0 1px 3px rgba(53,28,21,.04);
  --shadow:0 6px 18px rgba(53,28,21,.08), 0 2px 6px rgba(53,28,21,.05);
  --shadow-lg:0 24px 48px rgba(53,28,21,.14), 0 8px 16px rgba(53,28,21,.06);
  --maxw:1180px;
  color-scheme:light;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  background:var(--bg); color:var(--text); font-family:var(--font-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,p,ul,ol,figure{margin:0;}
h1,h2,h3,h4,h5{font-family:var(--font-head); color:var(--navy); font-weight:800; letter-spacing:-.015em; line-height:1.12;}
a{color:inherit; text-decoration:none;}
img,svg,video{max-width:100%; display:block;}
button,input,select,textarea{font:inherit; color:inherit;}
::selection{background:rgba(255,181,0,.35); color:var(--navy);}
:focus-visible{outline:3px solid rgba(255,181,0,.55); outline-offset:2px; border-radius:4px;}

/* ---------- layout helpers ---------- */
.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:24px;}
.kicker{
  font-family:var(--font-head); font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-2); display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{content:""; width:22px; height:2px; background:var(--gold); border-radius:2px;}
.sec-head{max-width:720px; margin-bottom:40px;}
.sec-head h2{font-size:clamp(28px,3.6vw,42px); margin-top:14px;}
.sec-head p{color:var(--text-2); font-size:17px; margin-top:12px; max-width:60ch;}
.center{text-align:center;}
.sec-head.center{margin-inline:auto; text-align:center;} .sec-head.center .kicker{justify-content:center;} .sec-head.center p{margin-inline:auto;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:var(--r-pill); border:1.5px solid var(--gold);
  background:var(--gold); color:var(--navy); font-family:var(--font-head); font-weight:800; font-size:15px;
  line-height:1; cursor:pointer; white-space:nowrap; transition:background .18s, border-color .18s, transform .18s, box-shadow .18s;
  box-shadow:0 2px 0 rgba(0,0,0,.04);
}
.btn:hover{background:var(--gold-hover); border-color:var(--gold-hover); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn .arw{transition:transform .18s;} .btn:hover .arw{transform:translateX(3px);}
.btn.navy{background:var(--navy); border-color:var(--navy); color:#fff;}
.btn.navy:hover{background:var(--navy-2); border-color:var(--navy-2);}
.btn.ghost{background:transparent; border-color:var(--line-2); color:var(--navy);}
.btn.ghost:hover{border-color:var(--navy); background:var(--navy-soft);}
.btn.ghost.on-dark{border-color:rgba(255,255,255,.35); color:#fff;}
.btn.ghost.on-dark:hover{background:rgba(255,255,255,.08); border-color:#fff;}
.btn.sm{padding:9px 16px; font-size:13.5px;}
.btn.lg{padding:16px 28px; font-size:16px;}
.btn.block{width:100%;}
.btn[disabled],.btn.is-disabled{opacity:.55; cursor:not-allowed; transform:none;}

/* ---------- cards ---------- */
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);}
.card.pad{padding:26px;}
.card.hover{transition:transform .2s, box-shadow .2s, border-color .2s;}
.card.hover:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2);}

/* ---------- badges / status ---------- */
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; line-height:1; border:1px solid transparent;}
.badge.ok{background:var(--ok-soft); color:var(--ok); border-color:#BFE3CC;}
.badge.warn{background:var(--warn-soft); color:var(--warn); border-color:#F3DDAE;}
.badge.bad{background:var(--bad-soft); color:var(--bad); border-color:#F2C2C2;}
.badge.info{background:var(--info-soft); color:var(--info); border-color:#BFD5EE;}
.badge.gold{background:var(--gold-soft); color:var(--gold-2); border-color:var(--gold-line);}
.badge.navy{background:var(--navy); color:#fff;}

/* ---------- forms ---------- */
label.field{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--text-2);}
.field input,.field select,.field textarea,
input.input,select.input,textarea.input{
  width:100%; padding:12px 14px; border:1.5px solid var(--line-2); border-radius:var(--r-sm); background:#fff;
  font-size:15px; font-weight:400; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 4px rgba(53,28,21,.10);}
.field textarea{resize:vertical; min-height:110px;}
.field .hint{font-weight:400; color:var(--mut); font-size:12.5px;}
.field.error input,.field.error textarea{border-color:var(--bad);}
.form-msg{font-size:14px; color:var(--text-2);} .form-msg.ok{color:var(--ok);} .form-msg.bad{color:var(--bad);}

/* ---------- brand lockup ---------- */
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--navy);}
.brand svg{height:34px; width:auto;}
.brand .brand-name{font-family:var(--font-head); font-weight:800; font-size:20px; letter-spacing:-.02em; line-height:1;}
.brand .brand-name b{color:var(--gold); font-weight:800;}
.brand.on-dark{color:#fff;}

/* ---------- misc ---------- */
.muted{color:var(--mut);} .small{font-size:13.5px;}
.divider{height:1px; background:var(--line); border:0; margin:0;}
.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){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important;} }