/* ZUOK · Defence-tech design system tokens */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* base — warm dark */
  --bg-0: #0c0d08;
  --bg-1: #131410;
  --bg-2: #1a1c14;
  --bg-3: #22241a;
  --line: rgba(232, 224, 196, 0.10);
  --line-2: rgba(232, 224, 196, 0.18);

  /* olive primary */
  --olive: #6a7038;
  --olive-2: #8a9050;
  --olive-3: #3d4220;
  --olive-glow: rgba(138, 144, 80, 0.18);

  /* warm whites / sand */
  --sand-0: #f0e8ce;
  --sand-1: #d4ccb0;
  --sand-2: #9a9077;
  --sand-3: #6b6450;

  /* accents — used sparingly */
  --amber: #d9a441;
  --hazard: #c7472d;
  --signal: #c4d44a;

  /* type */
  --ff-display: 'Barlow Condensed', 'Oswald', sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
}

/* Light variant — invoked by [data-theme="light"] on .zuok root or any ancestor */
.zuok[data-theme="light"],
[data-theme="light"] .zuok {
  --bg-0: #ebe5d2;
  --bg-1: #e1dbc6;
  --bg-2: #d4ceb7;
  --bg-3: #c8c2aa;
  --line: rgba(20, 20, 10, 0.14);
  --line-2: rgba(20, 20, 10, 0.22);
  --sand-0: #14140a;
  --sand-1: #2a2a1d;
  --sand-2: #555041;
  --sand-3: #7a7460;
  --olive: #4a5025;
  --olive-2: #5e6532;
  --olive-3: #2e3215;
  --olive-glow: rgba(74, 80, 37, 0.12);
}

/* container */
.zuok {
  background: var(--bg-0);
  color: var(--sand-0);
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  min-height: 100%;
}

.zuok *, .zuok *::before, .zuok *::after { box-sizing: border-box; }

/* type scale */
.zuok .h-display { font-family: var(--ff-display); font-weight: 800; line-height: 0.86; letter-spacing: -0.02em; text-transform: uppercase; }
.zuok .h-1 { font-family: var(--ff-display); font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
.zuok .h-2 { font-family: var(--ff-display); font-weight: 600; line-height: 1.0; letter-spacing: 0.0em; text-transform: uppercase; }
.zuok .h-3 { font-family: var(--ff-display); font-weight: 600; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; }
.zuok .label { font-family: var(--ff-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sand-2); }
.zuok .label-lg { font-family: var(--ff-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.zuok .mono { font-family: var(--ff-mono); font-weight: 400; letter-spacing: 0.02em; }
.zuok .body-lg { font-size: 18px; line-height: 1.55; color: var(--sand-1); }
.zuok .body { font-size: 15px; line-height: 1.6; color: var(--sand-1); }
.zuok .small { font-size: 13px; color: var(--sand-2); }

/* primitives */
.zuok .container { max-width: 1320px; margin: 0 auto; padding: 0 56px; }
.zuok .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 56px; }

.zuok .hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.zuok .vr { width: 1px; background: var(--line); align-self: stretch; }

/* buttons */
.zuok .btn {
  display: inline-flex; align-items: center; gap: 12px;
  height: 52px; padding: 0 26px;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--line-2); background: transparent; color: var(--sand-0);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  position: relative;
}
.zuok .btn:hover { background: var(--bg-2); border-color: var(--sand-2); }
.zuok .btn-primary {
  background: var(--olive); border-color: var(--olive); color: var(--sand-0);
}
.zuok[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary { color: #f0e8ce; }
.zuok .btn-primary:hover { background: var(--olive-2); border-color: var(--olive-2); }
.zuok .btn-ghost { border-color: var(--line-2); color: var(--sand-1); }
.zuok .btn-sm { height: 40px; padding: 0 18px; font-size: 11px; }

.zuok .btn-arrow::after {
  content: '→'; font-family: var(--ff-body); font-size: 16px; opacity: 0.9;
}

/* technical brackets corner */
.zuok .corner {
  position: relative;
}
.zuok .corner::before, .zuok .corner::after,
.zuok .corner > .c-tl::before, .zuok .corner > .c-tl::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--sand-2);
}
.zuok .corner::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.zuok .corner::after { top: 0; right: 0; border-left: none; border-bottom: none; }
.zuok .corner > .c-tl { position: absolute; inset: 0; pointer-events: none; }
.zuok .corner > .c-tl::before { bottom: 0; left: 0; top: auto; border-top: none; border-right: none; }
.zuok .corner > .c-tl::after { bottom: 0; right: 0; top: auto; border-top: none; border-left: none; }

/* card */
.zuok .card {
  background: var(--bg-1);
  border: 1px solid var(--line);
  position: relative;
  padding: 28px;
}
.zuok .card-pad-lg { padding: 40px; }
.zuok .card-em { border-color: var(--olive); }

/* grid bg */
.zuok .grid-bg {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
}

.zuok .topo-bg {
  background:
    radial-gradient(ellipse at 20% 30%, var(--olive-glow), transparent 50%),
    radial-gradient(ellipse at 80% 70%, var(--olive-glow), transparent 60%);
}

/* form */
.zuok .field {
  display: flex; flex-direction: column; gap: 8px;
}
.zuok .field label { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand-2); }
.zuok .field input, .zuok .field textarea, .zuok .field select {
  background: var(--bg-1); border: 1px solid var(--line-2); color: var(--sand-0);
  font-family: var(--ff-body); font-size: 15px; padding: 14px 16px; outline: none;
}
.zuok .field input::placeholder, .zuok .field textarea::placeholder { color: var(--sand-3); }
.zuok .field input:focus, .zuok .field textarea:focus { border-color: var(--olive-2); }

/* badge */
.zuok .badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-family: var(--ff-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--sand-1);
}
.zuok .badge .dot { width: 6px; height: 6px; background: var(--olive-2); border-radius: 50%; }
.zuok .badge-amber .dot { background: var(--amber); }
.zuok .badge-hazard .dot { background: var(--hazard); }
.zuok .badge-signal .dot { background: var(--signal); }

/* divider with code */
.zuok .div-coded {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand-2);
}
.zuok .div-coded::before, .zuok .div-coded::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.zuok .div-coded.left::before { display: none; }

/* link */
.zuok a { color: inherit; text-decoration: none; }
.zuok .link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand-0); border-bottom: 1px solid var(--sand-2); padding-bottom: 4px;
}
.zuok .link-arrow:hover { color: var(--olive-2); border-color: var(--olive-2); }

/* utility */
.zuok .flex { display: flex; }
.zuok .col { display: flex; flex-direction: column; }
.zuok .gap-2 { gap: 8px; } .zuok .gap-3 { gap: 12px; } .zuok .gap-4 { gap: 16px; }
.zuok .gap-6 { gap: 24px; } .zuok .gap-8 { gap: 32px; } .zuok .gap-12 { gap: 48px; }
.zuok .gap-16 { gap: 64px; }
.zuok .between { justify-content: space-between; }
.zuok .center { align-items: center; }
.zuok .baseline { align-items: baseline; }
.zuok .stretch { align-items: stretch; }
.zuok .text-mute { color: var(--sand-2); }
.zuok .text-olive { color: var(--olive-2); }
.zuok .text-amber { color: var(--amber); }
.zuok .text-hazard { color: var(--hazard); }
.zuok .text-signal { color: var(--signal); }