/* Nature Excursion design tokens
 * GENERATED by lds-ds generate from brief.yaml. DO NOT EDIT BY HAND.
 * Edit brief.yaml and run it again. Project: Nature Excursion. Standard 0.2.
 */

:root {
  /* Colour roles */
  --color-base: #FFFFFF;
  --color-surface: #F4F7F3;
  --color-contrast: #0B1F2E;
  --color-muted: #51606B;
  --color-primary: #5DBB46;
  --color-outline: #C9D1D6;
  --color-dark: #0B1F2E;
  --color-primary-light: #EBF8E7;
  --color-primary-dark: #295E1D;
  --color-neutral-light: #E4E9EC;

  /* Status */
  --color-success: #295E1D;
  --color-warning: #956620;
  --color-error: #B3261E;
  --color-info: #51606B;

  /* Extra roles */
  --color-brand-leaf: #5DBB46;
  --color-brand-night: #0B1F2E;
  --color-brand-ochre: #C4862A;
  /* A rating star, and nothing else: the gold people read as a rating. Tripadvisor's own marks keep its green. */
  --color-rating: var(--color-brand-ochre);
  /* The one hover zoom for a clickable photograph, inside its frame, so nothing around it moves. */
  --hover-zoom: 1.03;

  /* Colour scales: reference only, components use the roles */
  --leaf-50: #EBF8E7;
  --leaf-100: #E0F6DA;
  --leaf-200: #C3E8BA;
  --leaf-300: #9FDA90;
  --leaf-400: #7ACC66;
  --leaf-500: #5DBB46;
  --leaf-600: #499D34;
  --leaf-700: #397A29;
  --leaf-800: #295E1D;
  --leaf-900: #1D3D14;
  --night-50: #F2F4F5;
  --night-100: #E4E9EC;
  --night-200: #C9D1D6;
  --night-300: #A9B7C1;
  --night-400: #8699A7;
  --night-500: #657A8B;
  --night-600: #51606B;
  --night-700: #364754;
  --night-800: #1F3342;
  --night-900: #0B1F2E;
  --ochre-50: #FAF5EE;
  --ochre-100: #F7EEE1;
  --ochre-200: #EEDDC3;
  --ochre-300: #E4C99F;
  --ochre-400: #D6AA6A;
  --ochre-500: #C4862A;
  --ochre-600: #A16E22;
  --ochre-700: #956620;
  --ochre-800: #704C18;
  --ochre-900: #523812;

  /* Text on fills: worked out by the contrast gate */
  --color-on-primary: var(--color-contrast);
  --color-on-primary-light: var(--color-contrast);
  --color-on-primary-dark: var(--color-base);
  --color-on-surface: var(--color-contrast);
  --color-on-dark: var(--color-base);
  --color-on-neutral-light: var(--color-contrast);
  --color-on-success: var(--color-base);
  --color-on-warning: var(--color-base);
  --color-on-error: var(--color-base);
  --color-on-info: var(--color-base);
  --color-on-brand-leaf: var(--color-contrast);
  --color-on-brand-night: var(--color-base);
  --color-on-brand-ochre: var(--color-contrast);
  --color-on-dark-muted: var(--color-neutral-light);
  --color-on-dark-link: var(--color-base);

  /* Interaction states: derived from the roles */
  --color-link: var(--color-primary-dark);
  --color-link-hover: var(--color-primary);
  --color-primary-hover: var(--color-primary-dark);
  --color-primary-active: color-mix(in srgb, var(--color-primary-dark) 85%, var(--color-contrast));
  --color-hairline: color-mix(in srgb, var(--color-outline) 55%, var(--color-base));

  /* Type families and weights */
  --font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Omnes Condensed", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --weight-450: 450;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Type sizes */
  --text-display-xl: clamp(2.688rem, 1.6rem + 3.625vw, 4.5rem);
  --text-display-lg: clamp(2.25rem, 1.35rem + 3vw, 3.75rem);
  --text-display-md: clamp(1.813rem, 1.1rem + 2.375vw, 3rem);
  --text-heading-xl: clamp(1.938rem, 1.6rem + 1.125vw, 2.5rem);
  --text-heading-lg: clamp(1.438rem, 1.175rem + 0.875vw, 1.875rem);
  --text-heading-md: clamp(1.188rem, 1rem + 0.625vw, 1.5rem);
  --text-heading-sm: 1.125rem;
  --text-body-xl: 1.125rem;
  --text-body-lg: 1rem;
  --text-body-md: 0.875rem;
  --text-body-sm: 0.75rem;
  --text-label: 0.75rem;
  --text-h1: clamp(2.125rem, 1.75rem + 1.25vw, 2.75rem);
  --text-h2: clamp(1.563rem, 1.3rem + 0.875vw, 2rem);
  --text-h3: 1.375rem;
  --text-h4: 1.125rem;
  --text-h5: 1rem;
  --text-h6: 0.875rem;
  --text-floor: 0.75rem;
  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.5;
  --leading-loose: 1.7;
  --tracking-heading: -0.02em;
  --tracking-caps: 0.08em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --radius-2xl: 24px;

  /* Shadows */
  --shadow-1: 0px 1px 3px 0px rgba(11, 31, 46, 0.06);
  --shadow-2: 0px 2px 4px 0px rgba(11, 31, 46, 0.1);
  --shadow-3: 0px 5px 10px 0px rgba(11, 31, 46, 0.1);
  --shadow-4: 0px 12px 20px -2px rgba(11, 31, 46, 0.15);
  --shadow-5: 0px 32px 48px -12px rgba(11, 31, 46, 0.2);

  /* Containers */
  --container-prose: 40rem;
  --container-content: 75rem;
  --container-wide: 86.25rem;
  --container-padding: 1.5rem;

  /* Motion */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layers */
  --layer-base: 0;
  --layer-raised: 10;
  --layer-sticky: 100;
  --layer-overlay: 200;
  --layer-modal: 300;
  --layer-toast: 400;

  /* Borders */
  --border-hairline: 1px;
  --border-strong: 2px;

  /* Opacity */
  --opacity-disabled: 0.5;
  --opacity-scrim: 0.6;

  /* Focus and touch */
  --focus-width: 2px;
  --focus-offset: 2px;
  --color-focus: var(--color-primary-dark);
  --color-focus-on-dark: var(--color-base);
  --touch-min: 44px;

  /* Names the consuming code already uses */
  --type-h1: var(--text-h1);
  --type-h2: var(--text-h2);
  --type-h3: var(--text-h3);
  --type-h4: var(--text-h4);
  --type-h5: var(--text-h5);
  --type-h6: var(--text-h6);
}

/* Reduced motion is a hard requirement: every duration token collapses. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
  }
}

/* Breakpoints (min-width). CSS cannot read a variable inside a media query, so use these numbers:
   sm: 480px
   md: 768px
   lg: 1024px
   xl: 1280px
   xxl: 1440px
*/