/* ============================================================================
   Wesley AI — Brand Design System
   ----------------------------------------------------------------------------
   Single source of truth for the app's visual language. Tokens are lifted
   verbatim from the marketing site (wesleyai.co) so the product and the brand
   cannot drift apart: change a colour there, change it here, and every screen
   follows.

   Load order matters. This file ships two layers:
     1. Brand tokens   — the real vocabulary (--ink, --teal, --cream …)
     2. Legacy bridge  — maps the app's older names (--accent, --text, --bg …)
                         onto brand tokens so existing page CSS inherits the
                         brand without being rewritten line by line.
   ========================================================================= */

/* ── Layer 1: brand tokens ────────────────────────────────────────────────── */
:root {
  /* Ink — the deep navy that carries every dark surface */
  --ink:            #12233a;
  --ink-soft:       #23364f;
  --ink-deep:       #0b1626;

  /* Teal — the one accent. Used for action, never for decoration. */
  --teal:           #2aadb5;
  --teal-dark:      #1e8f97;
  --teal-tint:      #e7f5f6;
  --teal-line:      rgba(42, 173, 181, 0.32);
  /* Legible teal for text and icons sitting on an ink surface. --teal-line is
     a 32%-alpha border colour and fails badly when used as a text colour. */
  --teal-on-ink:    #9fe3e8;

  /* Cream — warm neutrals. These are what stop the UI reading as generic
     dashboard grey; the brand's paper is warm, not blue-grey. */
  --cream:          #f4f2ee;
  --cream-deep:     #eae6df;
  --paper:          #faf9f7;

  /* Text */
  --body:           #3a4658;
  --muted:          #5b6474;
  --faint:          #8b93a1;
  --white:          #ffffff;

  /* Gold — reserved for premium/billing moments only */
  --gold:           #d4a843;
  /* Steel sits in the ink family but still reads as blue — needed because the
     triage tiers are named by colour ("blue priority"), so the hue carries
     meaning and cannot simply be dropped for being off-palette. */
  --steel:          #3c5a80;
  --steel-tint:     #e8edf4;
  --gold-tint:      #fdf3dc;
  --gold-ink:       #9a7418;

  /* Lines */
  --line:           rgba(18, 35, 58, 0.10);
  --line-strong:    rgba(18, 35, 58, 0.18);
  --line-light:     rgba(18, 35, 58, 0.06);

  /* Elevation */
  --shadow-sm:      0 1px 2px rgba(18, 35, 58, 0.05);
  --shadow-md:      0 12px 32px -12px rgba(18, 35, 58, 0.16);
  --shadow-lg:      0 28px 60px -24px rgba(18, 35, 58, 0.28);
  --shadow-teal:    0 20px 48px -20px rgba(42, 173, 181, 0.45);

  /* Type */
  --font-display:   "Red Hat Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:      "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif:     "Lora", Georgia, "Times New Roman", serif;
  --font-mono:      "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  /* Radii — the marketing site rounds generously; small controls stay tighter
     so dense app UI doesn't turn into a bag of pills. */
  --r-sm:           10px;
  --r-md:           12px;
  --r-lg:           16px;
  --r-xl:           24px;
  --r-pill:         100px;

  /* Motion */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --dur:            0.18s;

  /* Semantic */
  --ok:             #0f8a6a;
  --ok-bg:          #e8f7f1;
  --ok-line:        #9fddc7;
  --warn:           #b57d10;
  --warn-bg:        #fdf3dc;
  --warn-line:      #f0d79a;
  --danger:         #c8472f;
  --danger-bg:      #fdf0ed;
  --danger-line:    #f0bfb4;
}

/* ── Layer 2: legacy bridge ───────────────────────────────────────────────────
   The app grew a second, colder palette (Tailwind-ish slate + a near-miss
   teal). Rather than hand-edit thousands of declarations, the old names are
   re-pointed at brand values here. Page CSS keeps working; it just renders
   on-brand. New work should use the Layer 1 names directly. */
