@import url("./fonts.css");

/* Canonical public-site brand layer. Keep page behavior separate from these tokens. */
:root,
html[data-surface],
html[data-accent] {
  --brand-paper: #f6f4ef;
  --brand-section: #ece9e1;
  --brand-paper-light: #fffdf9;
  --brand-ink: #14231e;
  --brand-text-2: #5c6b65;
  --brand-text-3: #7c8983;
  --brand-green: #0f745e;
  --brand-mint-fill: #e3f4ed;
  --brand-mint: #8be4c5;
  --brand-deep: #0b261e;
  --brand-line: #d8ded9;
  --brand-orange: #d47d46;
  --brand-font-display: "Source Han Serif SC Site", "Source Han Serif SC", "Noto Serif SC", "Songti SC", "STSong", serif;
  --brand-font-body: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --brand-font-mono: "JetBrains Mono", "PT Mono", ui-monospace, monospace;

  --bg: var(--brand-paper);
  --surface: var(--brand-paper-light);
  --soft: #f0eee7;
  --input: var(--brand-paper-light);
  --primary: var(--brand-green);
  --primary-dark: var(--brand-deep);
  --primary-soft: var(--brand-mint-fill);
  --primary-line: #b8d8cc;
  --text: var(--brand-ink);
  --text-2: var(--brand-text-2);
  --text-3: var(--brand-text-3);
  --border: var(--brand-line);
  --border-strong: #bdc8c1;
  --ok: var(--brand-green);
  --danger: var(--brand-orange);
  --danger-soft: color-mix(in srgb, var(--brand-orange) 10%, var(--brand-paper-light));
  --danger-line: color-mix(in srgb, var(--brand-orange) 28%, var(--brand-line));
  --blue: var(--brand-green);
  --cyan: var(--brand-mint);
  --violet: var(--brand-green);

  --txt: var(--brand-ink);
  --txt2: var(--brand-text-2);
  --txt3: var(--brand-text-3);
  --line: var(--brand-line);
  --line-strong: #bdc8c1;
  --accent: var(--brand-green);
  --accent-soft: var(--brand-mint-fill);
  --accent-line: #b8d8cc;
  --success: var(--brand-green);
  --success-soft: var(--brand-mint-fill);

  --muted: var(--brand-text-2);
  --muted2: var(--brand-text-3);
  --line2: var(--brand-line);
  --accent-dark: var(--brand-deep);

  --lg-bg: var(--brand-paper);
  --lg-bg2: var(--brand-paper-light);
  --lg-surface: var(--brand-paper-light);
  --lg-soft: #f0eee7;
  --lg-line: var(--brand-line);
  --lg-line-strong: #bdc8c1;
  --lg-tx: var(--brand-text-2);
  --lg-hi: var(--brand-ink);
  --lg-dim: var(--brand-text-3);
  --lg-cyan: var(--brand-green);
  --lg-cyan-soft: var(--brand-mint-fill);
  --lg-cyan-line: #b8d8cc;
}

body {
  font-family: var(--brand-font-body) !important;
}

body:not([data-brand-dark]) {
  color: var(--brand-ink) !important;
  background: var(--brand-paper) !important;
}

body[data-brand-dark] {
  --bg: var(--brand-deep);
  --txt: var(--brand-paper-light);
  --txt2: #b8cec4;
  --txt3: #8ca69a;
  --line: rgba(255, 253, 249, .14);
  color: var(--brand-paper-light) !important;
  background: var(--brand-deep) !important;
}

h1,
.form-title,
.lg-h1,
.lg-h2 {
  font-family: var(--brand-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

.code,
.ticket,
input[type="text"]#f-code {
  font-family: var(--brand-font-mono) !important;
}

body:not([data-brand-dark]) .nav,
body:not([data-brand-dark]) .lg-top {
  border-bottom-color: var(--brand-line) !important;
  background: rgba(246, 244, 239, .94) !important;
  box-shadow: none !important;
}

body:not([data-brand-dark]) .card,
body:not([data-brand-dark]) .wrap {
  border-color: var(--brand-line) !important;
  box-shadow: none !important;
}

body[data-brand-dark] .card {
  background: rgba(255, 253, 249, .045) !important;
  border-color: rgba(255, 253, 249, .14) !important;
}

body[data-brand-dark] .btn:not(.btn-ghost) {
  background: var(--brand-green) !important;
  box-shadow: none !important;
}

body[data-brand-dark] .btn:not(.btn-ghost):hover {
  background: var(--brand-green) !important;
  box-shadow: none !important;
}

body[data-brand-dark] .badge {
  background: rgba(139, 228, 197, .1) !important;
  border-color: rgba(139, 228, 197, .3) !important;
}

body[data-brand-dark] .badge svg,
body[data-brand-dark] .step i {
  color: var(--brand-mint) !important;
  stroke: var(--brand-mint) !important;
}

body[data-brand-dark] input:focus {
  border-color: var(--brand-mint) !important;
  box-shadow: 0 0 0 3px rgba(139, 228, 197, .13) !important;
}

.logo-lockup,
.lg-brand-lockup {
  display: block;
  width: 229px;
  height: 32px;
}

.logo-mark-only,
.lg-brand-mark-only {
  display: none;
  width: 32px;
  height: 32px;
}

.logo {
  align-items: center;
  gap: 0 !important;
  font-weight: 0 !important;
}

.auth-brand {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 7px !important;
}

.auth-lockup {
  display: block;
  width: 229px;
  height: 32px;
}

.auth-brand small {
  margin: 0 !important;
  color: var(--brand-text-3) !important;
  font-size: 10px !important;
  letter-spacing: .04em;
}

@media (max-width: 640px) {
  .logo-lockup,
  .lg-brand-lockup {
    display: none;
  }

  .logo-mark-only,
  .lg-brand-mark-only {
    display: block;
  }

  .auth-lockup {
    width: 206px;
    height: auto;
  }
}