/* =========================================
   ROOT VARIABLES
   ========================================= */

:root {

  /* ===============================
     Core Backgrounds
  =============================== */
  --color-bg-body: #eeeeee;
  --color-bg-dark: #000000;
  --color-bg-darker: #111111;
  --color-bg-soft-dark: #151515;
  --color-bg-dark-hover: #1c1c1c;
  --color-bg-light: #f5f5f5;

  /* ===============================
     Text Colors
  =============================== */
  --color-text-body: #bbb;
  --color-text-dark: #212121;
  --color-text-muted: #666666;
  --color-text-light: #ffffff;
  --color-text-soft-light: #c5c5c5;
  --mtg-orange: #e94c13;
  --mtg-orange-hover: #ff6a2b;

  /* ===============================
     Accent / Brand Colors
  =============================== */
  --color-primary: #e94c13;
  --color-primary-dark: #c83c1b;
  --color-gold: goldenrod;

  /* ===============================
     Borders
  =============================== */
  --color-border-light: #dddddd;
  --color-border-soft: rgba(0, 0, 0, 0.08);
  --color-border-dark: #2a2a2a;

  /* ===============================
     Alert Colors
  =============================== */
  --alert-primary-bg: #e3ecf7;
  --alert-secondary-bg: #ece9e4;
  --alert-success-bg: #e5f0e7;
  --alert-info-bg: #e3f1f5;
  --alert-danger-bg: #f3e6e6;

  --alert-warning-bg: linear-gradient(#e8d070, #d1b241);
  --alert-warning-border: #a98b1c;

  /* ===============================
     Shadows
  =============================== */
  --shadow-soft: 0 4px 3px 0px rgb(0 0 0 / 15%);
  --shadow-dropdown: 0 6px 18px rgba(0, 0, 0, 0.1);

  /* ===============================
     Radius
  =============================== */
  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-large: 8px;

  /* ===============================
     Layout
  =============================== */
  --content-max-width: 1200px;
  --header-height: 74px; /* adjust to actual height */

}