:root {
  --accent:         var(--teal);
  --accent-hover:   var(--teal-dark);
  --accent-subtle:  rgba(42, 173, 181, 0.08);
  --accent-ring:    rgba(42, 173, 181, 0.28);

  --bg:             var(--paper);
  --bg-white:       var(--white);
  --surface:        var(--cream);
  --surface-raised: var(--white);

  --border:         var(--line);
  --border-light:   var(--line-light);
  --border-focus:   var(--teal);

  --text:           var(--ink);
  --text-muted:     var(--muted);
  --text-faint:     var(--faint);

  --sidebar-bg:     var(--ink-deep);
  --sidebar-border: rgba(255, 255, 255, 0.07);
  --sidebar-hover:  rgba(42, 173, 181, 0.14);
  --sidebar-text:   rgba(255, 255, 255, 0.58);
  --sidebar-text-hi: rgba(255, 255, 255, 0.95);
  --sidebar-active-accent: var(--teal);

  --user-bg:        var(--ink);
  --user-text:      #eef2f6;

  --font:           var(--font-body);

  --radius-sm:      var(--r-sm);
  --radius-md:      var(--r-md);
  --radius-lg:      var(--r-lg);
  --radius-xl:      var(--r-xl);
  --radius-full:    var(--r-pill);
  --radius:         var(--r-md);

  --success:        var(--ok);
  --success-bg:     var(--ok-bg);
  --success-border: var(--ok-line);
  --warning:        var(--warn);
  --warning-bg:     var(--warn-bg);
  --warning-border: var(--warn-line);
  --error:          var(--danger);
  --error-bg:       var(--danger-bg);
  --error-border:   var(--danger-line);

  --shadow:         var(--shadow-md);
  --ease-out:       var(--ease);
  --duration:       var(--dur);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings carry the display face — this is the loudest brand cue after
   colour, and the main reason the app previously read as generic. */
h1, h2, h3, h4, h5, h6,
.brand-display {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: clamp(1.65rem, 2.4vw, 2.1rem); }
h2 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); }
h3 { font-size: 1.125rem; letter-spacing: -0.015em; }
h4 { font-size: 1rem;     letter-spacing: -0.01em; font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--teal-tint); color: var(--ink); }

/* ── Eyebrow / section label ──────────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.eyebrow--muted { color: var(--muted); }
.on-ink .eyebrow, .eyebrow--ink { color: var(--teal); }

/* ── Page header ──────────────────────────────────────────────────────────── */
.page-head { margin-bottom: 28px; }
.page-head h1 { margin-bottom: 6px; }
.page-head p  { color: var(--muted); font-size: 0.95rem; max-width: 62ch; }

/* ── Buttons ──────────────────────────────────────────────────────────────────
   The pill is the brand's signature control shape. Everything actionable
   inherits it so the app and the site feel like one product. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--teal);
  color: var(--white);
  box-shadow: var(--shadow-teal);
}
.btn--primary:hover { background: var(--teal-dark); color: var(--white); }

.btn--ink       { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--ink-soft); color: var(--white); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(18, 35, 58, 0.03); }

.btn--light {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--white);
}
.btn--light:hover { background: rgba(255, 255, 255, 0.18); }

/* Borderless text action — "Back", "Skip", "Cancel". Carries the same type
   and rhythm as the other buttons without competing with the primary one. */
.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn--quiet:hover { background: var(--cream); color: var(--ink); }

/* Outlined teal — a secondary action that still reads as the accent. */
.btn--outline {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal-dark);
}
.btn--outline:hover { background: var(--teal-tint); border-color: var(--teal-dark); }

.btn--danger       { background: var(--danger); color: var(--white); }
.btn--danger:hover { background: #ab3a24; color: var(--white); }

/* Destructive secondary — outlined rather than filled, so a dangerous action
   is findable without shouting louder than the primary one beside it. */
.btn--danger-ghost {
  background: transparent;
  border-color: var(--danger-line);
  color: var(--danger);
}
.btn--danger-ghost:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn--sm  { padding: 9px 16px;  font-size: 0.82rem; }
.btn--xs  { padding: 7px 13px;  font-size: 0.76rem; }
.btn--lg  { padding: 16px 30px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--cream-deep);
  color: var(--muted);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal-line);
}
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--teal-tint);
  color: var(--teal-dark);
  margin-bottom: 16px;
}
.card__icon svg { width: 20px; height: 20px; }
.card h3 { margin-bottom: 8px; }
.card p  { color: var(--body); font-size: 0.94rem; line-height: 1.6; }

