@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

:root {
    /* Primary Theme Colors */
    --main-color: #FE5B3D;
    --second-color: #FFAC38;
    --text-color: #444444;
  
    /* Gradients */
    --gradient: linear-gradient(#FE5B3D, #FFAC38);
    --gradient-top-right: linear-gradient(to top right, #FE5B3D, #FFAC38);
  
    /* Neutrals and Backgrounds */
    --white: #FFFFFF;
    --light-bg: #EEEFF1;
    --dark-blue: #474FA0;
    --transparent: transparent;
  
    /* Shadows */
    --shadow-light: rgba(0, 0, 0, 0.1);
  
    /* Scrollbar */
    --scroll-thumb: #FE5B3D;
  
    /* Accent / Border */
    --border-color: #FFAC38;
    
    /* Optional */
    --section-color: #1D1A1F;
    --alt-bg: #dfdfdf;
    --white-alt: #b4b4b4;
    
    /* Gradient variations */
    --gradient-right: linear-gradient(to right, var(--main-color), var(--second-color));

    /* Adapted from original colors to new scheme */
    --bg-primary: var(--light-bg);
    --bg-secondary: var(--white);
    --bg-transparent: rgba(255, 255, 255, 0.97);
    --text-primary: var(--text-color);
    --text-secondary: rgba(68, 68, 68, 0.8);

    --accent-primary: var(--main-color);
    --accent-light: var(--second-color);
    --accent-dark: #e54835;

    --border-light: rgba(0, 0, 0, 0.05);
    --border-medium: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.2);
    --overlay-light: rgba(0, 0, 0, 0.05);
    
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);

    --shadow-accent: 0 4px 15px rgba(254, 91, 61, 0.3);
    --shadow-accent-hover: 0 6px 20px rgba(254, 91, 61, 0.4);
    
    /* Typography */
    --font-family: "Geist Mono", monospace;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* Spacing */
    --space-xs: 5px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 25px;
    --space-xxl: 50px;
    --space-xxxl: 100px;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Layout */
    --container-max: 1500px;
    --header-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
}