/* =========================================================
   X-ONEPASS GLOBAL — CSS Constitution (V2)
   Purpose: Calm authority, strict hierarchy, audit-ready.
   Layers: Tokens → Base → Layout → Components → Utilities
   Supports: Dark Mode, Print, Reduced Motion, High Contrast
   ========================================================= */

/* =========================
   1) TOKENS (Single Source)
   ========================= */

:root{
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-00: 12px;
  --fs-0: 14px;
  --fs-1: 16px;
  --fs-2: 18px;
  --fs-3: 22px;
  --fs-4: 28px;
  --fs-5: 36px;

  --lh-tight: 1.25;
  --lh-base: 1.65;
  --lh-relaxed: 1.8;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Spacing scale */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

  /* Radii */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;

  /* Shadows (subtle, document-grade) */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(0,0,0,0.06);
  --sh-2: 0 6px 18px rgba(0,0,0,0.08);

  /* Colors — Light */
  --bg: #ffffff;
  --surface: #fbfcfe;
  --ink: #0f172a;         /* near-slate-900 */
  --muted: rgba(15,23,42,0.70);
  --subtle: rgba(15,23,42,0.56);

  --line: rgba(15,23,42,0.12);
  --hairline: rgba(15,23,42,0.08);

  --accent: #0b3a72;      /* calm navy */
  --accent-ink: #ffffff;

  /* Semantic */
  --ok: #0f766e;
  --warn: #a16207;
  --bad: #b91c1c;

  /* Focus ring */
  --focus: rgba(11,58,114,0.20);

  /* Links */
  --link: var(--accent);
  --link-underline: rgba(15,23,42,0.22);
  --link-underline-strong: rgba(15,23,42,0.46);

  /* Components */
  --panel-bg: var(--surface);
  --panel-line: var(--line);

  --danger-line: rgba(185,28,28,0.35);
  --term-bg: rgba(15,23,42,0.03);

  /* Width */
  --maxw: 980px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --surface: #0e172a;
    --ink: #e5e7eb;
    --muted: rgba(229,231,235,0.78);
    --subtle: rgba(229,231,235,0.62);

    --line: rgba(229,231,235,0.16);
    --hairline: rgba(229,231,235,0.10);

    --accent: #7db7ff;
    --accent-ink: #071225;

    --focus: rgba(125,183,255,0.22);

    --link: #7db7ff;
    --link-underline: rgba(229,231,235,0.25);
    --link-underline-strong: rgba(229,231,235,0.50);

    --panel-bg: rgba(229,231,235,0.04);
    --panel-line: rgba(229,231,235,0.14);

    --danger-line: rgba(248,113,113,0.38);
    --term-bg: rgba(229,231,235,0.05);

    --sh-1: 0 1px 2px rgba(0,0,0,0.35);
    --sh-2: 0 10px 26px rgba(0,0,0,0.40);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* High Contrast */
@media (prefers-contrast: more){
  :root{
    --line: rgba(15,23,42,0.22);
    --hairline: rgba(15,23,42,0.16);
    --link-underline: rgba(15,23,42,0.36);
    --link-underline-strong: rgba(15,23,42,0.70);
    --focus: rgba(11,58,114,0.30);
  }
}

/* =========================
   2) BASE
   ========================= */

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
body{
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video{ max-width: 100%; height: auto; }

a{
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid var(--link-underline);
}
a:hover{
  border-bottom-color: var(--link-underline-strong);
}
a:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

h1,h2,h3{ margin: 0 0 var(--sp-3); line-height: var(--lh-tight); }
h1{ font-size: var(--fs-5); letter-spacing: -0.02em; }
h2{ font-size: var(--fs-4); letter-spacing: -0.01em; }
h3{ font-size: var(--fs-3); }

p{ margin: 0 0 var(--sp-4); color: var(--muted); }
strong{ color: var(--ink); font-weight: var(--fw-semibold); }
code, pre{ font-family: var(--font-mono); }

hr{
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--sp-7) 0;
}

/* =========================
   3) LAYOUT
   ========================= */

.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.nav{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
@media (prefers-color-scheme: dark){
  .nav{ background: rgba(11,18,32,0.88); }
}

.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  gap: var(--sp-5);
}

.brand{
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 260px;
}
.brand a{
  border-bottom: none;
  color: var(--ink);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}
.subline{
  font-size: var(--fs-0);
  color: var(--subtle);
}

.nav-links{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: flex-end;
}
.nav-links a{
  font-size: var(--fs-0);
  color: var(--muted);
  border-bottom-color: transparent;
}
.nav-links a:hover{
  color: var(--ink);
  border-bottom-color: var(--link-underline);
}

main{
  flex: 1;
  padding: var(--sp-9) 0 var(--sp-10);
}

.section{
  margin-bottom: var(--sp-8);
}

.actions{
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
}

/* =========================
   4) COMPONENTS
   ========================= */

.block{
  margin: var(--sp-7) 0;
}
.block-title{
  font-size: var(--fs-2);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  margin-bottom: var(--sp-3);
}

.panel{
  background: var(--panel-bg);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-2);
  padding: var(--sp-5);
  box-shadow: var(--sh-1);
}
.panel p{ color: var(--muted); }

