/* ===========================================================================
   Dark theme — PORTAL-AUTHORED, not part of the design system mirror.
   ---------------------------------------------------------------------------
   The Tasnef Design System ships no dark tokens: the live site has a sun/moon
   switch but no dark stylesheet was ever found, and ThemeToggle is documented
   as "visual only". These values are therefore derived here, from the brand's
   own purple ramp, and deliberately live OUTSIDE /css/tokens/ so that
   re-syncing the design project can never clobber or conflict with them.

   Method: only the SEMANTIC aliases are redefined. The raw ramps
   (--purple-600, --grey-300 …) keep their published values, so nothing that
   references a literal brand colour drifts.

   Applies when the document carries data-theme="dark" (set by /js/theme.js
   before first paint, from the user's stored choice or their OS setting).
   =========================================================================== */

[data-theme='dark'] {
  /* Surfaces — near-black with a purple cast, so the brand still reads */
  --surface-page:        #120d18;
  --surface-section:     #17111f;
  --surface-card:        #1e1728;
  --surface-chip:        #2a2136;
  --surface-field:       #1e1728;
  --surface-field-soft:  #241c30;
  --surface-table-head:  #241c30;
  --surface-stepper:     #2a2136;
  --surface-remove:      #2a2136;

  /* Brand — lifted off 600, which is too dark to carry a dark surface */
  --brand-primary:        var(--purple-300);
  --brand-primary-strong: var(--purple-200);
  --brand-primary-soft:   rgba(138, 108, 186, .16);
  --brand-accent:         var(--purple-200);
  --surface-brand:        #1b1326;
  --surface-brand-deep:   #241a33;

  /* Text */
  --text-heading:  #f3f0f7;
  --text-body:     #e6e1ee;
  --text-muted:    #a79db6;
  --text-subtle:   #8d839c;
  --text-legal:    #7d7489;
  --text-on-brand: #ffffff;
  --text-link:       var(--purple-200);
  --text-link-hover: #e2d8f0;
  --text-table:    #ded8e8;
  --text-summary:  #a79db6;
  --text-crumb:    #8d839c;

  /* Borders — light at low alpha reads better than a fixed grey on dark */
  --border-hairline: rgba(255, 255, 255, .09);
  --border-divider:  rgba(255, 255, 255, .13);
  --border-field:    rgba(255, 255, 255, .18);
  --border-brand:    var(--purple-300);
  --border-rule:     rgba(255, 255, 255, .11);
  --border-table:    rgba(255, 255, 255, .09);

  /* States — softened so they sit on dark without glowing */
  --state-success:      #5cc79e;
  --state-success-soft: rgba(92, 199, 158, .14);
  --state-warning:      #e0a94a;
  --state-warning-soft: rgba(224, 169, 74, .14);
  --state-danger:       #e5736a;
  --state-danger-soft:  rgba(229, 115, 106, .14);
  --state-info:         var(--purple-200);
  --state-info-soft:    rgba(205, 191, 224, .14);

  /* Alert borders (defined in app.css for light) */
  --alert-danger-border:  rgba(229, 115, 106, .34);
  --alert-success-border: rgba(92, 199, 158, .34);
  --alert-warning-border: rgba(224, 169, 74, .34);
  --alert-info-border:    rgba(205, 191, 224, .3);

  /* Portal tokens from app.css. Without these, the design's light badge fills
     (#E7F1ED, #FDF6DC, #F4F4F4) would sit on dark cards and glare. */
  --success-ink: #5cc79e;
  --success-bg:  rgba(92, 199, 158, .14);
  --warning-ink: #e0a94a;
  --warning-bg:  rgba(224, 169, 74, .14);
  --warning-dot: #e0a94a;
  --neutral-ink: #a79db6;
  --neutral-bg:  rgba(255, 255, 255, .07);
  --brand-soft-bg: rgba(138, 108, 186, .18);
  --row-line:    rgba(255, 255, 255, .07);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);

  --focus-ring:    var(--purple-300);
  --overlay-scrim: rgba(6, 3, 10, .72);

  /* Shadows need more weight to register on dark surfaces */
  --shadow-tile:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow-list:  0 8px 16px rgba(0, 0, 0, .35);
  --shadow-float: 0 12px 28px rgba(0, 0, 0, .45);
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, .6);

  color-scheme: dark;
}

/* Components that hardcode white for contrast on the purple field need to
   follow the dark surface instead. */
[data-theme='dark'] .nav__link.is-active {
  background: var(--brand-primary-soft);
  color: var(--purple-100);
}
[data-theme='dark'] .btn--primary:hover:not(:disabled),
[data-theme='dark'] .btn--deep:hover:not(:disabled),
[data-theme='dark'] .btn--danger:hover:not(:disabled) {
  background: transparent;
}
[data-theme='dark'] .btn--light {
  background: var(--surface-chip);
  border-color: var(--surface-chip);
  color: var(--text-heading);
}
[data-theme='dark'] .btn--light:hover:not(:disabled) {
  background: transparent;
  color: var(--text-heading);
  border-color: var(--border-field);
}
[data-theme='dark'] .btn:disabled,
[data-theme='dark'] .btn.is-loading {
  background: var(--surface-chip);
  border-color: var(--surface-chip);
  color: var(--text-subtle);
}
[data-theme='dark'] .skeleton {
  background: linear-gradient(90deg, #241c30 25%, #2d2439 37%, #241c30 63%);
  background-size: 400% 100%;
}
/* The select chevron is a baked-in SVG colour */
[data-theme='dark'] .field__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%23a79db6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[data-theme='dark'] .switch__track { background: var(--surface-chip); }
[data-theme='dark'] .chip__remove:hover { background: var(--border-divider); }

/* The toggle's active pill is a hardcoded light lilac in app.css */
[data-theme='dark'] .theme-toggle__btn.is-active { background: var(--brand-soft-bg); }
[data-theme='dark'] .theme-toggle__btn img { filter: invert(1) brightness(1.6); }

/* Scrollbar thumb is a black alpha in app.css; invert it on dark surfaces */
[data-theme='dark'] ::-webkit-scrollbar-thumb { background: #ffffff26; }

/* The sidebar keeps the brand purple field, so its active item stays a light
   pill rather than following the dark surface tokens. */
[data-theme='dark'] .nav__link.is-active {
  background: rgba(255, 255, 255, .92);
  color: var(--purple-700);
}