/**
 * @file
 * VivaSport Editorial — design tokens.
 *
 * Canonical mapping from the brainstorm mockups' convert-to-gin.py: the legacy
 * Claro vocabulary (--color-*, --space-*, --font-size-*, per-card tokens) the 41
 * SDC components were built against, mapped to Gin's structural tokens. Surfaces
 * reference Gin tokens so dark/light mode keeps working; the amber accent is
 * Gin's --gin-color-primary (gin.settings = #FFAB00).
 *
 * Source of truth:
 *   backend/docs/superpowers/brainstorm/38802-1776913110/content/gin/convert-to-gin.py
 */

:root {
  /* ── Custom brand semantic tokens Gin does not provide ── */
  --gin-switch: #26a769;              /* VivaStat / coverage green */
  --gin-color-danger: #cc3d3d;        /* brand red (matches mockups) */
  --gin-color-danger-light: #fdd9d9;
  --gin-status-text: #626262;
  --gin-status-bg: #eee;
  --gin-status-success-text: #1d6844;
  --gin-status-success-bg: rgba(38, 167, 105, .19);
  --gin-status-warning-text: #826b1f;
  --gin-status-warning-bg: rgba(226, 151, 0, .15);
  --gin-status-danger-text: #cc3d3d;
  --gin-status-danger-bg: rgba(222, 117, 96, .15);

  /* ── Claro-compat aliases (verbatim from convert-to-gin.py) ── */
  --color-white: #fff;
  --color-text: var(--gin-color-text);
  --color-gray-025: var(--gin-bg-app);
  --color-gray-050: var(--gin-bg-layer2);
  --color-gray-100: var(--gin-border-color);
  --color-gray-200: var(--gin-border-color);
  --color-gray-300: var(--gin-border-color);
  --color-gray-500: #8e929c;
  --color-gray-600: var(--gin-color-text-light);
  --color-gray-700: var(--gin-color-text-light);
  --color-gray-800: var(--gin-color-text);
  --color-gray-900: var(--gin-color-text);
  --color-absolutezero: var(--gin-color-primary);
  --color-absolutezero-hover: var(--gin-color-primary-hover);
  --color-absolutezero-active: var(--gin-color-primary-active);
  --color-maximumred: var(--gin-color-danger);
  --color-lightninggreen: var(--gin-switch);
  --color-sunglow-shaded: var(--gin-status-warning-text);
  --color-blue-020: var(--gin-color-primary-light);
  --color-blue-050: var(--gin-color-primary-light-active);
  --color-red-050: var(--gin-color-danger-light);
  --color-bgblue-hover: var(--gin-bg-item);
  --color-bgblue-active: var(--gin-bg-item-hover);
  /* chip backgrounds (were hardcoded #F3F4F9 / #FDF5F5) */
  --color-chip-neutral: var(--gin-status-bg);
  --color-chip-danger: var(--gin-status-danger-bg);

  /* ── Type ── */
  --font-family: var(--gin-font);
  --font-size-h1: var(--gin-font-size-h1);
  --font-size-h4: var(--gin-font-size-xl);
  --font-size-h6: var(--gin-font-size-l);
  --font-size-s: var(--gin-font-size-s);
  --font-size-xs: var(--gin-font-size-xs);
  --font-size-xxs: var(--gin-font-size-xxs);
  --line-height: 1.5;
  --line-height-heading: 1.3;

  /* ── Spacing ── */
  --space-xl: var(--gin-spacing-xxl);
  --space-l: var(--gin-spacing-l);
  --space-m: var(--gin-spacing-m);
  --space-s: var(--gin-spacing-s);
  --space-xs: var(--gin-spacing-xs);

  /* ── Card / details / per-component surface tokens (→ Gin layers) ── */
  --card-bg-color: var(--gin-bg-layer);
  --card-border-color: var(--gin-border-color-layer);
  --card-border-radius-size: var(--gin-border-l);
  --card-box-shadow: var(--gin-shadow-l1);

  --details-bg: var(--gin-bg-layer);
  --details-border-color: var(--gin-border-color-layer);
  --details-border-size-radius: var(--gin-border-m);
  --details-box-shadow: var(--gin-shadow-l1);

  --side-details-bg: var(--gin-bg-layer);
  --side-details-header-bg: var(--gin-bg-layer2);
  --side-details-border: var(--gin-border-color-layer);
  --side-details-shadow: var(--gin-shadow-l1);

  --summary-card-bg: var(--gin-bg-layer);
  --summary-card-border: var(--gin-border-color-layer);
  --summary-card-radius: var(--gin-border-l);
  --summary-card-shadow: var(--gin-shadow-l1);

  --stat-card-bg: var(--gin-bg-layer);
  --stat-card-border: var(--gin-border-color-layer);
  --stat-card-radius: var(--gin-border-l);
  --stat-card-shadow: var(--gin-shadow-l1);

  --venue-card-bg: var(--gin-bg-layer);
  --venue-card-border: var(--gin-border-color-layer);
  --venue-card-shadow: var(--gin-shadow-l1);

  --group-card-bg: var(--gin-bg-layer);
  --group-card-border: var(--gin-border-color-layer);
  --group-card-shadow: var(--gin-shadow-l1);

  --gauge-bg: var(--gin-bg-layer);
  --gauge-border: var(--gin-border-color-layer);
  --gauge-track-bg: var(--gin-bg-layer2);
  --gauge-shadow: var(--gin-shadow-l1);

  --progress-track-bg-color: var(--gin-bg-layer2);
  --progress-track-border-color: var(--gin-border-color-layer);
  --progress-bar-small-size-radius: 999px;
  --progress-bar-border-size: 0;
}