.do-not{
  border-left: 4px solid var(--danger-line);
  padding-left: var(--sp-4);
}
.do-not .block-title{ color: var(--ink); }

.terminology{
  background: var(--term-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: var(--sp-5);
}
.terminology p{ color: var(--subtle); }

.notice{
  border: 1px solid var(--hairline);
  border-radius: var(--r-2);
  padding: var(--sp-4);
  background: transparent;
}
.notice p{ margin-bottom: 0; color: var(--subtle); }

.btn{
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: var(--r-2);
  font-size: var(--fs-0);
  font-weight: var(--fw-medium);
  cursor: pointer;
  box-shadow: var(--sh-0);
  transition: transform 120ms ease, opacity 120ms ease, border-color 120ms ease;
}
.btn:hover{
  border-color: rgba(15,23,42,0.22);
}
.btn:active{
  transform: translateY(1px);
}
.btn:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.btn-primary{
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--sh-1);
}
.btn-primary:hover{ opacity: 0.93; }
.btn-primary:active{ opacity: 0.88; }

.btn-quiet{
  border-color: var(--hairline);
  color: var(--muted);
}
.btn-quiet:hover{
  color: var(--ink);
  border-color: var(--line);
}

.btn:disabled,
.btn[aria-disabled="true"]{
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Form system (for /contact) */
.form{
  display: grid;
  gap: var(--sp-4);
}
.field{
  display: grid;
  gap: var(--sp-2);
}
.label{
  font-size: var(--fs-0);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.help{
  font-size: var(--fs-00);
  color: var(--subtle);
}
.input, select, textarea{
  width: 100%;
  font: inherit;
  font-size: var(--fs-0);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 10px 12px;
  outline: none;
  box-shadow: var(--sh-0);
}
textarea{ min-height: 120px; resize: vertical; }
.input:focus, select:focus, textarea:focus{
  border-color: rgba(11,58,114,0.40);
  box-shadow: 0 0 0 4px var(--focus);
}
.input::placeholder, textarea::placeholder{
  color: rgba(15,23,42,0.45);
}
@media (prefers-color-scheme: dark){
  .input::placeholder, textarea::placeholder{ color: rgba(229,231,235,0.45); }
}

.field-error .input,
.field-error select,
.field-error textarea{
  border-color: rgba(185,28,28,0.55);
  box-shadow: 0 0 0 4px rgba(185,28,28,0.10);
}
.msg-error{
  font-size: var(--fs-00);
  color: var(--bad);
}
.msg-ok{
  font-size: var(--fs-00);
  color: var(--ok);
}

/* Footer */
.footer{
  border-top: 1px solid var(--hairline);
  padding: var(--sp-6) 0;
  color: var(--subtle);
  font-size: var(--fs-0);
}
.footer a{ color: var(--muted); }
.footer a:hover{ color: var(--ink); }

/* =========================
   5) UTILITIES
   ========================= */

.tiny{ font-size: var(--fs-00); color: var(--subtle); }
.muted{ color: var(--muted); }
.subtle{ color: var(--subtle); }

.grid-2{
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 820px){
  .grid-2{ grid-template-columns: 1fr; }
  .brand{ min-width: auto; }
  main{ padding: var(--sp-8) 0 var(--sp-9); }
}

/* =========================
   6) PRINT (Audit-ready)
   ========================= */

@media print{
  :root{
    --bg: #fff;
    --ink: #000;
    --muted: #000;
    --subtle: #000;
  }

  body{ background: #fff; color: #000; }
  .nav, .actions, .btn{ display: none !important; }

  a{
    color: #000;
    border-bottom: 1px solid #000;
  }

  /* Append URL after links */
  a[href^="http"]::after,
  a[href^="/"]::after{
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #000;
  }

  .panel, .terminology{
    box-shadow: none !important;
    border: 1px solid #000 !important;
    background: #fff !important;
  }

  .footer{
    display: block !important;
    border-top: 1px solid #000 !important;
    color: #000 !important;
  }
}

/* V2.5 Visible Accent — bind to existing UI primitives */
:root{--accent:#1f3a5f;}

.section-title::before,
.rule::before,
.hr-accent,
.badge-accent{
  background:var(--accent)!important;
}

.btn-primary{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
}

a:hover{ color:var(--accent)!important; }