/*
 * QikLog brand tokens.
 *
 * One file, every color. If you find yourself hardcoding a hex anywhere
 * else in the app, stop and ask whether it should be a token here instead.
 *
 * Naming convention: --ql-{category}-{role}
 *   category: color | surface | text | accent | level
 *   role:     name (e.g. ink, paper, teal, fg, bg-elev1)
 */

:root {
  /* Field Clinical palette (docs/BRAND.md) */
  --ql-paper:              #FCFAF5;
  --ql-ink:                #2E2A26;
  --ql-accent-rust:        #B94700;
  --ql-hairline:           #D9D3CA;
  --ql-ink-muted:          #5C554D;
  --ql-ink-caption:        #8A8177;

  /* Brand color: rust is primary. Teal kept for log-level greens already in use. */
  --ql-accent-teal:        #2dd4bf;
  --ql-accent-teal-dark:   #0d9488;
  --ql-accent-teal-glow:   rgba(45, 212, 191, 0.25);

  /* Surface (background) ramp */
  --ql-surface-ink:        #2E2A26;
  --ql-surface-elev1:      #3a3530;
  --ql-surface-elev2:      #4a433c;
  --ql-surface-border:     #5C554D;

  /* Text on dark surfaces */
  --ql-text-fg:            #FCFAF5;
  --ql-text-fg-strong:     #FCFAF5;
  --ql-text-fg-muted:      #D9D3CA;
  --ql-text-fg-dim:        #8A8177;

  /* Text on light surfaces */
  --ql-text-ink:           #2E2A26;
  --ql-text-ink-muted:     #5C554D;

  /* Light-mode surfaces */
  --ql-paper-elev1:        #F6F1E8;
  --ql-paper-border:       #D9D3CA;

  /* Notice banner — yellow card for standing warnings (demo/pre-alpha state).
     Tuned to read as "pay attention once" rather than "something is broken". */
  --ql-notice-bg:          #fff6c2;
  --ql-notice-border:      #e8cf5c;
  --ql-notice-fg:          #4a3a06;
  --ql-notice-mark:        #c8920a;
  --ql-notice-shadow:      rgba(74, 58, 6, 0.18);

  /* Log level colors (used by Tail.razor) */
  --ql-level-trace:        #6e7681;
  --ql-level-debug:        #79c0ff;
  --ql-level-info:         #56d364;
  --ql-level-warning:      #d29922;
  --ql-level-error:        #f85149;
  --ql-level-critical:     #ff7b72;

  /* Typography */
  --ql-font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --ql-font-sans:  'Public Sans', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --ql-font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Sizing */
  --ql-radius-sm:  4px;
  --ql-radius-md:  8px;
  --ql-radius-lg:  12px;
  --ql-radius-xl:  22px;  /* matches icon corner */
}

/* Utility classes Garfield can reach for instead of inlining colors */

.ql-bg-ink     { background: var(--ql-surface-ink); }
.ql-bg-elev1   { background: var(--ql-surface-elev1); }
.ql-bg-elev2   { background: var(--ql-surface-elev2); }
.ql-bg-paper   { background: var(--ql-paper); }

.ql-text-fg          { color: var(--ql-text-fg); }
.ql-text-fg-strong   { color: var(--ql-text-fg-strong); }
.ql-text-fg-muted    { color: var(--ql-text-fg-muted); }
.ql-text-accent      { color: var(--ql-accent-teal); }

.ql-mono   { font-family: var(--ql-font-mono); }
.ql-sans   { font-family: var(--ql-font-sans); }

/* The cursor blink — used in the wordmark and any "live" indicators */
@keyframes ql-blink {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: 0; }
  100%      { opacity: 1; }
}

.ql-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  background: var(--ql-accent-rust);
  vertical-align: text-bottom;
  margin-left: 0.08em;
  border-radius: 1.5px;
  animation: ql-blink 1.2s steps(1, end) infinite;
}

/* Wordmark: Bricolage Grotesque 800, Qik in ink, Log in rust */
.ql-wordmark {
  font-family: var(--ql-font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--ql-text-ink);
  display: inline-flex;
  align-items: baseline;
}
.ql-wordmark .ql-wordmark-accent {
  color: var(--ql-accent-rust);
}

/* Dark surface variant of the wordmark */
.ql-on-dark .ql-wordmark {
  color: var(--ql-paper);
}
.ql-on-dark .ql-wordmark .ql-wordmark-accent {
  color: var(--ql-accent-rust);
}

/* Embed iframe host (marketing /embed/tail/{source}) */
.ql-embed-root {
  margin: 0;
  padding: 0.75rem;
  min-height: 100vh;
  background: var(--ql-paper);
  box-sizing: border-box;
}

.ql-live-tail-compact .ql-live-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  font-family: var(--ql-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ql-paper);
  background: var(--ql-accent-rust);
  border-radius: var(--ql-radius-sm);
}

.ql-live-tail-compact .ql-live-source {
  font-family: var(--ql-font-mono);
  font-size: 0.85rem;
  color: var(--ql-ink-muted);
}

.ql-live-status {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  font-family: var(--ql-font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ql-ink-muted);
  background: transparent;
  border: 1px solid var(--ql-hairline);
  border-radius: var(--ql-radius-sm);
}

.ql-live-status[data-state="connected"] {
  color: var(--ql-accent-rust);
  border-color: var(--ql-accent-rust);
}