/* ───────────────────────────────────────────────────────────────────────
 * Aifredas.lt — brand.css
 *
 * Single source of truth for design tokens. Imported by:
 *   - site/index.html         (landing)
 *   - site/brand.html         (live design system)
 *   - backend/views/dashboard.html
 *   - backend/views/admin.html
 *
 * If you change a token, every surface reads it on next paint.
 * Component utilities at the bottom (.btn, .card, .chip, etc.) are
 * the only sanctioned way to assemble UI. Don't reach for raw hex
 * values in component code.
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ── colour: paper & ink ──────────────────────────────────────────── */
  /* Cool slate-tinted off-white — deliberately not "Claude paper cream". */
  --paper:        #f4f6fa;   /* cool off-white background */
  --surface:      #ffffff;   /* cards, modals */
  --surface-2:    #edf0f6;   /* sunken / secondary surface */
  --hairline:     #e2e6ee;   /* subtle horizontal dividers */
  --line:         #ccd2df;   /* regular borders */
  --line-strong:  #99a2b8;   /* emphasised borders */

  --ink-1:        #111827;   /* primary heading + body — slate-900 */
  --ink-2:        #1f2937;   /* subheading */
  --ink-3:        #4b5563;   /* body copy on busy backgrounds */
  --ink-4:        #6b7280;   /* muted */
  --ink-5:        #9ca3af;   /* dim */

  /* ── colour: brand accent ─────────────────────────────────────────── */
  /* Indigo violet — bold, distinct, and intentionally NOT Anthropic coral. */
  --accent:       #4f3df0;   /* primary CTA — electric indigo */
  --accent-deep:  #3826b8;   /* hover / pressed */
  --accent-soft:  #ebe8ff;   /* tinted background (badges, hover rows) */
  --accent-ink:   #281b8f;   /* text on tinted bg */

  /* Secondary accent for contrast — warm amber (Lithuania-coded). Used
     sparingly: highlight stripes, hero accents, deadline urgency. */
  --accent-2:       #f4a72c;
  --accent-2-soft:  #fdf2dd;

  /* ── colour: state ────────────────────────────────────────────────── */
  --success:      #0a7c54;
  --success-soft: #e1f3e8;
  --warn:         #b88200;
  --warn-soft:    #fbf2dc;
  --danger:       #b91c1c;
  --danger-soft:  #fde8e8;
  --info:         #1d4ed8;
  --info-soft:    #e3ecff;

  /* ── colour: gradient accents (use sparingly) ─────────────────────── */
  /* Renamed --grad-warm but kept the var name to avoid touching every
     consumer. Now an indigo→violet→amber sweep; warm only at the tail. */
  --grad-warm:    linear-gradient(135deg, #4f3df0 0%, #7c5ee8 45%, #f4a72c 100%);
  --grad-mist:    linear-gradient(180deg, rgba(79,61,240,0.07), rgba(79,61,240,0));

  /* ── typography ───────────────────────────────────────────────────── */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;   /* 12 — captions, badges */
  --fs-sm:   0.875rem;  /* 14 — secondary copy */
  --fs-base: 1rem;      /* 16 — body */
  --fs-lg:   1.125rem;  /* 18 — emphasised body */
  --fs-xl:   1.25rem;   /* 20 — H4 */
  --fs-2xl:  1.5rem;    /* 24 — H3 */
  --fs-3xl:  1.875rem;  /* 30 — H2 */
  --fs-4xl:  2.25rem;   /* 36 — H1 */
  --fs-5xl:  3rem;      /* 48 — display */
  --fs-6xl:  3.75rem;   /* 60 — hero */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.55;
  --lh-loose:  1.7;

  --tracking-tight: -0.025em;
  --tracking-base:  0;
  --tracking-wide:  0.02em;

  /* ── spacing: 4px base ────────────────────────────────────────────── */
  --s-1:  0.25rem;  /* 4 */
  --s-2:  0.5rem;   /* 8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.25rem;  /* 20 */
  --s-6:  1.5rem;   /* 24 */
  --s-8:  2rem;     /* 32 */
  --s-10: 2.5rem;   /* 40 */
  --s-12: 3rem;     /* 48 */
  --s-16: 4rem;     /* 64 */
  --s-20: 5rem;     /* 80 */
  --s-24: 6rem;     /* 96 */

  /* ── radius ───────────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 9999px;

  /* ── shadow ───────────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-3: 0 12px 28px -8px rgba(15, 23, 42, 0.10), 0 4px 10px -2px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 3px rgba(232, 93, 44, 0.25);

  /* ── motion ───────────────────────────────────────────────────────── */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── layout ───────────────────────────────────────────────────────── */
  --maxw-prose: 640px;
  --maxw-text:  720px;
  --maxw-grid:  1180px;
  --maxw-wide:  1320px;

  --header-h: 64px;
  --sidebar-w: 264px;
  --rail-w: 320px;
}

