/*
 * GRANICA JOB BOARD MINIMAL THEME
 * ================================
 * 
 * This is a minimal CSS override for Granica's Ashby job board.
 * It only uses CSS variables to change colors and basic styling,
 * letting Ashby's default functionality work without conflicts.
 * 
 * BRAND COLORS:
 * - Brand Yellow: #FFD100 - primary accent color
 * - Dark Background: #141414 - main dark background
 * - Surface Gray: #2a2a2a - cards and elevated surfaces
 * 
 * HOW TO APPLY:
 * 1. Copy the entire contents of this file
 * 2. Go to your Ashby admin panel
 * 3. Navigate to: Settings → Theme → Job Board
 * 4. Scroll to the "Custom CSS" section
 * 5. Paste this CSS code into the custom CSS text area
 * 6. Save the changes
 * 
 * WHERE IT APPEARS:
 * The styling will be applied to Granica's public job board at:
 * https://jobs.ashbyhq.com/granica
 * 
 * Last updated: 2025
 */

/* Google Fonts Import - Inter for consistent typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* stylelint-disable */

/* These variables can be used to control values throughout the job board. */
:root {
    /*  Darker primary color
    WARNING - This can be set in the Ashby admin under theme settings!
    If you modify, you should make sure your colors work with the settings there. */
    --colorPrimary900: oklch(0.865 0.165 85.87); /* Brand color #FFD100 */
    
    /* Color palette for dark theme */
    --colorNeutral800: #cccccc;  /* Light text */
    --colorNeutral100: oklch(0.985 0 0);  /* Primary text */
    --colorNeutral000: #141414;  /* Dark background */
    --colorNeutral300: #2a2a2a;  /* Surface color */
    --colorNeutral200: #2a2a2a;  /* Card background */
    --colorNeutral600: #999999;  /* Muted text */
    --colorNeutral700: #666666;  /* Secondary text */
    --colorNegative800: #ff4444; /* Error color */
    --colorNegative200:  oklch(0.141 0.005 285.823); /* Error background */

    /*  Lighter primary color - Brand Yellow
    WARNING - This can be set in the Ashby admin under theme settings!
    If you modify, you should make sure your colors work with the settings there. */
    --colorPrimary600: oklch(0.92 0.14 85.87); /* Lighter yellow (primary-600) ~#FFF200 */

    /*  The max width of the job board container */
    --widthMaxJobBoard: 800px;

    /*  The max width of the application form section */
    /* --widthMaxJobBoard: 800px; */

    /*  Container border radius */
    --borderRadiusContainer: 8px;

    /*  Border radius of control elements (e.g. input boxes) */
    --borderRadiusControl: 6px;

    /*  Button border radius */
    --borderRadiusButton: 6px;

    /*  Font families */
    --fontFamily: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Main app background - dark theme */
    --colorAppBackground: oklch(0.141 0.005 285.823);
}

/* Global dark theme for body */
body {
    background-color: var(--colorAppBackground) !important;
    color: var(--colorNeutral100) !important;
    font-family: var(--fontFamily) !important;
}

/* Global button styling - remove harsh borders and ensure visibility */
button:hover {
    background-color: var(--colorPrimary600) !important;
    color: var(--colorNeutral000) !important;
}

a svg, a path, a circle, a rect, a line {
  fill: var(--colorNeutral800) !important;
  stroke: var(--colorNeutral800) !important;
}

a:hover svg, a:hover svg, a:hover path, a:hover circle, a:hover rect {
  fill: var(--colorPrimary600) !important;
  stroke: var(--colorPrimary600) !important;
}

.ashby-job-posting-brief-list a > div{
    margin-bottom: 12px;
}