OperationCode/front-end

/* IMPORTANT: Please run `yarn storybook` when file changes to update `./themeMap.js` */
:root {
  /* Colors */
  --primary: #3ed6f0; /* cerulean */
  --secondary: #252e3e; /* navy */
  --gray: #e2e2e2; /* gainsboro */
  --white: #f7f7f7; /* offwhite */
  --burntOrange500: hsl(14, 55%, 45%, 1);

  /* Colors as RGB values for rgba() usage */
  --rgbValuesPrimary: 62, 214, 240;
  --rgbValuesSecondary: 37, 46, 62;

  /* Bootstrap "state" colors */
  --success: hsl(134, 41%, 88%, 0.6);
  --successDeep: hsl(132, 60%, 25%, 1);
  --warning: hsl(46, 100%, 90%, 0.6);
  --warningDeep: hsl(39, 76%, 44%, 1);
  --error: hsl(355, 70%, 91%, 0.6);
  --errorDeep: hsl(355, 63%, 36%, 1);

  /* Fonts */
  --primaryFontFamily: "DIN Condensed Bold";
  --secondaryFontFamily: "Encode Sans";

  /*
   * Breakpoint definitions used in Storybook
   * NOTE: Any changes here should be also made to `../media-queries.css`
   */
  --smallViewportWidth: 576px;
  --mediumViewportWidth: 768px;
  --largeViewportWidth: 992px;
  --extraLargeViewportWidth: 1200px;

  /* Commonly referenced dimensions */
  --borderRadius: 3px;
  --navBarHeight: 65px;
  --navBarTopGutterHeight: 20px;
  --typicalMaxWidth: 65ch; /* TODO: Remove for max-w-prose */
}