/* ============================================================================
   DELYV DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Why this file exists
   --------------------
   An audit of the CSS found 862 distinct hex colors, 104 box-shadows, 49 font
   sizes, 31 border-radii and 222 padding values across 22 stylesheets -- with
   only 23 tokens defined and 85% of color decisions bypassing them entirely.
   `.primary-button` was redefined 25 times and `.outline-button` 44 times. So
   there was no button component; there were 44 buttons sharing a class name.

   That is the real reason the app had to be made "beautiful" one screen at a
   time: nothing propagated. This file is the propagation layer.

   How it works
   ------------
   Loaded LAST, so it wins the cascade at equal specificity. It defines one
   token set and normalizes the primitives every screen already uses (buttons,
   panels, cards, inputs, nav, pills, rows, modals). Screens inherit the result
   without being individually rewritten -- and from here, restyling the entire
   app is an edit to the tokens below rather than another screen-by-screen pass.

   Deliberately NOT a visual reinvention: dimensions stay close to what was
   already there, because the goal is cohesion and clarity, not churn. What
   changes is that every value now comes from a scale instead of a guess.
   ========================================================================= */

:root {
  /* ---- Neutrals -------------------------------------------------------
     One cool-tinted ramp, replacing dozens of unrelated greys. The slight
     blue bias ties the neutrals to the brand so greys read as chosen
     rather than inherited. */
  --ds-n-0:   #ffffff;
  --ds-n-25:  #fcfcfe;
  --ds-n-50:  #f8f8fc;
  --ds-n-100: #f1f1f7;
  --ds-n-200: #e7e7f0;
  --ds-n-300: #d6d6e3;
  --ds-n-400: #abaabf;
  --ds-n-500: #7d7c93;
  --ds-n-600: #5e5d75;
  --ds-n-700: #444358;
  --ds-n-800: #2c2b3d;
  --ds-n-900: #17162a;

  /* ---- Brand ----------------------------------------------------------
     Built around the existing #6557e9 so the app stays recognisably DELYV. */
  --ds-brand-50:  #f3f1ff;
  --ds-brand-100: #e8e4ff;
  --ds-brand-200: #d0c9ff;
  --ds-brand-300: #ab9ff7;
  --ds-brand-400: #8b7cf0;
  --ds-brand-500: #6557e9;
  --ds-brand-600: #5546d4;
  --ds-brand-700: #4436a8;
  --ds-brand-800: #322876;

  /* ---- Semantic -------------------------------------------------------
     Status color is separate from brand color, so "purple" never has to
     mean both "our brand" and "this is fine". */
  --ds-success-50:  #e8f7f0;
  --ds-success-500: #19875f;
  --ds-success-700: #0f6547;
  --ds-warn-50:     #fff4e2;
  --ds-warn-500:    #b9741d;
  --ds-warn-700:    #8c5713;
  --ds-danger-50:   #fdedec;
  --ds-danger-500:  #c6453f;
  --ds-danger-700:  #9b302b;
  --ds-info-50:     #eaf2fe;
  --ds-info-500:    #3b6fc4;

  /* ---- Surfaces -------------------------------------------------------
     Three surface levels only: the page, things on the page, and things
     recessed into the page. */
  --ds-bg:              #fafafd;
  --ds-surface:         var(--ds-n-0);
  --ds-surface-sunken:  var(--ds-n-50);
  --ds-surface-hover:   var(--ds-n-50);
  --ds-border:          var(--ds-n-200);
  --ds-border-strong:   var(--ds-n-300);

  /* ---- Text ---------------------------------------------------------- */
  --ds-text:            var(--ds-n-900);
  --ds-text-secondary:  var(--ds-n-600);
  --ds-text-muted:      var(--ds-n-500);
  --ds-text-on-brand:   #ffffff;

  /* ---- Typography -----------------------------------------------------
     Every face gets a real fallback stack -- 58 rules previously said just
     `Manrope` with nothing behind it, which fails silently to Times if the
     webfont doesn't land. */
  --ds-font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* A 7-step scale replacing 49 ad-hoc sizes. */
  --ds-text-2xs: 10px;
  --ds-text-xs:  11px;
  --ds-text-sm:  12px;
  --ds-text-md:  13px;
  --ds-text-base:14px;
  --ds-text-lg:  17px;
  --ds-text-xl:  22px;
  --ds-text-2xl: 28px;
  --ds-text-3xl: 34px;

  --ds-leading-tight:  1.15;
  --ds-leading-snug:   1.35;
  --ds-leading-normal: 1.55;

  /* ---- Space ----------------------------------------------------------
     A 4px rhythm replacing 222 one-off padding values. */
  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 52px;

  /* ---- Radius ---------------------------------------------------------
     5 steps replacing 31. */
  --ds-radius-sm:   8px;
  --ds-radius-md:   11px;
  --ds-radius-lg:   14px;
  --ds-radius-xl:   18px;
  --ds-radius-full: 999px;

  /* ---- Elevation ------------------------------------------------------
     4 levels replacing 104. Elevation now means something: level 0 is at
     rest, level 3 genuinely floats above the page. Most cards sit at 0
     with a hairline border, which is what makes the surface feel calm. */
  --ds-shadow-0: none;
  --ds-shadow-1: 0 1px 2px rgba(23, 22, 42, .04), 0 1px 3px rgba(23, 22, 42, .05);
  --ds-shadow-2: 0 4px 10px rgba(23, 22, 42, .06), 0 2px 4px rgba(23, 22, 42, .04);
  --ds-shadow-3: 0 12px 28px rgba(23, 22, 42, .12), 0 4px 10px rgba(23, 22, 42, .07);
  --ds-shadow-brand: 0 6px 16px rgba(101, 87, 233, .22);

  /* ---- Focus ----------------------------------------------------------
     One focus treatment, applied everywhere, so keyboard users get a
     consistent and actually visible target. */
  --ds-focus-ring: 0 0 0 3px rgba(101, 87, 233, .28);

  /* ---- Motion ---------------------------------------------------------
     Fast and purposeful. Interface motion should confirm an action, not
     perform for the user. */
  --ds-dur-fast: 120ms;
  --ds-dur:      190ms;
  --ds-dur-slow: 300ms;
  --ds-ease:        cubic-bezier(.2, 0, 0, 1);
  --ds-ease-spring: cubic-bezier(.34, 1.26, .64, 1);

  /* ---- Bridge to the original tokens ----------------------------------
     The existing 23 tokens are used in ~296 places. Re-pointing them at the
     new ramp upgrades all of those at once instead of hunting them down. */
  --ink:          var(--ds-n-900);
  --muted:        var(--ds-text-muted);
  --line:         var(--ds-border);
  --soft:         var(--ds-surface-sunken);
  --white:        var(--ds-n-0);
  --purple:       var(--ds-brand-500);
  --purple-deep:  var(--ds-brand-700);
  --purple-soft:  var(--ds-brand-50);
  --green:        var(--ds-success-500);
  --green-soft:   var(--ds-success-50);
  --amber:        var(--ds-warn-500);
  --amber-soft:   var(--ds-warn-50);
  --shadow:       var(--ds-shadow-2);
}