.card--ink {
  background: rgba(255, 255, 255, 0.043);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
}
.card--ink h3 { color: var(--white); }
.card--ink .card__icon { background: rgba(42, 173, 181, 0.16); color: #7fd6db; }

/* ── Pills / badges ───────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--muted);
}
.pill--teal   { background: var(--teal-tint); color: var(--teal-dark); }
.pill--ok     { background: var(--ok-bg);     color: var(--ok); }
.pill--warn   { background: var(--warn-bg);   color: var(--gold-ink); }
.pill--danger { background: var(--danger-bg); color: var(--danger); }
.pill--ink    { background: var(--ink); color: var(--white); }
.pill--sm { font-size: 0.66rem; padding: 3px 9px; letter-spacing: 0.06em; }

/* ── Communications triage tones ──────────────────────────────────────────────
   Priority, request type and production status are a shared vocabulary across
   the Communications screens. They were previously redefined in three separate
   templates, which is how "graphic" ended up purple-on-teal and "video" pink —
   neither of which exists in the brand. */
.pill.red     { background: var(--danger-bg);  color: var(--danger); }
.pill.yellow  { background: var(--warn-bg);    color: var(--gold-ink); }
.pill.green   { background: var(--ok-bg);      color: var(--ok); }
.pill.blue    { background: var(--steel-tint); color: var(--steel); }
.pill.pending { background: var(--cream);      color: var(--faint); }
.pill.tier    { background: var(--cream);      color: var(--body); }
.pill.graphic { background: var(--teal-tint);  color: var(--teal-dark); }
.pill.video   { background: var(--steel-tint); color: var(--steel); }
.pill.status-in_queue    { background: var(--cream);      color: var(--body); }
.pill.status-in_progress { background: var(--teal-tint);  color: var(--teal-dark); }
.pill.status-completed   { background: var(--ok-bg);      color: var(--ok); }
.pill.status-cancelled   { background: var(--cream);      color: var(--faint); }

.pill--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Stat tile ────────────────────────────────────────────────────────────── */
.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.stat__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}
.stat__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.stat__meta { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
/* Priority accents ride the left edge rather than as loose coloured dots. */
.stat--accent::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--teal);
}
.stat--urgent::before { background: var(--danger); }
.stat--high::before   { background: var(--gold); }
.stat--normal::before { background: var(--ok); }
.stat--low::before    { background: var(--faint); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], input[type="search"],
input[type="tel"], input[type="date"], select, textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.table th {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table td {
  padding: 14px;
  border-bottom: 1px solid var(--line-light);
  color: var(--body);
}
.table tbody tr { transition: background-color var(--dur) var(--ease); }
.table tbody tr:hover { background: var(--cream); }

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  background: var(--cream);
  color: var(--faint);
  margin-bottom: 16px;
}
.empty__icon svg { width: 24px; height: 24px; }
.empty h3 { font-size: 1rem; margin-bottom: 6px; color: var(--ink); }
.empty p  { font-size: 0.9rem; max-width: 42ch; margin: 0 auto; }

/* ── Icon sizing ──────────────────────────────────────────────────────────────
   Icons are inline SVG with currentColor so they inherit state (hover, active,
   disabled) for free. Replaces the emoji the app previously used as icons. */
.ico { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.75; }
.ico--sm { width: 14px; height: 14px; }
.ico--lg { width: 20px; height: 20px; }
.ico--xl { width: 24px; height: 24px; }

/* ── Brand mark ───────────────────────────────────────────────────────────── */
.brandmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Scrollbars ───────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .card--hover:hover { transform: none; }
}