/* ── reset / base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

/* ── typography utilities ────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  font-feature-settings: "ss01" on, "ss03" on;
}
.heading {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-4);
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-4); }
.dim   { color: var(--ink-5); }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-deep); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  color: var(--ink-1);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--line-strong); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-sm { height: 32px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn-lg { height: 52px; padding: 0 var(--s-6); font-size: var(--fs-lg); }

/* ── card ────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.card-tight { padding: var(--s-4); }
.card-loose { padding: var(--s-8); }

/* ── input ───────────────────────────────────────────────────────────── */
.input,
.textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-1);
  font-size: var(--fs-base);
  font-family: inherit;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-5); }
.input:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.textarea { resize: vertical; min-height: 96px; font-family: inherit; line-height: var(--lh-base); }

/* the centred-prompt pill input — used by landing + dashboard composer */
.prompt {
  width: 100%;
  height: 60px;
  padding: 0 var(--s-16) 0 var(--s-6);
  border-radius: 30px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 1.05rem;
  transition: border-color var(--t-fast), box-shadow var(--t-med), transform var(--t-fast);
  box-shadow: var(--shadow-1);
}
.prompt:focus { border-color: var(--accent); box-shadow: var(--shadow-focus), var(--shadow-2); outline: none; }

/* ── chip ────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-3);
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast);
}
.chip:hover { background: #fcdfd1; }
.chip-outline {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-2);
}
.chip-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }

/* ── badge ───────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warn    { background: var(--warn-soft);    color: var(--warn); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: var(--info-soft);    color: var(--info); }
.badge-mono    { background: var(--surface-2);    color: var(--ink-3); border: 1px solid var(--hairline); }

/* ── live pulse dot ──────────────────────────────────────────────────── */
.pulse {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--success-soft);
  color: var(--success);
  border: 1px solid #b3dbc6;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-family: var(--font-mono);
}
.pulse .pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(10, 124, 84, 0.6);
  animation: pulse-ring 1.8s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(10, 124, 84, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(10, 124, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(10, 124, 84, 0); }
}

/* ── chat bubble ─────────────────────────────────────────────────────── */
.bubble {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 80%;
  word-wrap: break-word;
}
.bubble-user {
  background: var(--ink-1);
  color: #fff;
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.bubble-agent {
  background: var(--surface-2);
  color: var(--ink-1);
  border-bottom-left-radius: 4px;
  margin-right: auto;
  border: 1px solid var(--hairline);
}
.bubble-agent strong { color: var(--accent-deep); }

/* ── tiny utility helpers ────────────────────────────────────────────── */
.hstack { display: flex; align-items: center; gap: var(--s-3); }
.vstack { display: flex; flex-direction: column; gap: var(--s-3); }
.spacer { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }
.cap-prose { max-width: var(--maxw-prose); margin-left: auto; margin-right: auto; }
.cap-text  { max-width: var(--maxw-text);  margin-left: auto; margin-right: auto; }
.cap-grid  { max-width: var(--maxw-grid);  margin-left: auto; margin-right: auto; padding: 0 var(--s-6); }
.cap-wide  { max-width: var(--maxw-wide);  margin-left: auto; margin-right: auto; padding: 0 var(--s-6); }

.divider { height: 1px; background: var(--hairline); border: 0; margin: var(--s-8) 0; }

::selection { background: var(--accent); color: #fff; }

/* ── prefers-reduced-motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}