/* Brandbook, September 2026. Loaded after Broadsheet and layout styles.
   Original logo files are used without filters, cropping or redrawing. */
@font-face {
  font-family: Cousine;
  src: url('./assets/fonts/Cousine-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Cousine;
  src: url('./assets/fonts/Cousine-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Unbounded;
  src: url('./assets/fonts/Unbounded-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root, :root[data-theme='light'], :root[data-theme='dark'] {
  --brand-lime: #ddf78f;
  --brand-anthracite: #2d2d2d;
  --brand-melange: #e4e4e4;
  --font-heading: Unbounded, ui-sans-serif, system-ui, sans-serif;
  --font-body: Cousine, ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-heading-weight: 400;
}

:root, :root[data-theme='light'] {
  --color-bg: #e4e4e4;
  --color-surface: #f7f7f7;
  --color-text: #2d2d2d;
  --color-divider: #2d2d2d24;
  --color-neutral-100: #ededed;
  --color-neutral-200: #dedede;
  --color-neutral-300: #cdcdcd;
  --color-neutral-400: #ababab;
  --color-neutral-500: #888888;
  --color-neutral-600: #707070;
  --color-neutral-700: #606060;
  --color-neutral-800: #414141;
  --color-neutral-900: #2d2d2d;
  --color-accent: #ddf78f;
  --color-accent-100: #eff7d9;
  --color-accent-200: #e2f2b7;
  --color-accent-300: #ddf78f;
  --color-accent-400: #cce77e;
  --color-accent-500: #b5d368;
  --color-accent-600: #92ac4e;
  --color-accent-700: #52612e;
  --color-accent-800: #414c25;
  --color-accent-900: #2d2d2d;
  --brand-focus: #52612e;
  --shadow-sm: 0 1px 2px #00000008;
  --shadow-md: 0 8px 24px #0000000d;
  --shadow-lg: 0 18px 50px #00000026;
}

:root[data-theme='dark'] {
  --color-bg: #1e1e1e;
  --color-surface: #2d2d2d;
  --color-text: #e4e4e4;
  --color-divider: #e4e4e424;
  --color-neutral-100: #343434;
  --color-neutral-200: #3e3e3e;
  --color-neutral-300: #4b4b4b;
  --color-neutral-400: #656565;
  --color-neutral-500: #828282;
  --color-neutral-600: #9e9e9e;
  --color-neutral-700: #b4b4b4;
  --color-neutral-800: #cdcdcd;
  --color-neutral-900: #e4e4e4;
  --color-accent: #ddf78f;
  --color-accent-100: #373e29;
  --color-accent-200: #495335;
  --color-accent-300: #626f41;
  --color-accent-400: #91a456;
  --color-accent-500: #b5d368;
  --color-accent-600: #cce77e;
  --color-accent-700: #ddf78f;
  --color-accent-800: #e3f7ab;
  --color-accent-900: #f0facf;
  --brand-focus: #ddf78f;
}

/* Display type stays on section headings; customer content uses the text face. */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); letter-spacing: -.025em; }
.page-head h1, .login h1, .dialog-title {
  font-family: var(--font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.045em;
  line-height: 1.35;
  text-wrap: balance;
}
.page-head h1 { font-size: clamp(22px, 2.2vw, 28px); }
.login h1, .dialog-title { font-size: 22px; }
.section-head h2, .stats-layout > section h2 { text-transform: uppercase; }
.card-open { font-family: var(--font-body); }
.leads-table th:nth-child(3) { width: 12%; }
.leads-table th:nth-child(7) { width: 13%; }
.btn, .input, .side-link { font-family: var(--font-body); }
.sidebar { box-shadow: none; }
.sidebar .brand { font-size: 18px; }

.btn-primary, [data-theme='dark'] .btn-primary {
  background: var(--brand-lime);
  color: var(--brand-anthracite);
  border-color: #b5d368;
  box-shadow: 0 2px 5px #0000000d;
}
.btn-primary:hover:not(:disabled), [data-theme='dark'] .btn-primary:hover:not(:disabled) {
  background: #e7f9b1;
  color: var(--brand-anthracite);
}
.btn-primary:active:not(:disabled), [data-theme='dark'] .btn-primary:active:not(:disabled) {
  background: #cce77e;
}
.side-link[aria-current='page'] {
  background: var(--brand-lime);
  color: var(--brand-anthracite);
  box-shadow: none;
}
.side-link[aria-current='page'] .nav-icon { opacity: 1; }
.theme-toggle:focus-visible, .btn:focus-visible, .input:focus-visible,
.spark-interactive:focus-visible, .auth-recovery:focus-visible, .auth-demo-link:focus-visible {
  outline: 2px solid var(--brand-focus);
  outline-offset: 3px;
}
.table tr:focus-visible { outline-color: var(--brand-focus); }
[data-theme='dark'] .theme-toggle-knob { background: var(--brand-lime); }
[data-theme='dark'] .theme-toggle .theme-moon { color: var(--brand-anthracite); }
.login-mark { color: var(--color-text); }
.dialog-backdrop { background: #0000009e; }

/* Clear space follows the mark's proportions: 1/2 height at the sides,
   1/4 above and below. Both supplied theme variants retain their aspect ratio. */
.auth-brand, .sidebar .app-brand {
  display: block;
  width: 100%;
  max-width: 260px;
  padding: 12px 24px;
}
.sidebar .app-brand { padding: 10px 20px; margin-bottom: 0; }
.brand-wordmark {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-wordmark-dark { display: none; }
[data-theme='dark'] .brand-wordmark-light { display: none; }
[data-theme='dark'] .brand-wordmark-dark { display: block; }

/* The atmospheric gradient belongs to the entry screen; tables stay quiet. */
.auth-page { background: var(--brand-melange); }
[data-theme='dark'] .auth-page { background: #000; }
.auth-glow {
  position: absolute;
  inset: -25%;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-25deg);
  background: radial-gradient(ellipse at 73% 44%, #fff 0%, #ddf78f99 9%, transparent 40%);
}
[data-theme='dark'] .auth-glow {
  background: radial-gradient(ellipse at 73% 44%, #fff 0%, #ddf78f 5%, #000 24%, #2d2d2d 43%, #000 61%);
}
.login { box-shadow: 0 24px 80px #00000012; }
[data-theme='dark'] .login {
  background: #2d2d2de0;
  border-color: #e4e4e424;
  box-shadow: 0 24px 80px #0005;
}
.auth-field .input:focus, .auth-input-row:focus-within {
  border-bottom-color: var(--brand-focus);
  box-shadow: 0 1px 0 var(--brand-focus);
}
.auth-field .input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  caret-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-surface) inset !important;
}
@media (max-width: 760px) {
  .auth-brand { max-width: 210px; padding: 10px 20px; }
  .sidebar .app-brand { max-width: 200px; padding: 8px 16px; }
  .sidebar .brand { font-size: 16px; }
  .page-head h1 { font-size: 23px; }
  .login h1, .dialog-title { font-size: 20px; }
}
@media (max-width: 440px) {
  .auth-header { gap: 12px; }
  .auth-brand { padding: 8px 16px; }
  .sidebar .app-brand { max-width: 184px; }
}