/* Melo Brand Styles Only */

/* Melo Brand Fonts */
@font-face {
  font-family: 'Gabarito';
  src: url('./fonts/gabarito/Gabarito-Regular.woff2') format('woff2'),
    url('./fonts/gabarito/Gabarito-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gabarito';
  src: url('./fonts/gabarito/Gabarito-Medium.woff2') format('woff2'),
    url('./fonts/gabarito/Gabarito-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gabarito';
  src: url('./fonts/gabarito/Gabarito-Bold.woff2') format('woff2'),
    url('./fonts/gabarito/Gabarito-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gabarito';
  src: url('./fonts/gabarito/Gabarito-SemiBold.woff2') format('woff2'),
    url('./fonts/gabarito/Gabarito-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gabarito';
  src: url('./fonts/gabarito/Gabarito-ExtraBold.woff2') format('woff2'),
    url('./fonts/gabarito/Gabarito-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gabarito';
  src: url('./fonts/gabarito/Gabarito-Black.woff2') format('woff2'),
    url('./fonts/gabarito/Gabarito-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-ExtraLight.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-Light.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-Regular.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-Medium.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-SemiBold.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-Bold.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-ExtraBold.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Reddit Sans';
  src: url('./fonts/reddit/RedditSans-Black.woff2') format('woff2'),
    url('./fonts/reddit/RedditSans-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Buffalo';
  src: url('./fonts/buffalo/Buffalo-Regular.woff2') format('woff2'),
    url('./fonts/buffalo/Buffalo-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Melo Brand Variables */
[data-brand="melo"] {
  /* Font Family */
  --primary: 'Reddit Sans';
  --secondary: 'Gabarito';
  --tertiary: 'Buffalo';

  /* Background */
    --Background-background-primary: #FFFFFF;
    --Background-background-secondary: #F4F7FF;
    --Background-background-tertiary: #E0E5F0;
    --Background-background-inverse: #40477D;

    /* Surfaces */
    --Surfaces-surface-primary: #FFFFFF;
    --Surfaces-surface-overlay: rgba(0, 0, 0, 0.65);
    --Surfaces-brand-primary: #5A5F96;
    --Surfaces-brand-primary-hover: #40477D;
    --Surfaces-brand-primary-muted: rgba(224, 226, 229, 0.50);
    --Surfaces-brand-primary-dim: rgba(90, 95, 150, 0.10);
    --Surfaces-brand-primary-faint: rgba(224, 226, 229, 0.05);
    --Surfaces-brand-secondary: #40477D;
    --Surfaces-surface-accent: #67C7C0;

    /* Text and Icon */
    --text-icon-remove-texticon-highcontrast: #0F1B26;
    --text-icon-remove-texticon-mediumcontrast: #414548;
    --text-icon-remove-texticon-lowcontrast: #5F6569;
    --text-icon-remove-texticon-disabled: #DBDBDB;
    --text-icon-remove-texticon-inverse: #FFF;
    --text-icon-remove-texticon-accent: #40477D;
    --text-icon-remove-texticon-accent-secondary: #67C7C0;
    --text-icon-remove-texticon-primaryaction: #FFF;

    /* Borders */
    --Border-border-highestcontrast: #000000;
    --Border-border-highcontrast: #949494;
    --Border-border-mediumcontrast: #BCBCBC;
    --Border-border-lowcontrast: #EAEEF2;
    --Border-border-lowestcontrast: #EAEFF3;
    --Border-border-focus: #5A5F96;

    --Red-700: #B91C1C;
}