/**
 * @file
 * VivaSport brand layer.
 *
 * Re-points Gin's OWN surface / text / border / accent tokens to the
 * design-system semantic values, per mode, so the admin reads as VivaSport in
 * BOTH light and dark — not standard Gin with an amber setting. Because all Gin
 * chrome AND the 41 SDC components consume `--gin-*`, this re-skins everything
 * from one file. Loaded LAST (see vivasport_editorial.libraries.yml) so it wins
 * Gin's defaults; accent pins use !important to beat Gin's runtime accent JS,
 * which otherwise lightens #FFAB00 to a pale pastel.
 *
 * Values mirror design-system/src/styles/tokens.css (semantic layer):
 *   light → [data-theme="light"]   dark → :root
 */

/* ── Light mode (default) — DS light surfaces ── */
:root {
  --gin-bg-app: #f7f7f8;               /* body / app bg        (DS surface-page)   */
  --gin-bg-layer: #ffffff;             /* cards / panels       (DS surface-card)   */
  --gin-bg-layer2: #f0f0f2;            /* raised / secondary   (DS surface-raised) */
  --gin-bg-item: rgba(255, 171, 0, .08);      /* hovered nav/menu item = accent wash */
  --gin-bg-item-hover: rgba(255, 171, 0, .14);
  --gin-color-text: #1a1a1a;           /* body text            (DS fg-default)     */
  --gin-color-title: #0a0a0a;          /* headings             (DS fg-emphasis)    */
  --gin-color-text-light: #666666;     /* muted/secondary text (DS fg-subtle)      */
  --gin-border-color: #e0e0e4;         /* borders              (DS border-default) */
  --gin-border-color-layer: #e0e0e4;
}

/* ── Dark mode — DS true brand blacks ── */
html.gin--dark-mode {
  --gin-bg-app: #0a0a0a;               /* body = deepest brand black (DS surface-ground) */
  --gin-bg-layer: #141414;             /* cards                (DS surface-card)   */
  --gin-bg-layer2: #222222;            /* raised               (DS surface-raised) */
  --gin-bg-item: rgba(255, 171, 0, .10);
  --gin-bg-item-hover: rgba(255, 171, 0, .16);
  --gin-color-text: #f0f0f0;           /* body text            (DS fg-default)     */
  --gin-color-title: #ffffff;          /* headings             (DS fg-emphasis)    */
  --gin-color-text-light: #9b9b9b;     /* muted                (DS fg-subtle)      */
  --gin-border-color: #2d2d2d;         /* borders              (DS border-default) */
  --gin-border-color-layer: #2d2d2d;
}

/* ── Accent — TRUE #FFAB00 in BOTH modes (override Gin's lightening) ──
 * Gin's accent JS recomputes --gin-color-primary-rgb at `body` scope (lightened
 * in dark), so body-inheriting elements pick up the pastel. Pin at :root AND
 * body, both modes, with !important so it wins everywhere. */
:root,
body,
html.gin--dark-mode,
html.gin--dark-mode body {
  --gin-color-primary-rgb: 255, 171, 0 !important;
  --gin-color-primary: #ffab00 !important;
  --gin-color-primary-hover: #ffc233 !important;        /* DS amber-400 */
  --gin-color-primary-active: #e69a00 !important;
  --gin-color-primary-light: rgba(255, 171, 0, .12) !important;
  --gin-color-primary-light-hover: rgba(255, 171, 0, .18) !important;
  --gin-color-primary-light-active: rgba(255, 171, 0, .26) !important;
  --gin-color-focus: rgba(255, 171, 0, .5) !important;
}

/* Text ON the amber accent must be dark ink, not white (DS fg-on-accent). */
.button--primary,
.button--primary:hover,
.button--primary:focus,
.button--primary:active,
.gin-sticky-form-actions .button--primary {
  color: #1a1a1a !important;
}

/* ── Accent restraint (rule: too much amber looks cheap) ──
 * Content/table links read as neutral ink, amber only on hover. Action buttons
 * (Edit/Filter, operations) keep their accent treatment. */
.views-field:not(.views-field-operations) a,
.region-content td a:not([class*="button"]):not(.dropbutton__item *) {
  color: var(--gin-color-text);
}
.views-field:not(.views-field-operations) a:hover,
.views-field:not(.views-field-operations) a:focus,
.region-content td a:not([class*="button"]):not(.dropbutton__item *):hover {
  color: var(--gin-color-primary);
}