/* ========================================================= */
/*  DESIGN TOKENS / GLOBAL VARIABLES                         */
/* ========================================================= */

:root {
  /* -------------------------------------------------- */
  /* RAW COLORS (from your system)                      */
  /* -------------------------------------------------- */
  --color-green: #007733;
  --color-orange: #FF8500;
  --color-red: #FF2200;
  --color-gray: #C6C6C6;
  --color-dark-gray: #4A4A55;
  --color-blue-dark: #000095;
  --color-blue: #0000FF;
  --color-navy: #1B1B30;
  --color-bg-light: #F7F7F3;
  --color-white: #FFFFFF;

  /* -------------------------------------------------- */
  /* UI COLORS (LIGHTMODE)                              */
  /* -------------------------------------------------- */
  --bg-page: var(--color-bg-light);
  --bg-surface: var(--color-bg-light);
  --bg-surface-alt: var(--color-white);

  --text-primary: var(--color-navy);
  --text-secondary: var(--color-dark-gray);
  --text-inverse: var(--color-bg-light);

  --border-color: var(--color-gray);

  /* Functional states */
  --state-correct: var(--color-green);
  --state-wrong: var(--color-red);
  --state-warning: var(--color-orange);
  --state-info: var(--color-blue);

  /* Buttons */
  --btn-bg: var(--color-blue-dark);
  --btn-text: var(--color-bg-light);
  --btn-bg-hover:var(--color-blue);

  --color-bg-hover: var(--btn-bg-hover);

  
  /* Tabs */
  --tab-active-bg: var(--color-blue-dark);
  --tab-active-text: var(--color-bg-light);
  --tab-inactive-bg: #E0E0E0;
  --tab-inactive-text: #1B1B30;

  /* Timer colors */
  --timer-running: var(--color-blue);
  --timer-final: var(--color-red);
  --timer-finished: var(--color-red);

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);

  /* -------------------------------------------------- */
  /* TYPOGRAPHY                                         */
  /* -------------------------------------------------- */
  --font-family-base: "ABCNormal-Normal", Helvetica, sans-serif;
  --font-family-bold: "ABCNormal-Medium", Helvetica, sans-serif;

  --font-size-xl: 40px;
  --font-size-lg: 30px;
  --font-size-md: 20px;
  --font-size-sm: 16px;
  --font-size-xs: 14px;

  --line-height-default: 1.3;

  /* -------------------------------------------------- */
  /* SPACING                                             */
  /* -------------------------------------------------- */
  --space-1: 20px;
  --space-2: 40px;
  --space-3: 60px;

  /* -------------------------------------------------- */
  /* RADII / WIDTH                                       */
  /* -------------------------------------------------- */
  --radius-sm: 3px;
  --layout-max-width: 1440px;

  /* Grid */
  --grid-columns: 12;
  --grid-gutter: 20px;
}

/* -------------------------------------------------- */
/* DARKMODE OVERRIDES                                  */
/* -------------------------------------------------- */
body.dark {
  --bg-page: #1B1B30;
  --bg-surface: #2A2A3F;
  --bg-surface-alt: #222233;

  --text-primary: var(--color-bg-light);
  --text-secondary: #C7C7D3;

  --border-color: #36364A;

  --btn-bg: #0000FF;
  --btn-text: var(--color-bg-light);
  --btn-bg-hover: #000095;

  --tab-active-bg: var(--btn-bg);
  --tab-active-text: var(--color-bg-light);
  --tab-inactive-bg: #333345;
  --tab-inactive-text: var(--text-secondary);

  --timer-running: #85A2FF;
  --timer-final: #FF7777;
  --timer-finished: #FF5555;
}