/* ============================================================
   shared/tokens.css — ShaRPE Design Token Sistemi v2
   Tek kaynak: rpe775 bu dosyayı link eder.

   Kullanım:
     <link rel="stylesheet" href="/shared/tokens.css">
     (kendi component CSS'inden önce)

   SW stratejisi: network-first (APP_SHELL'e ekleme)
   ============================================================ */

/* ── Outfit — Body font (tüm uygulamalarda ortak) ── */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/outfit-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/outfit-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Exo 2 — Logo fontu (rpe775) ── */
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('/fonts/exo-2-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('/fonts/exo-2-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 900;
  font-display: block;
  src: url('/fonts/exo-2-latin-ext-900-italic.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Exo 2';
  font-style: italic;
  font-weight: 900;
  font-display: block;
  src: url('/fonts/exo-2-latin-900-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Oswald — Başlık fontu (accent renkli sayfa/kart başlıkları: .section-title, .stats-card-title) ──
   Google Fonts, OFL lisanslı. Outfit'e göre dar/sıkı gövdeli, uppercase+letter-spacing'de daha az "gevşek" durur.
   Sadece 500 (Medium) ve 700 (Bold) ağırlıkları self-host edildi — mevcut kullanımların ihtiyacı bu ikisi. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/oswald-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/oswald-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/oswald-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/oswald-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════
   LOGO TOKEN PAKETİ — marka amblemi, genel tipografi
   skalasından bilinçli olarak izole. Kullanıcılar:
   .logo / .login-logo / .about-logo / .sidebar__logo-text
   (bkz. shared/logo.css). Exo 2 başka hiçbir yerde
   kullanılmaz. --logo-red, dark/light temadan bağımsız
   sabit "Türk kırmızısı" — --accent'a KASITLI OLARAK
   bağlanmamıştır (--accent temaya göre değişir, logo
   değişmez).
══════════════════════════════════════════════════════ */
:root {
  --font-logo:    'Exo 2', sans-serif;
  --logo-size-sm: 28px;  /* header .logo */
  --logo-size-md: 42px;  /* .about-logo */
  --logo-size-lg: 52px;  /* .login-logo */
  --logo-red:      #C8102E;               /* RPE amblem rengi, tema-bağımsız sabit */
  --logo-red-glow: rgba(200, 16, 46, 0.4); /* RPE amblem text-shadow rengi */
}

/* ══════════════════════════════════════════════════════
   DARK THEME (varsayılan)
══════════════════════════════════════════════════════ */
:root {
  /* ── Arka planlar ── */
  --bg:       #111115;
  --surface:  #1c1c21;
  --surface2: #222228;
  --surface3: #29292f;

  /* ── Kenarlıklar ── */
  --border:  #2a2a32;
  --border2: #222228;
  --border3: #323240;

  /* ── Metinler ── */
  --text:   #f5f5f7;
  --sub:    #d8d8e0;
  --muted:  #8a8a9a;
  --muted2: #888899;

  /* ── Accent — ShaRPE kırmızı ── */
  --accent:         #e13122;
  --accent-rgb:     225, 49, 34;
  --accent2:        #a31523;
  --accent-dim:     rgba(225, 49, 34, 0.12);
  --accent-border:  rgba(225, 49, 34, 0.35);

  /* ── Gradyanlar ── */
  --gradient-accent:    linear-gradient(155deg, #e13122 0%, #c01020 100%);
  --gradient-accent-2:  linear-gradient(155deg, #ec3b2b 0%, #c51a22 100%);
  --gradient-confirm:   linear-gradient(155deg, #2daf74 0%, #1c8055 100%);
  --gradient-surface:   linear-gradient(180deg, var(--surface2) 0%, var(--surface) 100%);

  /* ── Glow efektleri ── */
  --glow-accent:  0 0 0 3px rgba(225, 49, 34, 0.18);
  --glow-green:   0 0 0 3px rgba(61, 186, 122, 0.18);
  --glow-blue:    0 0 0 3px rgba(91, 143, 212, 0.18);
  --glow-red:     0 0 0 3px rgba(221, 92, 75, 0.18);

  /* ── Durum renkleri ── */
  --color-green:          #3dba7a;
  --color-green-rgb:      61, 186, 122;
  --color-green-dim:      rgba(61, 186, 122, 0.12);
  --color-green-border:   rgba(61, 186, 122, 0.30);
  --color-red:            #d9803a;
  --color-red-rgb:        221, 92, 75;
  --color-red-dim:        rgba(221, 92, 75, 0.12);
  --color-red-border:     rgba(221, 92, 75, 0.30);
  --color-blue:           #5b8fd4;
  --color-blue-rgb:       91, 143, 212;
  --color-blue-dim:       rgba(91, 143, 212, 0.12);
  --color-blue-border:    rgba(91, 143, 212, 0.30);
  --color-purple:         #9476c6;
  --color-purple-rgb:     148, 118, 198;
  --color-purple-dim:     rgba(148, 118, 198, 0.12);
  --color-purple-border:  rgba(148, 118, 198, 0.30);
  --color-yellow:         #d4942a;
  --color-yellow-rgb:     212, 148, 42;
  --color-yellow-dim:     rgba(212, 148, 42, 0.12);
  --color-yellow-border:  rgba(212, 148, 42, 0.30);
  --color-orange:         #d46a2a;
  --color-orange-dim:     rgba(212, 106, 42, 0.12);
  --color-orange-border:  rgba(212, 106, 42, 0.30);

  /* ── Protokol renkleri ── */
  --color-lean-cut:  var(--color-red);
  --color-recomp:    #d4942a;
  --color-lean-bulk: #3dba7a;
  --color-maintain:  #5b8fd4;

  /* ── Gölgeler ── */
  --shadow-sm:   0 0 0 1px rgba(255,255,255,0.05), 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md:   0 0 0 1px rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg:   0 0 0 1px rgba(255,255,255,0.05), 0 8px 24px rgba(0,0,0,0.55);
  --shadow-xl:   0 0 0 1px rgba(255,255,255,0.05), 0 16px 48px rgba(0,0,0,0.65);
  --card-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.35);
  --btn-shadow:  inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 6px rgba(0,0,0,0.35);
  --btn-shadow-accent: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(225,49,34,0.38);
  --btn-shadow-confirm: inset 0 1px 0 rgba(255,255,255,0.08), 0 3px 10px rgba(45,175,116,0.32);

  /* ── Buton tokenleri ── */
  --btn-h:     44px;
  --btn-h-sm:  36px;
  --btn-h-lg:  52px;

  /* ── Input tokenleri ── */
  --input-h:    44px;
  --input-h-sm: 36px;

  /* ── Tipografi ── */
  --font-ui:      'Outfit', system-ui, sans-serif;
  --font-heading: 'Oswald', 'Outfit', system-ui, sans-serif;  /* accent renkli sayfa/kart başlıkları */
  --font-display: var(--font-ui);  /* PR/stat/trend rakamları (rpe775 metrics.js, stats.js) */
  --font-numeric: 'Exo 2', var(--font-ui);  /* sadece büyük hero rakamları: .stats-value, .pr-value, .pr-trend-kg — yalnızca 900 ağırlıkta yüklü, font-weight'ten bağımsız hep kalın basar */

  /* Rol bazlı skala — "hangi boyut" yerine "hangi rol" diye düşün.
     Aynı roldeki metinler HER YERDE aynı tokeni kullanır. */
  --text-caption:  11px;  /* meta bilgi, etiket, badge, uppercase mini başlık */
  --text-body:     14px;  /* açıklama, gövde metni, form input */
  --text-subtitle: 15px;  /* ikincil vurgulu metin, alt başlık */
  --text-title:    17px;  /* kart/section/modal başlığı, ana buton */
  --text-stat:     22px;  /* öne çıkan büyük istatistik/PR rakamı */

  /* Eski adlar geriye dönük uyumluluk için korunuyor (sharpe-ui.css / index.html
     hâlâ bunları kullanıyor). Yeni kod --text-caption/body/subtitle/title/stat kullanmalı. */
  --text-xs:   var(--text-caption);
  --text-sm:   var(--text-body);
  --text-base: var(--text-subtitle);
  --text-md:   16px;
  --text-lg:   var(--text-title);
  --text-xl:   19px;
  --text-2xl:  21px;
  --text-3xl:  25px;

  /* Display sayı ölçeği — text-stat'tan daha büyük, nadiren kullanılan uçlar. */
  --text-display-xs: var(--text-xl);  /* 19px — PR/trend kg rakamı, text-title ile text-stat arası */
  --text-display-sm: var(--text-stat);
  --text-display-md: 26px;  /* destek paket fiyatı */
  --text-display-lg: 36px;  /* büyük istatistik rakamı */

  /* İkon/emoji ölçeği — glyph olarak kullanılan font-size değerleri
     (tipografi skalasından ayrı; okunabilir metin değil, görsel simge). */
  --icon-sm: 24px;
  --icon-md: 28px;
  --icon-lg: 36px;
  --icon-xl: 52px;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line-height skalası — sadece uygulama genelinde 2+ yerde tekrar eden
     değerler tokenize edildi. Tek seferlik/bağlama özel değerler (ör. 1.1,
     1.45, 1.7) kasıtlı olarak hardcoded kaldı. */
  --lh-tight:  1;     /* glyph/ikon, tek satır rakam, crop edilmiş kutular */
  --lh-snug:   1.3;   /* başlıklar, kısa vurgulu metin */
  --lh-normal: 1.4;   /* orta yoğunlukta gövde metni */
  --lh-loose:  1.5;   /* rahat gövde metni, form notu */
  --lh-relaxed:1.55;  /* uzun açıklama paragrafı */
  --lh-open:   1.6;   /* en ferah gövde metni, textarea, guide içerik */
  --lh-airy:   1.65;  /* SSS/rehber uzun paragraf */
  --lh-extra:  1.7;   /* destek/geri bildirim modalı uzun metin */
  --lh-loosest:1.8;   /* import/export özet listesi, çok satırlı liste */
  --lh-spacious:1.9;  /* muscle-balance modal madde listesi (index.html) */
  --lh-double: 2;     /* muscle-balance modal severity listesi (index.html) */
  --lh-compact:1.2;   /* cardio blok birim etiketi (cardio.js) */

  /* Letter-spacing skalası — aynı kural: sadece tekrar eden değerler. */
  --ls-hairline:-.2px; /* set-input rakam hizası, negatif sıkıştırma (exercises.js) */
  --ls-tight:  0.01em; /* buton metni, hafif nefes */
  --ls-fine:   .02em;  /* feedback modal etiket metni (index.html) */
  --ls-snug:   .2px;   /* gövde/etiket metni */
  --ls-normal: .3px;   /* etiket, ikincil vurgulu metin */
  --ls-mild:   .4px;   /* JS render edilen kart başlığı/etiketi */
  --ls-wide:   .5px;   /* buton/etiket, orta vurgulu */
  --ls-warm:   .6px;   /* JS render edilen istatistik/metrik etiketi */
  --ls-wider:  .8px;   /* uppercase mini başlık */
  --ls-widest: 1px;    /* uppercase etiket/section başlığı */
  --ls-loose:  1.5px;  /* büyük başlık, display metin */
  --ls-broad:  1.6px;  /* JS render edilen büyük istatistik rakamı */
  --ls-loosest:2px;    /* çok büyük display/hero metin */
  --ls-caps-sm:0.06em;  /* uppercase caption, section-title--accent */
  --ls-caps-md:0.07em;  /* uppercase divider */
  --ls-caps-lg:0.08em;  /* uppercase section-title, guide-kv key */

  /* ── Spacing ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── Border Radius ── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 999px;

  /* ── Geçişler & Easing ── */
  --transition:       all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel:       cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    2000;

  /* ─────────────────────────────────────────────────────
     --c-* BRIDGE ALIASES — sharpe-ui.css + coach CSS uyumu
     Zamanla coach CSS'i --c-* yerine canonical --* kullanacak.
     ───────────────────────────────────────────────────── */
  --c-bg:              var(--bg);
  --c-card:            var(--surface);
  --c-elev:            var(--surface2);
  --c-elev2:           var(--surface3);
  --c-side:            var(--surface);
  --c-border:          var(--border);
  --c-border2:         var(--border2);
  --c-text:            var(--text);
  --c-sub:             var(--sub);
  --c-muted:           var(--muted);
  --c-muted2:          var(--muted2);
  --c-btn-primary-text: #ffffff;
  --c-accent:          var(--accent);
  --c-accent-rgb:      var(--accent-rgb);
  --c-accent2:         var(--accent2);
  --c-accent-dim:      var(--accent-dim);
  --c-accent-border:   var(--accent-border);
  --c-green:           var(--color-green);
  --c-green-rgb:       var(--color-green-rgb);
  --c-green-dim:       var(--color-green-dim);
  --c-green-border:    var(--color-green-border);
  --c-success:         var(--color-green);
  --c-danger:          var(--color-red);
  --c-delete-active:   #c05830;
  --c-red:             var(--color-red);
  --c-red-rgb:         var(--color-red-rgb);
  --c-red-dim:         var(--color-red-dim);
  --c-red-border:      var(--color-red-border);
  --c-blue:            var(--color-blue);
  --c-blue-rgb:        var(--color-blue-rgb);
  --c-blue-dim:        var(--color-blue-dim);
  --c-blue-border:     var(--color-blue-border);
  --c-purple:          var(--color-purple);
  --c-purple-rgb:      var(--color-purple-rgb);
  --c-purple-dim:      var(--color-purple-dim);
  --c-purple-border:   var(--color-purple-border);
  --c-yellow:          var(--color-yellow);
  --c-yellow-rgb:      var(--color-yellow-rgb);
  --c-yellow-dim:      var(--color-yellow-dim);
  --c-yellow-border:   var(--color-yellow-border);
  --c-orange:          var(--color-orange);
  --c-orange-dim:      var(--color-orange-dim);
  --c-lean-cut:        var(--color-lean-cut);
  --c-recomp:          var(--color-recomp);
  --c-lean-bulk:       var(--color-lean-bulk);
  --c-maintain:        var(--color-maintain);
  /* sharpe-ui.css font aliases */
  --font-head: var(--font-heading);
  --font-mono: var(--font-ui);
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:       #f5f5f7;
  --surface:  #ffffff;
  --surface2: #e8e8ec;
  --surface3: #dddde4;
  --border:   #d0d0d8;
  --border2:  #e4e4ea;
  --border3:  #c4c4ce;
  --text:     #111115;
  --sub:      #2a2a32;
  --muted:    #5e5e6e;
  --muted2:   #6e6e7d;

  --accent:        #c8102e;
  --accent-rgb:    200, 16, 46;
  --accent2:       #8b0015;
  --accent-dim:    rgba(200, 16, 46, 0.10);
  --accent-border: rgba(200, 16, 46, 0.35);

  --gradient-accent:   linear-gradient(155deg, #c8102e 0%, #9e0b22 100%);
  --gradient-confirm:  linear-gradient(155deg, #1a8f5f 0%, #0f6040 100%);

  --glow-accent: 0 0 0 3px rgba(200, 16, 46, 0.15);
  --glow-green:  0 0 0 3px rgba(26, 122, 74, 0.15);
  --glow-blue:   0 0 0 3px rgba(46, 95, 163, 0.15);
  --glow-red:    0 0 0 3px rgba(181, 45, 28, 0.15);

  --color-green:         #1a7a4a;
  --color-green-rgb:     26, 122, 74;
  --color-green-dim:     rgba(26, 122, 74, 0.10);
  --color-green-border:  rgba(26, 122, 74, 0.30);
  --color-red:           #b8541c;
  --color-red-rgb:       181, 45, 28;
  --color-red-dim:       rgba(181, 45, 28, 0.10);
  --color-red-border:    rgba(181, 45, 28, 0.30);
  --color-blue:          #2e5fa3;
  --color-blue-rgb:      46, 95, 163;
  --color-blue-dim:      rgba(46, 95, 163, 0.10);
  --color-blue-border:   rgba(46, 95, 163, 0.30);
  --color-purple:        #6040a0;
  --color-purple-rgb:    96, 64, 160;
  --color-purple-dim:    rgba(96, 64, 160, 0.10);
  --color-purple-border: rgba(96, 64, 160, 0.30);
  --color-yellow:        #8a5c00;
  --color-yellow-rgb:    138, 92, 0;
  --color-yellow-dim:    rgba(138, 92, 0, 0.10);
  --color-yellow-border: rgba(138, 92, 0, 0.30);
  --color-orange:        #8a4200;
  --color-orange-dim:    rgba(138, 66, 0, 0.10);
  --color-orange-border: rgba(138, 66, 0, 0.30);

  --color-lean-cut:  var(--color-red);
  --color-recomp:    #8a5c00;
  --color-lean-bulk: #1a7a4a;
  --color-maintain:  #2e5fa3;

  --shadow-sm: 0 1px 3px rgba(17,17,21,.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(17,17,21,.10), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(17,17,21,.12), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-xl: 0 16px 48px rgba(17,17,21,.16), 0 0 0 1px rgba(0,0,0,0.04);
  --card-shadow: 0 2px 12px rgba(17,17,21,.07), 0 0 0 1px rgba(0,0,0,0.04);
  --btn-shadow:  0 1px 3px rgba(17,17,21,.12);
  --btn-shadow-accent: 0 2px 8px rgba(200,16,46,0.30);
  --btn-shadow-confirm: 0 2px 8px rgba(26,143,95,0.25);

  /* --c-* light bridge overrides */
  --c-elev2: var(--surface3);
  --c-side:  #ffffff;
  --c-delete-active: #a83520;
}