/* RUNLAA CONSOLIDATED RL TOKENS START */

:root{
  --rl-radius-xs:10px;
  --rl-radius-sm:14px;
  --rl-radius-md:18px;
  --rl-radius-lg:24px;
  --rl-shadow-xs:0 4px 14px rgba(15,23,42,.05);
  --rl-shadow-sm:0 10px 30px rgba(15,23,42,.08);
  --rl-shadow-md:0 18px 50px rgba(15,23,42,.12);
  --rl-orange:#fb923c;
  --rl-orange-dark:#ea580c;
  --rl-bg:#f8fafc;
  --rl-card:#ffffff;
  --rl-text:#0f172a;
}

/* =====================================================
   RUNLAA THEME TOKENS
   Shared root + light-orange + dark-orange
===================================================== */

:root{
  --rl-radius-xs:10px;
  --rl-radius-sm:14px;
  --rl-radius-md:18px;
  --rl-radius-lg:24px;
  --rl-radius-xl:32px;
  --rl-shadow-xs:0 4px 14px rgba(15,23,42,.05);
  --rl-shadow-sm:0 10px 30px rgba(15,23,42,.08);
  --rl-shadow-md:0 18px 50px rgba(15,23,42,.12);
  --rl-shadow-brand:0 10px 30px rgba(245,158,11,.14);
  --rl-speed-fast:.18s;
  --rl-speed:.28s;
  --rl-speed-slow:.4s;
  --rl-ring:0 0 0 4px rgba(249,115,22,.18);
}

html[data-theme="light-orange"]{
  --rl-bg:#fff8f1;
  --rl-bg-soft:#fff1e6;
  --rl-card:#ffffff;
  --rl-card-2:#fff7ef;
  --rl-surface:#ffffff;
  --rl-line:rgba(245,158,11,.16);
  --rl-line-strong:rgba(234,88,12,.20);
  --rl-text:#3a2210;
  --rl-text-soft:#6b4226;
  --rl-muted:#8a6245;
  --rl-text-inverse:#ffffff;
  --rl-brand:#fb923c;
  --rl-brand-strong:#ea580c;
  --rl-brand-soft:#fff0df;
  --rl-brand-line:#fdba74;
  --rl-brand-grad-1:#fb923c;
  --rl-brand-grad-2:#f59e0b;
  --rl-brand-grad-3:#ea580c;
  --rl-danger:#dc2626;
  --rl-danger-soft:#fef2f2;
  --rl-danger-line:#fecaca;
  --rl-success:#16a34a;
  --rl-success-soft:#f0fdf4;
  --rl-success-line:#bbf7d0;
  --rl-warning:#d97706;
  --rl-warning-soft:#fffbeb;
  --rl-warning-line:#fcd34d;
  --rl-nav-bg:rgba(255,248,241,.86);
  --rl-nav-text:#3a2210;
  --rl-chip:#fff0df;
}

html

/* =====================================================
   RUNLAA GLOBAL THEME LAYER
   Shared card surface + orange gradient + gamification
===================================================== */

:root{
  --rl-brand-orange-1:#ffd36b;
  --rl-brand-orange-2:#ffb347;
  --rl-brand-orange-3:#ff8c42;
  --rl-brand-orange-4:#ff6f1a;
  --rl-hero-surface:radial-gradient(circle at top left, rgba(255,180,0,.20), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255,120,0,.20), transparent 40%),
    linear-gradient(135deg, rgba(17,24,39,.96), rgba(31,41,55,.94));
  --rl-card-glass:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,240,.94));
  --rl-card-glass-dark:linear-gradient(180deg, rgba(24,28,36,.96), rgba(18,22,30,.96));
  --rl-brand-progress:linear-gradient(90deg, var(--rl-brand-orange-1), var(--rl-brand-orange-3));
  --rl-brand-button:linear-gradient(135deg, var(--rl-brand-orange-1), var(--rl-brand-orange-3));
  --rl-brand-panel:linear-gradient(180deg, rgba(255,193,94,.12), rgba(255,140,66,.08));
  --rl-card-shadow-soft:0 18px 44px rgba(15,23,42,.08);
  --rl-card-shadow-dark:0 18px 44px rgba(0,0,0,.28);
  --rl-card-shadow-brand:0 12px 32px rgba(255,140,66,.22);
}

/* =====================================================
   RUNLAA GLOBAL CARD + ORANGE GRADIENT SYSTEM
===================================================== */

:root{
  --rl-global-hero:radial-gradient(circle at top left, rgba(255,180,0,.20), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255,120,0,.20), transparent 40%),
    linear-gradient(135deg, rgba(17,24,39,.96), rgba(31,41,55,.94));
  --rl-global-card:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,240,.94));
  --rl-global-card-dark:linear-gradient(180deg, rgba(24,28,36,.96), rgba(18,22,30,.96));
  --rl-global-orange:linear-gradient(90deg, #ffd36b, #ff8c42);
  --rl-global-orange-btn:linear-gradient(135deg, #ffd36b, #ff8c42);
}

/* =====================================================
   RUNLAA GLOBAL CARD + ORANGE SYSTEM
===================================================== */

:root{
  --rl-global-hero:radial-gradient(circle at top left, rgba(255,180,0,.20), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255,120,0,.20), transparent 40%),
    linear-gradient(135deg, rgba(17,24,39,.96), rgba(31,41,55,.94));
  --rl-global-card:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,240,.94));
  --rl-global-card-dark:linear-gradient(180deg, rgba(24,28,36,.96), rgba(18,22,30,.96));
  --rl-global-orange:linear-gradient(90deg, #ffd36b, #ff8c42);
  --rl-global-orange-btn:linear-gradient(135deg, #ffd36b, #ff8c42);
}

/* RUNLAA CONSOLIDATED RL TOKENS END */

[data-theme="dark-orange"]{
  --rl-bg:#0f1115;
  --rl-bg-soft:#151922;
  --rl-card:#171b24;
  --rl-card-2:#1d2330;
  --rl-surface:#171b24;
  --rl-line:rgba(255,255,255,.08);
  --rl-line-strong:rgba(251,146,60,.22);
  --rl-text:#f5f7fb;
  --rl-text-soft:#c7cfdb;
  --rl-muted:#98a3b6;
  --rl-text-inverse:#111318;
  --rl-brand:#fb923c;
  --rl-brand-strong:#f59e0b;
  --rl-brand-soft:rgba(251,146,60,.14);
  --rl-brand-line:rgba(251,146,60,.28);
  --rl-brand-grad-1:#fb923c;
  --rl-brand-grad-2:#f59e0b;
  --rl-brand-grad-3:#ea580c;
  --rl-danger:#f87171;
  --rl-danger-soft:rgba(220,38,38,.18);
  --rl-danger-line:rgba(248,113,113,.28);
  --rl-success:#4ade80;
  --rl-success-soft:rgba(34,197,94,.12);
  --rl-success-line:rgba(74,222,128,.28);
  --rl-warning:#fbbf24;
  --rl-warning-soft:rgba(245,158,11,.14);
  --rl-warning-line:rgba(251,191,36,.28);
  --rl-nav-bg:rgba(15,17,21,.86);
  --rl-nav-text:#f8fafc;
  --rl-chip:#22160f;
  --rl-shadow-xs:0 4px 14px rgba(0,0,0,.22);
  --rl-shadow-sm:0 10px 30px rgba(0,0,0,.32);
  --rl-shadow-md:0 18px 50px rgba(0,0,0,.42);
  --rl-shadow-brand:0 10px 30px rgba(245,158,11,.18);
}