/* ===========================================================================
   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:        #0d1815;
  --surface-section:     #111f1b;
  --surface-card:        #172823;
  --surface-chip:        #213630;
  --surface-field:       #172823;
  --surface-field-soft:  #1c302a;
  --surface-table-head:  #1c302a;
  --surface-stepper:     #213630;
  --surface-remove:      #213630;

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

  /* Text */
  --text-heading:  #f0f7f5;
  --text-body:     #e1eeea;
  --text-muted:    #9db6af;
  --text-subtle:   #839c95;
  --text-legal:    #748983;
  --text-on-brand: #ffffff;
  --text-link:       var(--brand-200);
  --text-link-hover: #d8f0e9;
  --text-table:    #d8e8e3;
  --text-summary:  #9db6af;
  --text-crumb:    #839c95;

  /* 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(--brand-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);
  /* Lifted from #e5736a: that measured 4.24:1 as badge text on a dark card,
     just under AA. The fill and border uses are unaffected at this value. */
  --state-danger:       #f0958e;
  --state-danger-soft:  rgba(229, 115, 106, .14);
  --state-info:         var(--brand-200);
  --state-info-soft:    rgba(191, 224, 215, .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(191, 224, 215, .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);
  /* 7.86:1 on the tinted badge, against 3.08:1 for the fill-weight green. */
  --brand-ink:   var(--brand-200);
  --warning-ink: #e0a94a;
  --warning-bg:  rgba(224, 169, 74, .14);
  --warning-dot: #e0a94a;
  --neutral-ink: #9db6af;
  --neutral-bg:  rgba(255, 255, 255, .07);
  --brand-soft-bg: rgba(108, 186, 164, .18);
  --row-line:    rgba(255, 255, 255, .07);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .35);

  --focus-ring:    var(--brand-300);
  --overlay-scrim: rgba(3, 10, 8, .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(--brand-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, #1c302a 25%, #243933 37%, #1c302a 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 */
/* The live site keeps the SELECTED half white in dark mode too —
   `.thame-dark .mode .dark { background-color: #fff }`. */
[data-theme='dark'] .theme-toggle__btn.is-active { background: var(--white); }
[data-theme='dark'] .theme-toggle__btn.is-active img,
[data-theme='dark'] .theme-toggle__btn.is-active svg { filter: none; opacity: 1; }
[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(--brand-700);
}