/**
 * DiningOut design tokens.
 *
 * Les prototypes constituent la référence visuelle principale.
 */

:root {
	/* --------------------------------------------------------------
	 * Brand colours
	 * -------------------------------------------------------------- */

	--do-teal: #204e55;
	--do-rust: #972d07;
	--do-amber: #c16200;
	--do-taupe: #816c61;
	--do-brown: #774e24;
	--do-terra-deep: #7a2405;

	/* --------------------------------------------------------------
	 * Paper and ink
	 * -------------------------------------------------------------- */

	--do-white: #ffffff;
	--do-bg: #f6f4f1;
	--do-ink: #141414;
	--do-ink-2: #4a4340;
	--do-ink-soft: var(--do-taupe);

	/* --------------------------------------------------------------
	 * Map colours
	 * -------------------------------------------------------------- */

	--do-sand: #ece5dc;
	--do-sand-2: #ddd2c5;
	--do-sand-3: #c9bcab;
	--do-sea: #e4eced;

	/* --------------------------------------------------------------
	 * Semantic colours
	 * -------------------------------------------------------------- */

	--do-surface-page: var(--do-bg);
	--do-surface-card: var(--do-white);
	--do-surface-inverse: var(--do-teal);
	--do-surface-sunk: var(--do-sand);

	--do-text-body: var(--do-ink-2);
	--do-text-strong: var(--do-ink);
	--do-text-muted: var(--do-taupe);
	--do-text-label: var(--do-amber);
	--do-text-on-inverse: rgba(255, 255, 255, 0.84);
	--do-text-on-inverse-muted: rgba(255, 255, 255, 0.5);

	--do-accent-primary: var(--do-rust);
	--do-accent-interactive: var(--do-amber);
	--do-accent-deep: var(--do-brown);

	--do-link: var(--do-rust);
	--do-link-hover: var(--do-amber);

	/* Functional states added for accessibility */

	--do-focus: var(--do-amber);
	--do-error: var(--do-rust);
	--do-success: var(--do-teal);

	/* --------------------------------------------------------------
	 * Borders and hairlines
	 * -------------------------------------------------------------- */

	--do-hairline: rgba(20, 20, 20, 0.16);
	--do-hairline-soft: rgba(20, 20, 20, 0.09);
	--do-hairline-inverse: rgba(255, 255, 255, 0.24);
	--do-hairline-inverse-soft: rgba(255, 255, 255, 0.14);

	--do-border-hairline: 1px solid var(--do-hairline-soft);
	--do-border-strong: 1px solid var(--do-hairline);
	--do-border-accent-width: 2px;
	--do-nav-underline-width: 1.5px;

	/* --------------------------------------------------------------
	 * Editorial badges
	 * -------------------------------------------------------------- */

	--do-badge-favourite: var(--do-rust);
	--do-badge-discovery: var(--do-amber);
	--do-badge-locals: var(--do-teal);

	/* --------------------------------------------------------------
	 * Font families
	 * -------------------------------------------------------------- */

	--do-font-title: "Cormorant Garamond", Georgia, serif;
	--do-font-label: "Open Sans", system-ui, sans-serif;
	--do-font-body: "Inter", system-ui, sans-serif;

	--do-weight-light: 300;
	--do-weight-regular: 400;
	--do-weight-medium: 500;
	--do-weight-semibold: 600;
	--do-weight-bold: 700;

	/* --------------------------------------------------------------
	 * Display typography
	 * -------------------------------------------------------------- */

	--do-h1-size: 76px;
	--do-h1-size-mobile: 40px;
	--do-h1-line-height: 1.02;
	--do-h1-line-height-mobile: 1.04;
	--do-h1-letter-spacing: -0.025em;

	--do-h2-size: 54px;
	--do-h2-size-mobile: 38px;
	--do-h2-line-height: 1.05;
	--do-h2-line-height-mobile: 1.06;
	--do-h2-letter-spacing: -0.022em;

	--do-h3-size: 30px;
	--do-h3-size-mobile: 25px;
	--do-h3-line-height: 1.1;
	--do-h3-letter-spacing: -0.015em;

	--do-feature-name-size: 46px;
	--do-mobile-nav-size: 34px;
	--do-contents-title-size: 21px;

	/* --------------------------------------------------------------
	 * Labels
	 * -------------------------------------------------------------- */

	--do-eyebrow-size: 11px;
	--do-eyebrow-tracking: 0.24em;

	--do-eyebrow-large-size: 15px;
	--do-eyebrow-large-tracking: 0.16em;

	--do-meta-size: 10px;
	--do-meta-tracking: 0.22em;

	--do-meta-small-size: 9px;
	--do-meta-small-tracking: 0.18em;

	--do-legend-size: 9.5px;
	--do-legend-tracking: 0.2em;

	--do-button-size: 13.5px;
	--do-button-tracking: 0.02em;

	--do-nav-size: 13.5px;

	--do-caps-link-size: 11px;
	--do-caps-link-tracking: 0.14em;

	/* --------------------------------------------------------------
	 * Body typography
	 * -------------------------------------------------------------- */

	--do-lede-size: 17px;
	--do-lede-size-mobile: 15px;
	--do-lede-line-height: 1.65;

	--do-body-size: 13.5px;
	--do-body-line-height: 1.55;

	--do-body-small-size: 12.5px;
	--do-fine-print-size: 11.5px;
	--do-tag-size: 11.5px;

	--do-quote-size: 17.5px;
	--do-quote-line-height: 1.6;
	--do-card-quote-size: 14.5px;

	/* --------------------------------------------------------------
	 * Layout
	 * -------------------------------------------------------------- */

	--do-wrap-max: 1280px;
	--do-gutter: 44px;
	--do-gutter-mobile: 22px;

	--do-section-spacing: 104px;
	--do-section-spacing-mobile: 52px;

	--do-header-height: 92px;
	--do-header-height-mobile: 64px;

	--do-grid-gap: 26px;
	--do-editorial-gap: 88px;

	--do-map-height: 620px;
	--do-map-height-mobile: 252px;
	--do-map-card-width: 372px;

	--do-hit-target: 44px;
	--do-hit-target-mobile: 48px;

	/* --------------------------------------------------------------
	 * Spacing scale
	 * -------------------------------------------------------------- */

	--do-space-1: 4px;
	--do-space-2: 6px;
	--do-space-3: 8px;
	--do-space-4: 10px;
	--do-space-5: 14px;
	--do-space-6: 18px;
	--do-space-7: 22px;
	--do-space-8: 26px;
	--do-space-9: 30px;
	--do-space-10: 38px;
	--do-space-11: 44px;
	--do-space-12: 58px;
	--do-space-13: 88px;

	/* --------------------------------------------------------------
	 * Corners
	 * -------------------------------------------------------------- */

	--do-radius-pill: 999px;
	--do-radius-card: 14px;
	--do-radius-media: 10px;
	--do-radius-small: 6px;
	--do-radius-none: 0;

	/* --------------------------------------------------------------
	 * Shadows
	 * -------------------------------------------------------------- */

	--do-shadow-card:
		0 24px 60px rgba(32, 78, 85, 0.14);

	--do-shadow-cover:
		0 30px 70px rgba(32, 78, 85, 0.26);

	--do-shadow-cover-back:
		0 20px 50px rgba(32, 78, 85, 0.16);

	--do-shadow-pin:
		0 1px 2px rgba(20, 20, 20, 0.35);

	--do-shadow-control:
		0 2px 8px rgba(32, 78, 85, 0.08);

	/* --------------------------------------------------------------
	 * Image scrims
	 * -------------------------------------------------------------- */

	--do-scrim-story:
		linear-gradient(
			180deg,
			rgba(20, 20, 20, 0.1) 30%,
			rgba(20, 20, 20, 0.88)
		);

	--do-scrim-story-mobile:
		linear-gradient(
			180deg,
			rgba(20, 20, 20, 0.06) 22%,
			rgba(20, 20, 20, 0.9)
		);

	--do-scrim-cover:
		linear-gradient(
			180deg,
			rgba(32, 78, 85, 0.62),
			rgba(32, 78, 85, 0.12) 45%,
			rgba(32, 78, 85, 0.7)
		);

	/* --------------------------------------------------------------
	 * Motion
	 * -------------------------------------------------------------- */

	--do-duration-fast: 120ms;
	--do-duration: 180ms;
	--do-duration-slow: 200ms;
	--do-easing: ease;

	--do-transition-colour:
		color var(--do-duration) var(--do-easing),
		background-color var(--do-duration) var(--do-easing),
		border-color var(--do-duration) var(--do-easing);

	--do-transition-opacity:
		opacity var(--do-duration-slow) var(--do-easing);
}