:root {
    --primary-color: #0f1620; /* page background (lighter) */
    --surface-color: #131922; /* cards, panels (lighter) */
    --second-surface-color: rgba(255,255,255,0.03); /* card on a card */
    --second-surface-color-hover: rgba(255,255,255,0.05); /* hover state for second surface */
    --primary-accent: #ff8a42; /* main interactive color (orange) */
    --primary-accent-hover: #ff6f1f; /* hover state for primary accent */
    --accent-border: #b45309; /* darker burnt orange for clear contrast (accent borders) */
    --accent-border-hover: #933f00; /* accent border color on hover */
    --primary-accent-border: #933f00; /* border color used for primary-accent hover state */
    --accent-border-glow: 0 12px 30px rgba(184,84,15,0.18); /* glow used for accent hover */
    --accent-inset-shadow: inset 0 -6px 10px rgba(0,0,0,0.16); /* inset shadow for accent buttons */
    --secondary-color: #27c7c9; /* secondary / complementary accent */
    --success-color: #78efc3; /* success color for positive states */
    --warning-color: #ffd27a; /* warning color for cautions */
    --error-color: #ff7a7a; /* error color for failures */
    --text-primary: #eef6ff; /* primary body text */
    --text-secondary: #a3adb9; /* secondary / muted body text */
    --text-primary-hover: #ffffff; /* hover state for primary text */
    --text-secondary-hover: #b0bbca; /* hover state for secondary text */
    --heading-primary: #ffffff; /* main headings */
    --heading-secondary: #d7eaf8; /* subheadings / secondary headings */
    --border-color: rgba(255, 255, 255, 0.08); /* border / divider color */
    --border-color-hover: rgba(255, 255, 255, 0.12); /* border hover color */
    --hr-color: rgba(255,255,255,0.06); /* horizontal rule / subtle divider color */
}