/* ============================================================================
   BASE
   ========================================================================= */

body {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings share one display face and one tightening rule, so hierarchy
   reads consistently instead of each screen picking its own tracking. */
h1, h2, h3, h4 {
  font-family: var(--ds-font-display);
  color: var(--ds-text);
  line-height: var(--ds-leading-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* One focus treatment for every interactive element. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ds-brand-500);
  outline-offset: 2px;
  border-radius: var(--ds-radius-sm);
}

/* ============================================================================
   SURFACES -- panels, cards, sections
   Most resting surfaces lose their shadow and keep a hairline border. That
   single change is most of what makes the app read as modern rather than
   busy: shadow stops being decoration and starts meaning "this floats".
   ========================================================================= */

.panel,
.stat-card,
.detail-section {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-0);
}

.panel-heading h2 {
  font-size: var(--ds-text-lg);
  letter-spacing: -0.025em;
  margin: 0 0 var(--ds-space-1);
}
.panel-heading p {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-snug);
  margin: 0;
}

/* Section eyebrows: one typographic treatment for all 43 of them.
   Color is set at single-class specificity ONLY, and `.eyebrow.purple` is
   deliberately left alone. Eyebrows sit on both light panels and dark
   gradient cards, and the contexts that need light text say so with a
   two-class rule (`.agent-next-task .eyebrow{color:#c4bfff}`). A two-class
   rule here would tie with those and win on load order -- which is exactly
   what painted "DO THIS NEXT" dark purple onto the purple hero card. */
.detail-label,
.eyebrow {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.detail-label { color: var(--ds-brand-600); }

/* ============================================================================
   BUTTONS
   Three roles, one appearance. Previously .primary-button was defined 25 times
   and .outline-button 44 times, so identical-looking controls behaved
   differently depending on which screen you were on.

   Deliberately normalizes APPEARANCE ONLY -- color, radius, weight, motion,
   hover and focus -- and never geometry. Size is contextual: the app has
   dozens of intentionally compact buttons (`padding:6px 10px`, `font-size:9px`
   in banners, the work-timer strip, the task partner) and forcing a single
   height onto those would undo density work that was done on purpose.
   Single-class specificity for the same reason: any rule that deliberately
   scopes a button to a context still wins.
   ========================================================================= */

.primary-button,
.outline-button {
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-body);
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--ds-dur-fast) var(--ds-ease),
    border-color var(--ds-dur-fast) var(--ds-ease),
    color var(--ds-dur-fast) var(--ds-ease),
    box-shadow var(--ds-dur) var(--ds-ease),
    transform var(--ds-dur-fast) var(--ds-ease);
}

