/* ==========================================================================
   Saja Medflix — tebzone-dark.css
   The five values tebzone.css cannot infer from a dark palette.

   tebzone.css is deployed byte-identical to every partner site: it reads the
   host theme's tokens into its own --tz-* set and never names a partner
   directly. That mapping assumes dark text on a light card — reasonable,
   since that is what a course card is on every other partner.

   This site is dark. Most of the mapping still lands correctly, because
   theme.css defines --surface, --line and the --ink-* ramp with dark values
   under the same names. Three do not, and they are corrected here rather
   than by forking the shared stylesheet:

     --tz-heading   maps to --brand-900, which on this site is the near-black
                    the card is sitting on. A heading in it would be
                    invisible.
     --tz-brand-*   the soft/tint pair is used for hover fills and the
                    account menu; the light-site values are near-white.
     --tz-accent-*  the soft/tint pair is used behind form focus rings and
                    the signed-in panel, and has to be a dark green here.

   Loaded after tebzone.css on every page, so the cascade does the rest.
   ========================================================================== */

@layer components {
  :root {
    --tz-heading:      var(--ink-900);
    --tz-body:         var(--ink-600);
    --tz-muted:        var(--ink-500);
    --tz-faint:        var(--ink-400);

    --tz-brand-soft:   rgb(255 255 255 / 0.05);
    --tz-brand-tint:   rgb(0 166 81 / 0.16);
    --tz-brand-mid:    var(--accent-400);
    --tz-brand-deep:   var(--ink-900);

    --tz-accent:       var(--accent-500);
    --tz-accent-deep:  var(--accent-400);
    --tz-accent-soft:  rgb(0 166 81 / 0.1);
    --tz-accent-tint:  rgb(0 166 81 / 0.26);

    --tz-danger:       var(--danger);
    --tz-danger-soft:  var(--danger-soft);
    --tz-danger-line:  var(--danger-line);
  }

  /* The category pill on a card sits on the artwork, where a near-white
     chip would be the brightest thing in a dark grid. */
  .tz-card-cat {
    background: rgb(7 10 9 / 0.78);
    color: var(--ink-800);
    border: 1px solid rgb(255 255 255 / 0.14);
  }

  /* A card here is a poster: the artwork carries it, and the body sits in a
     darker well underneath rather than on white. */
  .tz-card { background: var(--brand-800); }
  .tz-card-body { background: linear-gradient(to bottom, var(--brand-800), var(--brand-900)); }
  .tz-card:hover { border-color: var(--accent-500); }

  /* The sign-in aside is the one place on the site where Saja green fills a
     whole panel — it is the moment the visitor is being asked for something,
     and it should feel like the brand rather than like more chrome. */
  .tz-panel { background: var(--brand-800); }
  .tz-panel-aside { background: linear-gradient(150deg in oklab, #06301c, #00844a); }
  .tz-tabs { background: rgb(255 255 255 / 0.05); }
  .tz-tab-marker { background: rgb(255 255 255 / 0.1); }
  .tz-control :is(input, select) { background: rgb(0 0 0 / 0.25); }
  .tz-control :is(input, select):disabled { background: rgb(0 0 0 / 0.15); }
  .tz-signed { background: rgb(0 166 81 / 0.08); border-color: rgb(0 166 81 / 0.28); }
  .tz-state { background: rgb(255 255 255 / 0.03); }
  .tz-state--error { background: var(--danger-soft); }
  .tz-account-chip { background: rgb(255 255 255 / 0.05); }
  .tz-account-menu { background: var(--brand-800); }
  .tz-grid--loading > span,
  .tz-panel-skeleton span {
    background: linear-gradient(100deg, var(--brand-800) 30%, var(--brand-700) 50%, var(--brand-800) 70%);
    background-size: 220% 100%;
  }
  .tz-panel-skeleton { background: var(--brand-800); }
  .tz-rich :is(th) { background: rgb(255 255 255 / 0.05); }
  .tz-rich-external a { background: rgb(0 166 81 / 0.14); color: var(--accent-200); }

  /* On the one light band, the module has to go back to being light. */
  .section--paper {
    --tz-surface: #ffffff;
    --tz-surface-soft: #f2f6f4;
    --tz-line: rgb(13 21 18 / 0.1);
    --tz-line-strong: rgb(13 21 18 / 0.18);
    --tz-heading: #0d1512;
    --tz-body: #3f4a45;
    --tz-muted: #5c6963;
    --tz-faint: #8a958f;
    --tz-n100: #eef3f0;
    --tz-n200: #dde5e1;
    --tz-n300: #b9c5bf;
    --tz-brand-soft: #f0f7f3;
    --tz-brand-tint: #dbeee4;
    --tz-brand-mid: var(--accent-700);
    --tz-accent-soft: #eef8f2;
    --tz-accent-tint: #cfeadc;
    --tz-danger: #c2453a;
    --tz-danger-soft: #fdf2f1;
    --tz-danger-line: #f3d5d1;
  }
  .section--paper .tz-card { background: #fff; }
  .section--paper .tz-card-body { background: #fff; }
  .section--paper .tz-card-cat { background: rgb(255 255 255 / 0.92); color: #0d1512; }
  .section--paper .tz-state { background: #f2f6f4; }
}