/**
 * Hydra TCG — brand & mobile design tokens.
 * Change values here to retheme admin (mobile + light desktop accent).
 */
@layer base {
  :root {
    /* —— Orange scale —— */
    --hydra-orange-50: #fff7ed;
    --hydra-orange-100: #ffedd5;
    --hydra-orange-200: #fed7aa;
    --hydra-orange-300: #fdba74;
    --hydra-orange-400: #fb923c;
    --hydra-orange-500: #f97316;
    --hydra-orange-600: #ea580c;
    --hydra-orange-700: #c2410c;
    --hydra-orange-800: #9a3412;
    --hydra-orange-900: #7c2d12;

    /* —— Semantic brand —— */
    --hydra-primary: var(--hydra-orange-500);
    --hydra-primary-light: var(--hydra-orange-400);
    --hydra-primary-soft: var(--hydra-orange-100);
    --hydra-bg-warm: #fff7ed;
    --hydra-bg-warm-soft: #fffaf5;
    --hydra-surface: #ffffff;
    --hydra-text: #111827;
    --hydra-text-secondary: #1f2937;
    --hydra-text-muted: #6b7280;
    --hydra-border: rgba(249, 115, 22, 0.18);
    --hydra-border-soft: rgba(249, 115, 22, 0.12);
    --hydra-border-strong: rgba(249, 115, 22, 0.28);
    --hydra-shadow: 0 2px 14px rgba(249, 115, 22, 0.08);
    --hydra-shadow-md: 0 8px 24px rgba(234, 88, 12, 0.1);
    --hydra-shadow-nav: 0 -4px 24px rgba(15, 23, 42, 0.06);
    --hydra-accent-soft: rgba(249, 115, 22, 0.12);
    --hydra-accent-softer: rgba(255, 237, 213, 0.9);
    --hydra-gradient: linear-gradient(155deg, #fb923c 0%, #f97316 42%, #ea580c 100%);
    --hydra-gradient-soft: linear-gradient(180deg, #fff7ed 0%, #fffaf5 52%, #ffedd5 100%);

    /* Aliases (legacy mobile files) */
    --hydra-orange-bg: var(--hydra-bg-warm);
    --hydra-orange-bg-soft: var(--hydra-bg-warm-soft);
    --hydra-orange-surface: var(--hydra-surface);
    --hydra-orange-border: var(--hydra-border-soft);
    --hydra-orange-border-strong: var(--hydra-border-strong);
    --hydra-orange-shadow: var(--hydra-shadow);
    --hydra-orange-shadow-md: var(--hydra-shadow-md);
    --hydra-orange-accent-soft: var(--hydra-accent-soft);
    --hydra-orange-accent-softer: var(--hydra-accent-softer);
    --hydra-orange-gradient: var(--hydra-gradient);
    --hydra-orange-gradient-soft: var(--hydra-gradient-soft);

    /* —— Mobile layout —— */
    --hydra-mo-card-radius: 24px;
    --hydra-mo-card-pad: clamp(18px, 4.2vw, 22px);
    --hydra-mo-card-gap: var(--hydra-mobile-card-gap);
    --hydra-mo-pill-radius: 999px;
    --hydra-mo-pill-h: 44px;
    --hydra-mo-touch: 44px;
    --hydra-mo-fab-size: 58px;
    --hydra-bottom-nav-h: 50px;
    --hydra-mo-scroll-pad-extra: 12px;
    --hydra-mo-scroll-pad-fab-extra: 64px;
    --hydra-mo-scroll-bottom-pad: var(--app-scroll-bottom-pad, calc(var(--hydra-bottom-nav-h) + var(--hydra-mo-scroll-pad-extra) + env(safe-area-inset-bottom, 0px)));
    --hydra-mo-scroll-bottom-pad-fab: var(--app-scroll-bottom-pad-fab, calc(var(--hydra-bottom-nav-h) + var(--hydra-mo-scroll-pad-fab-extra) + env(safe-area-inset-bottom, 0px)));

    /* Mobile page gutter — Dashboard/Tổng quan là chuẩn (≤900px) */
    --hydra-mobile-page-x: 24px;
    --hydra-mobile-card-gap: 14px;
    --hydra-mobile-section-gap: 18px;
    --hydra-mobile-top-gap: 18px;

    /* —— Mobile typography —— */
    --hydra-mo-title: clamp(26px, 7.2vw, 30px);
    --hydra-mo-section: clamp(20px, 5.4vw, 24px);
    --hydra-mo-card-title: 17px;
    --hydra-mo-body: 15px;
    --hydra-mo-label: 11px;
    --hydra-mo-money: clamp(20px, 5.4vw, 24px);

    --hydra-mobile-card-radius: var(--hydra-mo-card-radius);
    --hydra-mobile-pill-radius: var(--hydra-mo-pill-radius);
  }

  body.use-new-ui {
    --hydra-accent: var(--hydra-primary);
    --hydra-accent-soft: var(--hydra-accent-soft);
    --hydra-gold: var(--hydra-orange-600);
    --hydra-gold-soft: var(--hydra-accent-soft);
    --primary: var(--hydra-primary);
    --primary-strong: var(--hydra-orange-600);
    --color-primary: var(--hydra-primary);
    --ui-focus: var(--hydra-primary);
    --table-row-hover: rgba(249, 115, 22, 0.045);
    --table-row-selected: rgba(249, 115, 22, 0.08);
  }
}