/**
 * Variables
 *
 * List of all reusable variables (colors, breakpoints...)
 * using CSS Custom properties (https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
 *
 *
 */

body {
  /* GREYSCALE
  -------------------- */

  --road-grey-0: #000000;
  --road-grey-100-new: #ffffff;

  /**
   * Blur
  */
  --road-blur-light: blur(0.25rem);
  --road-blur-medium: blur(0.5rem);

  /**
   * Shadow
  */
  --road-elevation-lowest: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px 1px rgba(0, 0, 0, 0.08);
  --road-elevation-low: 0 1px 2px rgba(41, 44, 51, 0.16), 0 3px 5px 1px rgba(41, 44, 51, 0.12);
  --road-elevation-average: 0 3px 3px rgba(0, 0, 0, 0.16), 0 6px 8px 1px rgba(41, 44, 51, 0.12);
  --road-elevation-hight: 0 3px 3px rgba(0, 0, 0, 0.2), 0 10px 13px 2px rgba(41, 44, 51, 0.12);
  --road-elevation-highest: 0 4px 4px rgba(0, 0, 0, 0.24), 0 12px 16px 6px rgba(41, 44, 51, 0.16);

  /**
   * Button destructive
  */
  --road-button-destructive-primary: var(--road-danger-50);
  --road-button-destructive-primary-variant: var(--road-danger-40);
  --road-button-destructive-outline: var(--road-danger-50);
  --road-button-destructive-secondary: var(--road-grey-100-new);
  --road-button-destructive-secondary-variant: var(--road-danger-90);
  --road-on-button-destructive-secondary: var(--road-danger-50);
  --road-on-button-destructive-primary: var(--road-grey-100-new);

  /* DECORATIVE
  -------------------- */

  --road-blue-klein-5: #000411;
  --road-blue-klein-10: #000923;
  --road-blue-klein-15: #000d34;
  --road-blue-klein-20: #001146;
  --road-blue-klein-30: #001a68;
  --road-blue-klein-40: #00228b;
  --road-blue-klein-50: #002bae;
  --road-blue-klein-60: #3355be;
  --road-blue-klein-70: #6680ce;
  --road-blue-klein-80: #99aadf;
  --road-blue-klein-85: #b3bfe7;
  --road-blue-klein-90: #ccd5ef;
  --road-blue-klein-95: #e6eaf7;
  --road-violet-electric-5: #0e0019;
  --road-violet-electric-10: #1c0032;
  --road-violet-electric-15: #2a004a;
  --road-violet-electric-20: #380063;
  --road-violet-electric-30: #550095;
  --road-violet-electric-40: #7100c6;
  --road-violet-electric-50: #8d00f8;
  --road-violet-electric-60: #a433f9;
  --road-violet-electric-70: #bb66fb;
  --road-violet-electric-80: #d199fc;
  --road-violet-electric-85: #ddb2fd;
  --road-violet-electric-90: #e8ccfe;
  --road-violet-electric-95: #f4e5fe;
  --road-green-monstera-5: #000c01;
  --road-green-monstera-10: #001901;
  --road-green-monstera-15: #002502;
  --road-green-monstera-20: #003203;
  --road-green-monstera-30: #005705;
  --road-green-monstera-40: #007006;
  --road-green-monstera-50: #007c07;
  --road-green-monstera-60: #339639;
  --road-green-monstera-70: #66b06a;
  --road-green-monstera-80: #99cb9c;
  --road-green-monstera-85: #b3d8b5;
  --road-green-monstera-90: #cce5cd;
  --road-green-monstera-95: #e6f2e6;
  --road-red-pepper-5: #150000;
  --road-red-pepper-10: #2a0000;
  --road-red-pepper-15: #3f0000;
  --road-red-pepper-20: #540000;
  --road-red-pepper-30: #7f0000;
  --road-red-pepper-40: #a90000;
  --road-red-pepper-50: #d30000;
  --road-red-pepper-60: #dc3333;
  --road-red-pepper-70: #e56666;
  --road-red-pepper-80: #ed9999;
  --road-red-pepper-85: #f2b3b3;
  --road-red-pepper-90: #f6cccc;
  --road-red-pepper-95: #fbe6e6;
  --road-yellow-gold-5: #130e00;
  --road-yellow-gold-10: #261c00;
  --road-yellow-gold-15: #3a2a00;
  --road-yellow-gold-20: #4d3800;
  --road-yellow-gold-30: #735400;
  --road-yellow-gold-40: #9a7000;
  --road-yellow-gold-50: #c08c00;
  --road-yellow-gold-60: #cda333;
  --road-yellow-gold-70: #d9ba66;
  --road-yellow-gold-80: #e6d199;
  --road-yellow-gold-85: #ecdcb2;
  --road-yellow-gold-90: #f2e8cc;
  --road-yellow-gold-95: #f9f4e6;
  --road-yellow-mikado-5: #191401;
  --road-yellow-mikado-10: #332702;
  --road-yellow-mikado-15: #4c3b04;
  --road-yellow-mikado-20: #664e05;
  --road-yellow-mikado-30: #997607;
  --road-yellow-mikado-40: #cc9d0a;
  --road-yellow-mikado-50: #ffc40c;
  --road-yellow-mikado-60: #ffd03d;
  --road-yellow-mikado-70: #ffdc6d;
  --road-yellow-mikado-80: #ffe79e;
  --road-yellow-mikado-85: #ffedb6;
  --road-yellow-mikado-90: #fff3ce;
  --road-yellow-mikado-95: #fff9e7;

  /**
   * Tag
  */

  --road-tag-default: var(--road-blue-klein-50);
  --road-tag-ecology: var(--road-green-monstera-50);
  --road-tag-exclusivity: var(--road-yellow-gold-50);
  --road-tag-offer: var(--road-red-pepper-50);
  --road-tag-black-friday: var(--road-grey-0);

  /**
   * Rating level
  */

  --road-rating: var(--road-yellow-mikado-50);

  /* STATUS
   -------------------- */

  --road-info-10: #0a1628;
  --road-info-20: #142c51;
  --road-info-30: #1d4379;
  --road-info-40: #2759a2;
  --road-info-50: #316fca;
  --road-info-60: #5a8cd5;
  --road-info-70: #83a9df;
  --road-info-80: #adc5ea;
  --road-info-90: #d6e2f4;
  --road-info-95: #ebf1fa;
  --road-success-10: #0d1b0e;
  --road-success-20: #1a351b;
  --road-success-30: #285029;
  --road-success-40: #356a36;
  --road-success-50: #428544;
  --road-success-60: #689d69;
  --road-success-70: #8eb68f;
  --road-success-80: #b3ceb4;
  --road-success-90: #d9e7da;
  --road-success-95: #ecf3ec;
  --road-warning-10: #4e3406;
  --road-warning-20: #9c690d;
  --road-warning-30: #ea9d13;
  --road-warning-40: #fab815;
  --road-warning-50: #fdc93e;
  --road-warning-60: #ffd966;
  --road-warning-70: #ffe38c;
  --road-warning-80: #ffecb3;
  --road-warning-90: #fff6d9;
  --road-warning-95: #fffaec;
  --road-danger-10: #240b09;
  --road-danger-20: #471711;
  --road-danger-30: #6b221a;
  --road-danger-40: #8e2e22;
  --road-danger-50: #b2392b;
  --road-danger-60: #c16155;
  --road-danger-70: #d18880;
  --road-danger-80: #e0b0aa;
  --road-danger-90: #f0d7d5;
  --road-danger-95: #f7ebea;


  /**
   * Information
   */
  --road-info-surface: var(--road-info-95);
  --road-info-surface-inverse: var(--road-info-50);
  --road-on-info-surface: var(--road-info-30);
  --road-on-info-surface-inverse: var(--road-grey-100-new);
  --road-info-outline: var(--road-info-50);
  --road-info-icon: var(--road-info-50);
  --road-info-icon-inverse: var(--road-grey-100-new);
  --road-info-background: var(--road-info-surface);
  --road-info-default: var(--road-info-surface-inverse);
  --road-info-text: var(--road-on-info-surface);
  --road-info-contrast: var(--road-on-info-surface-inverse);

  /**
   * Success
   */
  --road-success-surface: var(--road-success-95);
  --road-success-surface-inverse: var(--road-success-50);
  --road-on-success-surface: var(--road-success-30);
  --road-on-success-surface-inverse: var(--road-grey-100-new);
  --road-success-outline: var(--road-success-50);
  --road-success-icon: var(--road-success-50);
  --road-success-icon-inverse: var(--road-grey-100-new);
  --road-success-background: var(--road-success-surface);
  --road-success-default: var(--road-success-surface-inverse);
  --road-success-text: var(--road-on-success-surface);
  --road-success-contrast: var(--road-on-success-surface-inverse);

  /**
   * Warning
   */
  --road-warning-surface: var(--road-warning-95);
  --road-warning-surface-inverse: var(--road-warning-50);
  --road-on-warning-surface: var(--road-warning-20);
  --road-on-warning-surface-inverse: var(--road-warning-10);
  --road-warning-outline: var(--road-warning-30);
  --road-warning-icon: var(--road-warning-30);
  --road-warning-icon-inverse: var(--road-warning-10);
  --road-warning-background: var(--road-warning-surface);
  --road-warning-default: var(--road-warning-surface-inverse);
  --road-warning-text: var(--road-on-warning-surface);
  --road-warning-contrast: var(--road-on-warning-surface-inverse);

  /**
   * Danger
   */
  --road-danger-surface: var(--road-danger-95);
  --road-danger-surface-inverse: var(--road-danger-50);
  --road-on-danger-surface: var(--road-danger-30);
  --road-on-danger-surface-inverse: var(--road-grey-100-new);
  --road-danger-outline: var(--road-danger-50);
  --road-danger-icon: var(--road-danger-50);
  --road-danger-icon-inverse: var(--road-grey-100-new);
  --road-danger-background: var(--road-danger-surface);
  --road-danger-default: var(--road-danger-surface-inverse);
  --road-danger-text: var(--road-on-danger-surface);
  --road-danger-contrast: var(--road-on-danger-surface-inverse);

  /* FONT
   -------------------- */
  --road-font: muli, arial, sans-serif;

  /* SIZE
    -------------------- */
  --road-font-size-75: 4.6875rem;
  --road-font-size-65: 4.0625rem;
  --road-font-size-57: 3.5625rem;
  --road-font-size-49: 3.0625rem;
  --road-font-size-43: 2.6875rem;
  --road-font-size-37: 2.3125rem;
  --road-font-size-32: 2rem;
  --road-font-size-28: 1.75rem;
  --road-font-size-24: 1.5rem;
  --road-font-size-21: 1.325rem;
  --road-font-size-18: 1.125rem;
  --road-font-size-16: 1rem;
  --road-font-size-14: 0.875rem;
  --road-font-size-12: 0.75rem;
  --road-font-size-10: 0.625rem;

  /* OVERLINE
    -------------------- */
  --road-overline: var(--road-font-size-12);

  /* UTILITY
    -------------------- */
  --road-legal-medium: var(--road-font-size-12);
  --road-label-medium: var(--road-font-size-16);
  --road-label-small: var(--road-font-size-12);
  --road-label-extra-small: var(--road-font-size-10);
  --road-caption-medium: var(--road-font-size-12);
  --road-helper-medium: var(--road-font-size-14);

  /* LINK
    -------------------- */
  --road-link-large: var(--road-font-size-18);
  --road-link-medium: var(--road-font-size-16);
  --road-link-small: var(--road-font-size-14);
  --road-link-extra-small: var(--road-font-size-12);

  /* BUTTON
  -------------------- */
  --road-button-medium: var(--road-font-size-16);
  --road-button-small: var(--road-font-size-14);

  /* FLUID
   -------------------- */
  --road-display-large: var(--road-font-size-57);
  --road-display-medium: var(--road-font-size-49);
  --road-display-small: var(--road-font-size-43);
  --road-heading-01: var(--road-font-size-32);
  --road-heading-02: var(--road-font-size-28);
  --road-heading-03: var(--road-font-size-24);
  --road-heading-04: var(--road-font-size-21);
  --road-sub-heading-large: var(--road-font-size-24);
  --road-sub-heading-medium: var(--road-font-size-21);
  --road-sub-heading-small: var(--road-font-size-18);

  /* BODY
    -------------------- */
  --road-body-large: var(--road-font-size-18);
  --road-body-medium: var(--road-font-size-16);
  --road-body-small: var(--road-font-size-14);


  /* SPACING
  -------------------- */
  --road-spacing-01: 0.125rem;
  --road-spacing-02: 0.25rem;
  --road-spacing-03: 0.5rem;
  --road-spacing-04: 0.75rem;
  --road-spacing-05: 1rem;
  --road-spacing-06: 1.5rem;
  --road-spacing-07: 2rem;
  --road-spacing-08: 2.5rem;
  --road-spacing-09: 3rem;
  --road-spacing-10: 4rem;
  --road-spacing-11: 5rem;
  --road-spacing-12: 6rem;
  --road-spacing-13: 10rem;


  /* OLD CSS VARIABLES
   -------------------- */

  /**
  * Primary
  */
  --road-primary-100: var(--road-primary-90);
  --road-primary-200: var(--road-primary-80);
  --road-primary-300: var(--road-primary-70);
  --road-primary-400: var(--road-primary-60);
  --road-primary-500: var(--road-primary-50);
  --road-primary-600: var(--road-primary-40);
  --road-primary-700: var(--road-primary-30);
  --road-primary-800: var(--road-primary-20);
  --road-primary-900: var(--road-primary-10);
  --road-primary-contrast: var(--road-on-primary);

  /**
  * Secondary
  */
  --road-secondary-100: var(--road-secondary-90);
  --road-secondary-200: var(--road-secondary-80);
  --road-secondary-300: var(--road-secondary-70);
  --road-secondary-400: var(--road-secondary-60);
  --road-secondary-500: var(--road-secondary-50);
  --road-secondary-600: var(--road-secondary-40);
  --road-secondary-700: var(--road-secondary-30);
  --road-secondary-800: var(--road-secondary-20);
  --road-secondary-900: var(--road-secondary-10);
  --road-secondary-contrast: var(--road-on-secondary);

  /**
   * Primary
   */
  --primary: var(--road-brand-primary);
  --primary-hover: var(--road-grey-999);
  --primary-darken: var(--road-grey-999);
  --primary-lighten: var(--road-primary-100);
  --primary-contrast: var(--road-grey-000);

  /**
   * Secondary
   */
  --secondary: var(--road-primary-500);
  --secondary-hover: var(--road-primary-700);
  --secondary-darken: var(--road-primary-700);
  --secondary-lighten: var(--road-primary-100);
  --secondary-contrast: var(--road-grey-000);

  /* GREYSCALE
  -------------------- */
  --road-grey-000: var(--road-grey-100-new);
  --road-grey-100: var(--road-grey-90);
  --road-grey-200: var(--road-grey-80);
  --road-grey-300: var(--road-grey-70);
  --road-grey-400: var(--road-grey-60);
  --road-grey-500: var(--road-grey-50);
  --road-grey-600: var(--road-grey-40);
  --road-grey-700: var(--road-grey-30);
  --road-grey-800: var(--road-grey-20);
  --road-grey-900: var(--road-grey-10);
  --road-grey-999: var(--road-grey-0);
  --road-disabled: var(--road-surface-disabled);

  /**
   * Accent
   */
  --accent: var(--road-secondary-500);
  --accent-hover: var(--road-secondary-700);
  --accent-darken: var(--road-secondary-700);
  --accent-lighten: var(--road-secondary-100);
  --accent-contrast: var(--road-grey-900);

  /* FEEDBACK
   -------------------- */

  /**
   * Information
   */
  --info: var(--road-info-default);
  --info-hover: var(--road-info-text);
  --info-text: var(--road-info-text);
  --info-background: var(--road-info-background);
  --info-contrast: var(--road-grey-000);

  /**
   * Success
   */
  --success: var(--road-success-default);
  --success-hover: var(--road-success-text);
  --success-text: var(--road-success-text);
  --success-background: var(--road-success-background);
  --success-contrast: var(--road-grey-000);

  /**
   * Warning
   */
  --warning: var(--road-warning-default);
  --warning-hover: var(--road-warning-text);
  --warning-text: var(--road-warning-text);
  --warning-background: var(--road-warning-background);
  --warning-contrast: var(--road-grey-900);

  /**
   * Danger
   */
  --danger: var(--road-danger-default);
  --danger-hover: var(--road-danger-text);
  --danger-text: var(--road-danger-text);
  --danger-background: var(--road-danger-background);
  --danger-contrast: var(--road-grey-000);

  /* MONOCHROME
   -------------------- */
  --icon: var(--road-grey-900);
  --text: var(--road-grey-900);
  --text-second: var(--road-grey-600);
  --text-disabled: var(--road-grey-400);
  --border-form: var(--road-grey-400);
  --border: var(--road-grey-300);
  --background: var(--road-grey-100);
  --background-second: var(--road-grey-100);
  --white: var(--road-grey-000);

  /* FONT
   -------------------- */
  --font: var(--road-font);
}


@media (min-width: 768px) {

  body {
    --road-display-large: var(--road-font-size-75);
    --road-display-medium: var(--road-font-size-65);
    --road-display-small: var(--road-font-size-57);
    --road-heading-01: var(--road-font-size-49);
    --road-heading-02: var(--road-font-size-37);
    --road-heading-03: var(--road-font-size-32);
    --road-heading-04: var(--road-font-size-28);
    --road-sub-heading-large: var(--road-font-size-32);
    --road-sub-heading-medium: var(--road-font-size-28);
    --road-sub-heading-small: var(--road-font-size-24);
  }
}