/* Primary: the one action that matters most on a screen. */
.primary-button {
  background: var(--ds-brand-500);
  color: var(--ds-text-on-brand);
  border: 1px solid transparent;
  box-shadow: var(--ds-shadow-brand);
}
.primary-button:hover:not(:disabled) {
  background: var(--ds-brand-600);
  transform: translateY(-1px);
}
.primary-button:active:not(:disabled) {
  transform: translateY(0) scale(.985);
  box-shadow: var(--ds-shadow-1);
}
.primary-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Secondary: everything else that is still a real action. */
.outline-button {
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
  border: 1px solid var(--ds-border-strong);
  box-shadow: var(--ds-shadow-0);
}
.outline-button:hover:not(:disabled) {
  background: var(--ds-surface-hover);
  border-color: var(--ds-brand-300);
  color: var(--ds-brand-700);
}
.outline-button:active:not(:disabled) { transform: scale(.985); }
.outline-button:disabled { opacity: .55; cursor: not-allowed; }

/* Tertiary: inline, low-commitment navigation. */
.text-button {
  color: var(--ds-brand-600);
  font-family: var(--ds-font-body);
  font-weight: 700;
  cursor: pointer;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
.text-button:hover { color: var(--ds-brand-700); }

/* Destructive actions read as destructive regardless of screen. */
.danger-button {
  background: var(--ds-danger-500);
  color: var(--ds-n-0);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  font-weight: 700;
}
.danger-button:hover:not(:disabled) { background: var(--ds-danger-700); }

/* ============================================================================
   FORM CONTROLS
   ========================================================================= */

input[type="text"], input[type="email"], input[type="url"], input[type="date"],
input[type="search"], input[type="number"], input[type="tel"], input:not([type]),
select, textarea {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-sm);
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm);
  padding: var(--ds-space-2) var(--ds-space-3);
  transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ds-brand-500);
  box-shadow: var(--ds-focus-ring);
  outline: none;
}
::placeholder { color: var(--ds-n-400); }

label { color: var(--ds-text-secondary); font-size: var(--ds-text-xs); font-weight: 700; }

/* ============================================================================
   NAVIGATION
   ========================================================================= */

.sidebar { background: var(--ds-surface); border-right: 1px solid var(--ds-border); }

.nav-item {
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-secondary);
  font-size: var(--ds-text-md);
  font-weight: 600;
  transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease);
}
.nav-item:hover { background: var(--ds-surface-hover); color: var(--ds-text); }

/* The active item is marked by a brand-tinted surface, not a heavy fill --
   it should be findable at a glance without shouting over the content. */
.nav-item.active {
  background: var(--ds-brand-50);
  color: var(--ds-brand-700);
  font-weight: 700;
}
.nav-item.active .nav-icon { color: var(--ds-brand-600); }

.topbar { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.breadcrumb { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
.breadcrumb strong { color: var(--ds-text); }

/* ============================================================================
   PILLS, BADGES, CHIPS
   Status color carries meaning, so it comes from the semantic ramp -- never
   from the brand ramp.
   ========================================================================= */

.status-pill,
.due-pill,
.priority-pill,
.capacity-fit-pill,
.queue-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  border-radius: var(--ds-radius-full);
  padding: var(--ds-space-1) var(--ds-space-2);
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.progress-pill { background: var(--ds-brand-50); color: var(--ds-brand-700); }
.review-pill    { background: var(--ds-warn-50);  color: var(--ds-warn-700); }
.complete-pill{ background: var(--ds-success-50); color: var(--ds-success-700); }
.waiting-pill  { background: var(--ds-info-50); color: var(--ds-info-500); }
.queue-status  { background: var(--ds-success-50); color: var(--ds-success-700); }
.capacity-fit-fits { background: var(--ds-success-50); color: var(--ds-success-700); }
.capacity-fit-tight { background: var(--ds-warn-50); color: var(--ds-warn-700); }

/* ============================================================================
   LIST ROWS
   The densest, most-used surface in the app. Rows get a hover affordance so
   it is obvious they are clickable, and a hairline that matches everything
   else.
   ========================================================================= */

.request-row,
.workbench-task-row,
.admin-request {
  border-color: var(--ds-border);
  transition: background var(--ds-dur-fast) var(--ds-ease);
}
.request-row:hover { background: var(--ds-surface-hover); }

/* ============================================================================
   MODALS & OVERLAYS
   ========================================================================= */

.modal {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-xl);
  box-shadow: var(--ds-shadow-3);
}
.modal-backdrop { background: rgba(23, 22, 42, .45); backdrop-filter: blur(6px); }

/* ============================================================================
   EMPTY STATES
   ========================================================================= */

.empty-state {
  color: var(--ds-text-muted);
  font-size: var(--ds-text-sm);
  line-height: var(--ds-leading-normal);
}

/* ============================================================================
   MOTION
   One shared entrance, and a global opt-out that actually covers the whole
   app rather than being remembered per-feature.
   ========================================================================= */

@keyframes ds-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

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