/* stylelint-disable */

/* ============================================================
   Moment job board - dark theme
   ------------------------------------------------------------
   Custom CSS for the Ashby job board (jobs.ashbyhq.com/moment).
   Upload via Ashby admin: Job Board -> Edit -> Custom CSS.

   Ashby's custom-CSS sandbox only permits :root, at-rules
   (@font-face etc.) and the documented .ashby-* class selectors.
   Element selectors, ids and internal class names are rejected.

   Ashby's entire stylesheet is built on CSS design tokens, so
   this file themes the whole board by redefining those tokens in
   :root - which recolours every surface, border, text and control
   at once. Colours follow moment.com dark mode (styles/_colors.css).

   !important is required: the Ashby admin theme sets some tokens
   as an inline style on <html>, which a plain :root rule cannot
   override otherwise.

   KNOWN LIMITATION - the wordmark is a raster image and cannot be
   recoloured with CSS. Upload a light/white wordmark in the Ashby
   admin (Theme settings) so it reads on the dark background.
   ============================================================ */

/* ---- Brand font: TWK Lausanne (served from moment.com) ---- */
@font-face {
	font-family: 'TWK Lausanne';
	src:
		url('https://moment.com/fonts/TWKLausanne-350.woff2') format('woff2'),
		url('https://moment.com/fonts/TWKLausanne-350.woff') format('woff');
	font-weight: 350;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TWK Lausanne';
	src:
		url('https://moment.com/fonts/TWKLausanne-350Italic.woff2') format('woff2'),
		url('https://moment.com/fonts/TWKLausanne-350Italic.woff') format('woff');
	font-weight: 350;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'TWK Lausanne';
	src:
		url('https://moment.com/fonts/TWKLausanne-400.woff2') format('woff2'),
		url('https://moment.com/fonts/TWKLausanne-400.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TWK Lausanne';
	src:
		url('https://moment.com/fonts/TWKLausanne-400Italic.woff2') format('woff2'),
		url('https://moment.com/fonts/TWKLausanne-400Italic.woff') format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ---- Theme tokens ---- */
:root {
	/* Render native controls (scrollbars, <select> menus) dark */
	color-scheme: dark !important;

	/* Page background (board, nav and posting pages all read this) */
	--colorAppBackground: #111d1b !important;

	/* Neutral ramp - inverted so 000 is the darkest (surfaces) and
	   800 the lightest (primary text). Drives every surface, border
	   and text colour on the board. */
	--colorNeutral000: #111d1b !important; /* page / card / nav background   */
	--colorNeutral100: #182624 !important; /* raised surface, hover fill     */
	--colorNeutral200: #243634 !important; /* dividers, subtle borders       */
	--colorNeutral300: #33514e !important; /* control borders (inputs etc.)  */
	--colorNeutral400: #496664 !important; /* stronger borders, icon strokes */
	--colorNeutral500: #6f8d8c !important; /* faint text & icons             */
	--colorNeutral600: #9fb3b3 !important; /* muted / tertiary text          */
	--colorNeutral700: #c6d2d2 !important; /* secondary text                 */
	--colorNeutral800: #f7f8f8 !important; /* primary text                   */
	--colorNeutral900: #ffffff !important;

	/* Neutral alpha variants - light tints for overlays / hover states */
	--colorNeutral000A: rgb(17 29 27 / 0%) !important;
	--colorNeutral100A: rgb(247 248 248 / 4%) !important;
	--colorNeutral200A: rgb(247 248 248 / 8%) !important;
	--colorNeutral300A: rgb(247 248 248 / 14%) !important;
	--colorNeutral400A: rgb(247 248 248 / 22%) !important;
	--colorNeutral500A: rgb(247 248 248 / 34%) !important;
	--colorNeutral600A: rgb(247 248 248 / 50%) !important;
	--colorNeutral700A: rgb(247 248 248 / 67%) !important;
	--colorNeutral800A: rgb(247 248 248 / 82%) !important;
	--colorNeutral100Transparent: rgb(17 29 27 / 0%) !important;
	--colorNeutral600Transparent: rgb(159 179 179 / 25%) !important;

	/* Primary / accent - primary-button fill, links, job titles,
	   the active tab and the tab slider. */
	--colorPrimary000: transparent !important; /* secondary-button fill   */
	--colorPrimary200: #213d3e !important; /* tag / pill fill             */
	--colorPrimary600: #dde7e7 !important; /* accent                      */
	--colorPrimary700: #a9bcbc !important;
	--colorPrimary800: #f7f8f8 !important; /* tag / pill text             */
	--colorPrimary900: #ffffff !important; /* hover (primary btn / link)  */
	--colorPrimary500A: rgb(169 188 188 / 22%) !important; /* focus ring  */

	/* Shadows - deepened for a dark surface */
	--colorNeutralShadow: rgb(0 0 0 / 45%) !important;
	--colorPrimaryShadow: rgb(0 0 0 / 45%) !important;
	--colorShadowPrimaryLight: rgb(0 0 0 / 30%) !important;
	--colorShadowPrimaryXLight: rgb(0 0 0 / 18%) !important;

	/* Status colours - kept legible on the dark background */
	--colorNegative200: #2c1c1c !important; /* error banner fill   */
	--colorNegative600: #f3756f !important; /* error text / icon   */
	--colorNegative800: #fbb4b0 !important;
	--colorPositive200: #16271c !important; /* success banner fill */
	--colorPositive600: #4cc878 !important; /* success text / icon */
	--colorPositive800: #b6e9c4 !important;
	--colorWarning600: #f4ca64 !important; /* warning text / icon  */
	--colorWarning800: #f1d488 !important;
	--colorWarning900: #f6e3b0 !important;
	--colorInfo100: #16242e !important; /* info banner fill        */
	--colorInfo200: #182a36 !important;
	--colorInfo300: #1d3442 !important;

	/* Typography */
	--fontFamily: 'TWK Lausanne', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Helvetica, Arial, sans-serif !important;
}
